<template>
  <div class="homePage">
    <div class="homePage-app-container">
      <div class="homePage-app-container-top">
        <div class="time">
          <span>服务器时间:</span>
          <span>{{ serverTime }}</span>
        </div>
        <div class="title">
          <dv-border-box-7 :color="['#0c71d4']" class="title-dv6">
            <div style="height: 47px;display: flex;align-items: center;justify-content: center;">
              <img src="@/assets/images/znzx-logo2.png" style="width: 35px;height: 35px;">
              <span style="color: #f4f4f5;font-size: 25px;font-family: 'mytext'">
                  新能源集中功率预测系统
                </span>
            </div>
          </dv-border-box-7>
        </div>
        <div class="btuBox">
          <div class="btu">
            <dv-border-box-2><span @click="push()">后台管理</span></dv-border-box-2>
          </div>
        </div>

      </div>
      <div class="homePage-app-container-main">
        <div class="app-container-main">
          <div class="app-container-main-right">
            <dv-border-box-10 class="main-dv10">
              <echarts-map @stationCode="changeStationCode($event)"/>
            </dv-border-box-10>
          </div>
          <div class="app-container-main-center">
            <dv-border-box-3 class="main-dv13">
              <curve-comparison  :stationCode="this.stationCode1"/>
            </dv-border-box-3>
          </div>
          <div class="app-container-main-left">
            <div class="app-container-main-left-top">
              <dv-border-box-10 class="main-dv10">
                <div class="tableTitleBox">
                  <dv-border-box-12 class="tableTitle">短期准确率</dv-border-box-12>
                </div>
                <div class="dv-table">
                  <short-term-accuracy :electricfield="electricfieldList" :prop="new Date()"/>
                </div>

              </dv-border-box-10>
            </div>
            <div class="app-container-main-left-bottom">

              <dv-border-box-10 class="main-dv10">
                <div class="tableTitleBox">
                  <dv-border-box-12 class="tableTitle">超短期准确率</dv-border-box-12>
                </div>
                <div class="dv-table">
                  <ultra-short-term-accuracy :electricfield1="electricfieldList" :prop="new Date()"/>
                </div>
              </dv-border-box-10>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import curveComparison from './curveComparison'
  import echartsMap from './echartsMap'
  import shortTermAccuracy from './shortTermAccuracy'
  import ultraShortTermAccuracy from './ultraShortTermAccuracy'
  import {fetchList as fetchElectricfieldList,getServerTime} from '@/api/electricfield'
  import {getManufactorByStationCode} from '@/api/forecastmanufactor'
  import {getStation} from '@/api/forecastpowerultrashortterm'
  export default {
    name: "index",
    props: {
      stationCode: {
        type: String
      }
    },
    components: {
      echartsMap,shortTermAccuracy,curveComparison,ultraShortTermAccuracy
    },
    data() {
      return {
        electricfieldList: [],//场站数据
        tableData: [],//今日上报率数据
        accurateTableData: [],//昨日准确率数据
        abnormalInfoTableData: [],//通道异常信息数据
        statusOption: [{value: '0', label: '正常'}, {value: '1', label: '异常'}],
        serverTime: '',//服务器时间
        nowTimer: null,
        reportTimer: null,
        channelTimer: null,
        config:{
          data: [],
          index: true,
          columnWidth: [50],
          align: ['center']
        },
        content:'',
        forecastManufactor: '',
        forecastManufactorList: [],
        stationList: [],
        stationCode1: '',
        tableLoading: false,
      }
    },
    destroyed() {
      clearInterval(this.nowTimer) // 关闭循环
      this.nowTimer = null
      clearInterval(this.reportTimer) // 关闭循环
      this.reportTimer = null
      clearInterval(this.channelTimer) // 关闭循环
      this.channelTimer = null
    },
    watch: {
      stationCode(data) {
        this.stationCode1 = data
      }
    },
    mounted() {
      this.init()
      this.getServerTime()
      this.nowTimer = setInterval(this.getServerTime, 1000 * 60)
      this.getStationCode()

    },
    methods: {
      // 轮播表的悬浮事件
      accuracyMouseover(row){
        if(row.columnIndex !== 0){
          this.content = row.row[1]
          return
        }
        this.content = row.row[0]
      },
      init() {
        fetchElectricfieldList().then(res => {
          // console.log(res.data.data)
          this.electricfieldList = res.data.data.records
        }).catch(e=>{
          console.log('获取场站信息异常：+'+e)
        })
      },
      getServerTime() {
        getServerTime().then(res => {
          var today = new Date(res.data.data)
          var yyyy = today.getFullYear()// 通过日期对象的getFullYear()方法返回年
          var MM = today.getMonth() + 1 < 10 ? '0' + (today.getMonth() + 1) : today.getMonth() + 1// 通过日期对象的getMonth()方法返回年
          var dd = today.getDate() < 10 ? '0' + today.getDate() : today.getDate()// 通过日期对象的getDate()方法返回年
          var hour = today.getHours() < 10 ? '0' + today.getHours() : today.getHours()
          var minute = today.getMinutes() < 10 ? '0' + today.getMinutes() : today.getMinutes()
          // var second = today.getSeconds()<10?'0'+today.getSeconds():today.getSeconds()
          var day // 用于保存星期（getDay()方法得到星期编号）
          if (today.getDay() === 0) day = '星期日 '
          if (today.getDay() === 1) day = '星期一 '
          if (today.getDay() === 2) day = '星期二 '
          if (today.getDay() === 3) day = '星期三 '
          if (today.getDay() === 4) day = '星期四 '
          if (today.getDay() === 5) day = '星期五 '
          if (today.getDay() === 6) day = '星期六 '
          this.serverTime = yyyy + '-' + MM + '-' + dd + '  ' + hour + ':' + minute + '   ' + day
        })
      },
      getManufactor(val) {
        this.forecastManufactorList = []
        this.forecastManufactor = []
        getManufactorByStationCode(val).then(response => {
          this.forecastManufactorList = response.data.data
          if (this.forecastManufactorList != '') {
            this.forecastManufactor = this.forecastManufactorList[0].sign;
          }
          this.tableLoading = false
        })
      },
      getStationCode() {
        this.tableLoading = true
        getStation().then(response => {
          this.stationList = response.data.data
          if (this.stationList.length > 0) {
            this.stationCode1 = this.stationList[0].value
            this.getManufactor(this.stationCode1)
          }
          this.tableLoading = false
        })
      },

      push() {
        this.$router.push({path: '/dashboard'})
      },
      formatStationCode(row) {
        const electricfield = this.electricfieldList.find(w => w.stationCode === row.stationCode)
        return electricfield !== null && electricfield !== undefined ? electricfield.name : row.stationCode
      },
      formatStatus(row) {
        const statusOption = this.statusOption.find(w => w.value === row.status)
        return statusOption !== null && statusOption !== undefined ? statusOption.label : row.status
      },
      formatAccuracyType(row){
        return row.type === 'day'?'天':'单点平均值'
      },
      refreshChange() {
        // this.getCompositeData()
        this.getStationCode()
      },
      changeStationCode(value){
        this.stationCode1 = value
      }
    }
  }
