<template>
  <div id="app">
    <div class="top">
      <div class="left">
        <div style="font-size:28px;color:#ffffff">{{time}} &nbsp;&nbsp; | &nbsp;&nbsp;{{week}}</div>
      </div>
      <div class="middle">
        <div class="leftBtn" @click="powerPdf" :class="{'handleAction':handleAction=='电力行业发展'}"><div class="leftBtnText">2022年度中国能源大数据报告——电力行业发展篇</div></div>
        <div class="middleText"><img src="./assets/images/homeText.png"/></div>
        <div class="rightBtn" @click="energyPdf" :class="{'handleAction1':handleAction1=='能源发展综述'}"><div class="rightBtnText">2022年度中国能源大数据报告——能源发展综述篇</div></div>
      </div>
      <div class="right"><img :src="weather" style="width:10%;height:50%"/>{{weatherText}} &nbsp;&nbsp;| &nbsp;&nbsp;<span style="color:rgb(23,231,232)">{{lowTemperature}}-{{highTemperature}}℃</span>&nbsp;&nbsp;|&nbsp;&nbsp; {{wind}}
      <span style="color:rgb(23,231,232);height: 50%;align-items: center;display: flex;">{{windLevel}}</span>级
      </div>
    </div>
     <div class="content">
      <router-view />

    </div>
    <div
        class="pdfShow"
        v-show="fileType"
        style="
          width: 20%;
          height: 85%;
          position: absolute;
          background: rgb(5,53,45);
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          overflow-y:scroll
          z-index: 9999;
          top: 98px;
          border: 20px solid rgb(5,53,45);
        "
      >
        <div
          style="
            position: fixed;
            width: 20%;
            height: 3%;
            font-size: 18px;
            padding: 5px 10px 0 0;
            color: #fff;
            text-align: right;
            cursor: pointer;
            box-sizing: border-box;
            background: rgb(5,53,45,0.7);
            z-index: 9999;
          "
          @click="handleClosePdf"
        >
          x
        </div>
        <pdf v-for="i in numPages" :key="i"  :page="i" :src="filePdf" style="top:3.2%;z-index:999"></pdf>
      </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import axios from "axios"
import {getData} from './api/index.js'
  export default {
    data(){
      return{
      time:'',
      handleAction:'',
      handleAction1:'',
      fileType:false, //pdf显示
      numPages: 1, //pdf页数
      filePdf:'', //pdf文件
      weather:require('./assets/weather/Cloudy .png'),
      weekList:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
      week:'',
      highTemperature:'',
      lowTemperature:'',
      wind:'',
      weatherText:'',
      windLevel:'',
      }
    },
    mounted() {
      //pdf文件加载
    //   this.$nextTick(()=>{
    //     this.filePdf.promise.then((pdf) => {
    //   this.numPages = pdf.numPages
    // }).catch(err =>{
    //   console.log(err);
    // })
    //   })
      let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
      this.week = this.weekList[week]
      window.setInterval(()=>{
        this.time = this.$moment().format("YYYY-MM-DD   hh:mm:ss")
      },1000)
      getData({
        action:'one',
        key:'天气情况'
      }).then((res)=>{
        let toDay = this.$moment().format("D")
        for (let i = 0; i < res.data.data.length; i++) {
          if (toDay == res.data.data[i].第N天) {
            this.highTemperature = res.data.data[i].最高温度;
            this.lowTemperature = res.data.data[i].最低温度;
            this.wind = res.data.data[i].风向;
            this.weatherText = res.data.data[i].天气;
            this.windLevel = res.data.data[i].风力等级;
            switch (this.weatherText) {
                case "多云":
                  return this.weather = require('./assets/weather/Cloudy .png');
                case "阴":
                  return this.weather = require('./assets/weather/Cloudy .png')
                case "暴雨":
                  return this.weather = require('./assets/weather/rainstorm.png')
                case "冰雹":
                  return this.weather = require('./assets/weather/hail.png')
                case "大风":
                  return this.weather = require('./assets/weather/gale.png')
                case "大雪":
                  return this.weather = require('./assets/weather/bigsnow.png')
                case "大雨":
                  return this.weather = require('./assets/weather/bigrain.png')
                case "雷电":
                  return this.weather = require('./assets/weather/thunder.png')
                case "雷阵雨":
                  return this.weather = require('./assets/weather/shower.png')
                case "沙尘暴":
                  return this.weather = require('./assets/weather/sand.png')
                case "晴":
                  return this.weather = require('./assets/weather/sun.png')
                case "雾霾":
                  return this.weather = require('./assets/weather/smog.png')
                case "小雪":
                  return this.weather = require('./assets/weather/snow.png')
                case "小雨":
                  return this.weather = require('./assets/weather/rain.png')
                case "雪":
                  return this.weather = require('./assets/weather/rainlitter.png')
                case "多云":
                  return this.weather = require('./assets/weather/night.png')
                case "雨夹雪":
                  return this.weather = require('./assets/weather/rainsnow.png')
                case "月亮":
                  return this.weather = require('./assets/weather/moon.png')
                case "中雪":
                  return this.weather = require('./assets/weather/mieddlesnow.png')
                case "中雨":
                  return this.weather = require('./assets/weather/middlerain.png')
              }
          }else{
            this.highTemperature = '0';
            this.lowTemperature = '0';
            this.wind = '东风';
            this.windLevel = '0'
            this.weatherText = '阴';
            this.weather = require('./assets/weather/Cloudy .png');
          }
        }
      })
    },
    methods:{
      //关闭PDF文件
     handleClosePdf(){
        this.fileType  =  false
       this.filePdf = ''
       this.$nextTick(()=>{
         this.handleAction = ''
          this.handleAction1 = ''
       })
      },
      powerPdf(){
      this.filePdf = ''
      let fileUrl = "/pdf/power.pdf";
      this.numPages = 20
      this.filePdf = pdf.createLoadingTask(fileUrl)
      this.fileType  =  true
      this.handleAction = '电力行业发展'
      },
      energyPdf(){
      this.filePdf = ''
      let fileUrl = "/pdf/energy.pdf";
      this.filePdf = pdf.createLoadingTask(fileUrl)
      this.numPages = 27
      this.fileType  =  true
      this.handleAction1 = '能源发展综述'
      }
    },
    components: {
    pdf
  },
  }
