<template>
  <div style="width: 100%;height: 100%">
    <div class="tableContent">
      <vxe-grid
        id="blakPowerData"
        border
        show-overflow
        export-config
        highlight-hover-row
        :toolbar="tableToolbar"
        :custom-config="{storage: true, checkMethod: checkColumnMethod}"
        :auto-resize="true"
        :header-cell-style="styleTableStr"
        max-height="91%"
        :cell-style="styleTableStr"
        align="center"
        :loading="loading"
        :columns="tableColumn"
        :data="tableData"></vxe-grid>
    </div>
    <div class="tableContent">
      <vxe-grid
        id="blakNwpData"
        border
        show-overflow
        export-config
        highlight-hover-row
        :toolbar="NwpToolBar"
        :custom-config="{storage: true, checkMethod: checkColumnMethod}"
        :auto-resize="true"
        :header-cell-style="styleTableStr"
        max-height="91%"
        :cell-style="styleTableStr"
        align="center"
        :loading="loading"
        :columns="nwpTableColumn"
        :data="nwpTableData"></vxe-grid>
    </div>
    <div style="margin-top: 50px">
      <div style="width: 100%;height: 400px" id="powerChats"/>
    </div>
  </div>
</template>

<script>
import resize from '../../../../components/Charts/mixins/resize'