</script>

<style scoped>
  .homePage {
    width: 100%;
    height: calc(100vh);
    background: url("../../../public/img/pageBg.png");
    background-size: 100% 100%;
    color: white;
  }

  .homePage-app-container {
    display: flex;
    flex-direction: column;
  }

  .homePage-app-container-top {
    height: 20%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .homePage-app-container-main {
    margin-top: .5%;
    height: 78%;
    display: flex;
    justify-content: center;
  }

  .app-container-main {
    width: 96%;
    display: flex;
  }

  .app-container-main-right {
    width: 20%;
    margin-left: .8%;
  }

  .app-container-main-center {
    width: 58%;
  }

  .app-container-main-left {
    width: 20%;
    margin-left: .5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .app-container-main-left-top, .app-container-main-left-bottom {
    height: 48%;
  }

  .app-container-main-left-bottom {
    margin-bottom: 1%;
  }

  .time {
    width: 25%;
    margin-left: 1%;
  }

  .title {
    width: 50%;
    height: 50px;
    padding-top: .3%;
  }

  .title-dv6 {
    width: 50%;
    font-size: 25px;
    font-family: 'mytext'
  }

  .btuBox {
    width: 20%;
  }

  .btu {
    width: 40%;
    height: calc(4vh);
    color: white;
    float: right;
    margin-right: 1%;
  }

  .title, .btu /deep/ .border-box-content, .title-dv6 /deep/ .border-box-content {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .main-dv13 {
    /*width: 75%;*/
    height: calc(89vh);
    margin-left: .5%;
    padding: 2%;
  }

  /deep/ .main-dv10 .border-box-content {
    padding-top: 2%;
    padding-left: 2%;
  }

  .tableTitleBox {
    width: 100%;
    height: calc(4vh);
    display: flex;
    justify-content: center;
  }

  .tableTitle {
    width: 45%;
  }

  .tableTitle /deep/ .border-box-content {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /deep/ .dv-table .el-table th.el-table__cell > .cell, /deep/ .dv-table .el-table td.el-table__cell div {
    text-align: center;
    color: white;
    font-size: 15px;
  }

  /deep/ .dv-table .el-table,
  /deep/ .dv-table .el-table tr, /deep/ .dv-table .el-table th.el-table__cell {
    background-color: transparent;
    color: white;
  }

  /deep/ .dv-table .el-table__body .el-table__row.hover-row td, /deep/ .dv-table .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #81b6f1 !important;
  }

  /*滚动条的宽度*/
  /deep/ .dv-table .el-table__body-wrapper::-webkit-scrollbar {
    cursor: pointer;
    width: 6px; /*横向滚动条*/
    height: 6px; /*纵向滚动条 必写*/
  }

  /*滚动条的滑块*/
  /deep/ .dv-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }
  /*************************/
  /deep/ .dv-table .dv-scroll-board .rows .row-item{
    height: 35% !important;
    line-height: 20px !important;
  }
  /deep/ .dv-table .dv-scroll-board .rows .row-item .ceil:nth-child(1){
    text-align: center !important;
    line-height: 80px !important;
  }
  /deep/ .dv-table .dv-scroll-board .header .header-item{
    text-align: center;
  }
  @font-face {
    font-family: 'mytext';
    src: url("../../../public/img/huawenxinwei.ttf");
    font-weight: normal;
    font-style: normal;
  }
</style>