</script>

<style lang="less">
/*将大屏设置为1920*1080,设置缩放的方向*/
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  // color: #2c3e50;
  // margin-top: 60px;
  width: 5760px;
  height: 1080px;
  transition: all .2s linear;
  transform-origin: left top;
  background: url("./assets/images/home.png") no-repeat;
  background-size: 100% 100%;
}
</style>
<style lang="less" scoped>
.top{
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-between;
  padding: 10px 40px;
  box-sizing: border-box;
  background: url("./assets/images/homeTop.png") no-repeat;
  background-size: 100% 100%;
  .left{
    width: 10%;
    height: 100%;
    display: flex;
    -webkit-box-align: center;
    align-items: flex-start;
    -webkit-box-pack: start;
    justify-content: space-around;
    font-weight: 800;
    font-family:"Microsoft YaHei";
  }
  .middle{
    width: 50%;
    height: 100%;
    font-size:28px;
     display: flex;
     align-items: center;
    justify-content: space-between;
    .leftBtn{
      width:25%;
      height: 100%;
     display: flex;
    justify-content: flex-start;
    color:#ffffff;
    .leftBtnText{
      height: 61%;
      // width: 56.62%;
       width: 100%;
      background: url("./assets/images/btnLeftPdf.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 25px;
    }
    }
    .handleAction{
      width:25%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      color:rgb(15,251,251);
      .leftBtnText{
      height: 61%;
      // width: 56.62%;
      width: 100%;
      background: url("./assets/images/leftAct.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 25px;
    }
    }
    .middleText{
      width:59%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      color:#ffffff;
      font-size: 60px;
      font-weight: 800;
      // font-style:italic;
      letter-spacing:6px;
      font-family:"微软雅黑";
    }
    //   .middleText:before{
    //     content: attr(text);
    //     position: absolute;
    //     z-index: 100;
    //     color:rgba(84,255,233,0.4);
    //     -webkit-mask:linear-gradient(to top, rgb(58,253,228), transparent );
    // }
    .rightBtn{
      width:25%;
      height: 100%;
     display: flex;
    justify-content: flex-end;
    color:#ffffff;
    .rightBtnText{
      height: 61%;
      // width: 56.62%;
       width: 100%;
      background: url("./assets/images/btnRightPdf.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 25px;
    }
    }
    .handleAction1{
      width:25%;
      height: 100%;
       display: flex;
      justify-content: flex-end;
      color:rgb(15,251,251);
      .rightBtnText{
      height: 61%;
      // width: 56.62%;
       width: 100%;
      background: url("./assets/images/rightAct.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 25px;
    }
    }
  }
  .right{
    width: 9%;
    height: 100%;
    font-size:28px;
    display: flex;
    -webkit-box-pack: end;
    color: #ffffff;
    font-weight: 700;
  }
}
.content {
  width: 100%;
  height: calc(100% - 11%);
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.pdfShow{
  &::-webkit-scrollbar{
      width: 0;
    }
}
</style>>