export default {
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    queryTime: function (newQuestion, oldQuestion) {

      var queryTimeList = newQuestion.split(",")
      this.currentPage = 1
      this.startTime = Number(queryTimeList[0])
      this.endTime = Number(queryTimeList[1])
      this.getTable()
    }
  },
  props: {
    queryTime: {
      type: String,
    },
    thFormat: {
      type: Array
    }
  },
  mixins: [resize],
  data() {
    return {
      styleTableStr:{},
      lineColor: '',
      startTime: new Date(new Date().toLocaleDateString()).getTime(),
      endTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 1,
      thLoadSign: true,
      loading: false,
      tableData: [],
      nwpTableData: [],
      tableToolbar: {
        export: true,
        custom: true
      },
      NwpToolBar: {
        export: true,
        custom: true
      },
      tableColumn: [],
      nwpTableColumn:[],
      powerChats: {},
      dates:[]
    }
  },
  created() {
    this.getTable()
    if(sessionStorage.getItem('styleSwitch') === 'blue'){
      this.styleTableStr = {background:'black',color:'white'}
      this.lineColor = 'white'
    }else{
      this.lineColor = '#3b3b3b'
    }
  },
  mounted() {
    window.addEventListener("resize", this.handleResize);
    window.addEventListener("transitionend", this.handleResize);
  },
  destroyListener() {
    window.removeEventListener('resize', this.handleResize)
    window.removeEventListener('transitionend', this.handleResize)
  },
  methods: {
    handleResize() {
      // this.chart.resize()
    },
    getTable() {
      this.loading = true
      this.$emit('sendLoading', this.loading)
      this.$axios.get('/forecastPowerShortTerm/getElectricEnergyTotal/' + this.startTime).then((res) => {
        this.tableColumn = [
          {
            title: '发电量统计（单位：万千瓦时）',
            children: [
              {field: 'day1', title: res.data.mapDate.date1, minWidth: "130"},
              {field: 'day2', title: res.data.mapDate.date2, minWidth: "130"},
              {field: 'day3', title: res.data.mapDate.date3, minWidth: "130"},
              {field: 'day4', title: res.data.mapDate.date4, minWidth: "130"},
              {field: 'day5', title: res.data.mapDate.date5, minWidth: "130"},
              {field: 'day6', title: res.data.mapDate.date6, minWidth: "130"},
              {field: 'day7', title: res.data.mapDate.date7, minWidth: "130"},
            ]
          }
        ]
        if(res.data.type.elType == "1"){
          this.nwpTableColumn= [
            {
              title: '环境数据统计（单位：MJ/㎡）',
              children: [
                {field: 'nwpKey1', title: res.data.mapDate.date1, minWidth: "130"},
                {field: 'nwpKey2', title: res.data.mapDate.date2, minWidth: "130"},
                {field: 'nwpKey3', title: res.data.mapDate.date3, minWidth: "130"},
                {field: 'nwpKey4', title: res.data.mapDate.date4, minWidth: "130"},
                {field: 'nwpKey5', title: res.data.mapDate.date5, minWidth: "130"},
                {field: 'nwpKey6', title: res.data.mapDate.date6, minWidth: "130"},
                {field: 'nwpKey7', title: res.data.mapDate.date7, minWidth: "130"},
              ]
            }
          ]
        }else{
          this.nwpTableColumn= [
            {
              title: '环境数据统计（单位：m/s）',
              children: [
                {field: 'nwpKey1', title: res.data.mapDate.date1, minWidth: "130"},
                {field: 'nwpKey2', title: res.data.mapDate.date2, minWidth: "130"},
                {field: 'nwpKey3', title: res.data.mapDate.date3, minWidth: "130"},
                {field: 'nwpKey4', title: res.data.mapDate.date4, minWidth: "130"},
                {field: 'nwpKey5', title: res.data.mapDate.date5, minWidth: "130"},
                {field: 'nwpKey6', title: res.data.mapDate.date6, minWidth: "130"},
                {field: 'nwpKey7', title: res.data.mapDate.date7, minWidth: "130"},
              ]
            }
          ]
        }

        this.dates = [
          res.data.mapDate.date1,
          res.data.mapDate.date2,
          res.data.mapDate.date3,
          res.data.mapDate.date4,
          res.data.mapDate.date5,
          res.data.mapDate.date6,
          res.data.mapDate.date7
        ]
        this.tableData = []
        this.tableData.push(res.data.mapDay)
        this.nwpTableData = []
        this.nwpTableData.push(res.data.nwpDay)
        const arr = []
        arr.push(this.tableData[0].day1)
        arr.push(this.tableData[0].day2)
        arr.push(this.tableData[0].day3)
        arr.push(this.tableData[0].day4)
        arr.push(this.tableData[0].day5)
        arr.push(this.tableData[0].day6)
        arr.push(this.tableData[0].day7)
        const nwpArr = []
        nwpArr.push(this.nwpTableData[0].nwpKey1)
        nwpArr.push(this.nwpTableData[0].nwpKey2)
        nwpArr.push(this.nwpTableData[0].nwpKey3)
        nwpArr.push(this.nwpTableData[0].nwpKey4)
        nwpArr.push(this.nwpTableData[0].nwpKey5)
        nwpArr.push(this.nwpTableData[0].nwpKey6)
        nwpArr.push(this.nwpTableData[0].nwpKey7)
        this.loading = false
        this.$emit('sendLoading', this.loading)
        this.draw(arr,this.dates,res.data.type.elType,nwpArr)
      }).catch((error) => {
        this.loading = false
        this.$emit('sendLoading', this.loading)
        this.$message.error('查询table出错' + error)
      })

    },
    draw(data,date,type,nwp) {
      this.chart = this.$echarts.init(document.getElementById('powerChats'))

      var option = {
        title: {
          text: '发电量变化',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: this.lineColor
          },
          left: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: [{
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ['发电量','环境数据'],
          right: '4%',
          textStyle: {
            fontSize: 12,
            color: this.lineColor
          }
        }],
        // dataZoom: [{
        //   show: true,
        //   realtime: true,
        //   start: 0,
        //   end: 100,
        //   left: "15%",
        //   right: "15%",
        //   textStyle: {
        //     color: "#ffffff"
        //   }
        // },
        //   {
        //   type: 'inside'
        // }],
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date,
          axisLabel: {
            formatter: '{value}'
          },
          axisLine: {
            lineStyle: {
              color: this.lineColor
            }
          }
        },
        yAxis: [{
          type: 'value',
          name: '(万千瓦时)',
          axisLine: {
            lineStyle: {
              color: this.lineColor
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: [
          {
            name: '发电量',
            type: 'line',
            data: data,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            itemStyle: {
              normal: {

                color: '#c9daf8',
                borderColor: 'rgba(50,194,219,0.2)',
                borderWidth: 12
              }
            }
          },
          {
            yAxisIndex: 1,
            name: '环境数据',
            type: 'line',
            data: nwp,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            itemStyle: {
              normal: {

                color: '#aef899',
                borderColor: 'rgba(87,219,50,0.2)',
                borderWidth: 12
              }
            }
          }
        ]
      }
      if (type == 1) {
        option.yAxis.push({
          type: 'value',
          name: '(MJ/㎡)',
          min: 0,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#ffe599'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        })
      } else {
        option.yAxis.push({
          type: 'value',
          name: '(m/s)',
          min: 0,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#fff2cc'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#666633'
            }
          }
        })
      }
      this.chart.setOption(option, true)
      window.onresize = this.chart.resize()
    },

    // dateFormat({ cellValue, row, column }) {
    //   return this.$XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
    // },
    checkColumnMethod({column}) {
      if (column.property === 'time') {
        return false
      }
      return true
    },
    // 时间转换
    dateFormat(cellValue) {
      if (cellValue !== null) {
        const date = new Date(cellValue) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        const Y = date.getFullYear() + '-'
        const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        const D = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()
        return Y + M + D
      }
    },
  }
}
</script>
<style scoped>
.tableContent {
  /*width: 100%;*/
  height: 40%;
}

/*.tableContent >>> td {*/
  /*border: 1px solid #ffffff;*/
/*}*/

/*.rtPageturning {*/
  /*width: 100%;*/
  /*height: 10%;*/
/*}*/

/*.rtPageturning >>> button,*/
/*.rtPageturning >>> span,*/
/*.rtPageturning >>> input,*/
/*.rtPageturning >>> .vxe-pager--btn-wrapper li {*/
  /*background-color: transparent !important;*/
  /*color: #ffffff !important;*/
  /*border: 1px solid #ffffff;*/
/*}*/

/*.rtPageturning >>> span {*/
  /*border: none*/
/*}*/

/*.rtPageturning >>> .vxe-pager--wrapper .vxe-pager--btn-wrapper li:not(.disabled).is--active {*/
  /*background-color: #9f9fa0 !important;*/
/*}*/

/*.tableContent >>> .vxe-button.type--button.is--circle {*/
  /*padding: 0 .5em;*/
  /*min-width: 34px;*/
  /*border-radius: 10%;*/
  /*border: none;*/
  /*background: transparent;*/
  /*color: white;*/
/*}*/
</style>
