<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>
    <vxe-toolbar ref="fstToolBar" >
      <template v-slot:buttons>
        <vxe-button class="downloadButton" style="border:none;"  @click="reForecast"><i class="el-icon-magic-stick" ></i></vxe-button>
      </template>
    </vxe-toolbar>
    <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(new Date().setDate(1)).toLocaleDateString()).getTime(),
      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: {
    reForecast(){
      this.$XModal.confirm(`此选项会按照最新时间重新预测发电量和风速，是否继续？`).then(type => {
        if (type === 'confirm') {
          this.$axios.get('/reForecast').then((res) => {
            this.getTable()
          })
        }
      })
    },
    getTable() {
      this.loading = true
      this.$emit('sendLoading', this.loading)
      this.$axios.get('/getThroughoutTheYearList/'+ this.startTime).then((res) => {
        this.tableColumn = [
          {
            title: '发电量统计（单位：万千瓦时）',
            children: [
              {field: 'data0', title: res.data.mapDay.day0, minWidth: "120"},
              {field: 'data1', title: res.data.mapDay.day1, minWidth: "120"},
              {field: 'data2', title: res.data.mapDay.day2, minWidth: "120"},
              {field: 'data3', title: res.data.mapDay.day3, minWidth: "120"},
              {field: 'data4', title: res.data.mapDay.day4, minWidth: "120"},
              {field: 'data5', title: res.data.mapDay.day5, minWidth: "120"},
              {field: 'data6', title: res.data.mapDay.day6, minWidth: "120"},
              {field: 'data7', title: res.data.mapDay.day7, minWidth: "120"},
              {field: 'data8', title: res.data.mapDay.day8, minWidth: "120"},
              {field: 'data9', title: res.data.mapDay.day9, minWidth: "120"},
              {field: 'data10', title: res.data.mapDay.day10, minWidth: "120"},
              {field: 'data11', title: res.data.mapDay.day11, minWidth: "120"},
              {field: 'data12', title: res.data.mapDay.day12, minWidth: "120"},
              {field: 'totalNwp', title: "总功率", minWidth: "120"},
            ]
          }
        ]
        this.nwpTableColumn= [
          {
            title: '风速（单位：m/s）',
            children: [
              {field: 'nwpKey0', title: res.data.mapDay.day0, minWidth: "130"},
              {field: 'nwpKey1', title: res.data.mapDay.day1, minWidth: "130"},
              {field: 'nwpKey2', title: res.data.mapDay.day2, minWidth: "130"},
              {field: 'nwpKey3', title: res.data.mapDay.day3, minWidth: "130"},
              {field: 'nwpKey4', title: res.data.mapDay.day4, minWidth: "130"},
              {field: 'nwpKey5', title: res.data.mapDay.day5, minWidth: "130"},
              {field: 'nwpKey6', title: res.data.mapDay.day6, minWidth: "130"},
              {field: 'nwpKey7', title: res.data.mapDay.day7, minWidth: "130"},
              {field: 'nwpKey8', title: res.data.mapDay.day8, minWidth: "130"},
              {field: 'nwpKey9', title: res.data.mapDay.day9, minWidth: "130"},
              {field: 'nwpKey10', title: res.data.mapDay.day10, minWidth: "130"},
              {field: 'nwpKey11', title: res.data.mapDay.day11, minWidth: "130"},
              {field: 'nwpKey12', title: res.data.mapDay.day12, minWidth: "130"},
            ]
          }
        ]
        this.dates = [
          res.data.mapDay.day0,
          res.data.mapDay.day1,
          res.data.mapDay.day2,
          res.data.mapDay.day3,
          res.data.mapDay.day4,
          res.data.mapDay.day5,
          res.data.mapDay.day6,
          res.data.mapDay.day7,
          res.data.mapDay.day8,
          res.data.mapDay.day9,
          res.data.mapDay.day10,
          res.data.mapDay.day11,
          res.data.mapDay.day12,
        ]
        this.tableData = []
        this.tableData.push(res.data.mapData)
        console.log(res.data.mapData);
        this.nwpTableData = []
        this.nwpTableData.push(res.data.nwpDay)
        console.log(this.nwpTableData);
        const arr = []
        arr.push(this.tableData[0].data0)
        arr.push(this.tableData[0].data1)
        arr.push(this.tableData[0].data2)
        arr.push(this.tableData[0].data3)
        arr.push(this.tableData[0].data4)
        arr.push(this.tableData[0].data5)
        arr.push(this.tableData[0].data6)
        arr.push(this.tableData[0].data7)
        arr.push(this.tableData[0].data8)
        arr.push(this.tableData[0].data9)
        arr.push(this.tableData[0].data10)
        arr.push(this.tableData[0].data11)
        arr.push(this.tableData[0].data12)
        const nwpArr = []
        nwpArr.push(this.nwpTableData[0].nwpKey0)
        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)
        nwpArr.push(this.nwpTableData[0].nwpKey8)
        nwpArr.push(this.nwpTableData[0].nwpKey9)
        nwpArr.push(this.nwpTableData[0].nwpKey10)
        nwpArr.push(this.nwpTableData[0].nwpKey11)
        nwpArr.push(this.nwpTableData[0].nwpKey12)
        this.loading = false
        this.$emit('sendLoading', this.loading)
        this.draw(arr,this.dates,nwpArr)
      }).catch((error) => {
        this.loading = false
        this.$emit('sendLoading', this.loading)
        this.$message.error('查询table出错' + error)
      })

    },
    draw(data,date,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
          }
        }],
        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'
            }
          }
        },
          {
            type: 'value',
            name: '(m/s)',
            min: 0,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#fff2cc'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: '#666633'
              }
            }
          }],

        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
              }
            }
          }
        ]
      }
      this.chart.setOption(option, true)
      window.onresize = this.chart.resize()
    },

    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 {
  height: 40%;
}

</style>
