<template>
  <div class="app-container">
    <div class="dark-el-input dark-el-button">
      <el-form ref="queryForm" size="small" :inline="true">
        <el-form-item label="时间">
          <el-date-picker
            :picker-options="expireDateOption"
            :clearable="false"
            v-model="dateTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            popper-class="cpp-popper"
          />
        </el-form-item>
        <el-form-item label="场站名称">
          <el-select v-model="stationCode" placeholder="请选择" popper-class="cpp-popper">
            <el-option
              v-for="item in stationList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 5px" icon="el-icon-search" @click="dataQuery">查询
          </el-button>
          <el-button type="primary" style="margin-left: 5px" icon="el-icon-download" @click="exportFile">导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="padding-top: 10px">
      <div style="width: 95%;height: 450px" id="czChartsId"></div>
    </div>
    <div style="padding-top: 50px">
      <vxe-table
        highlight-hover-row
        :keep-source="true"
        align="center"
        :loading="loading"
        ref="xTable"
        auto-resize
        highlight-current-row
        border
        resizable
        show-overflow
        :data="tableData.slice((currentPage-1) * pageSize,currentPage * pageSize)">
        <vxe-table-column field="time" title="时间" width="180px" fixed="left"></vxe-table-column>
        <vxe-table-column field="stationName" title="场站名称"></vxe-table-column>
        <vxe-table-column field="openCapacity" title="开机容量(MW)"></vxe-table-column>
        <vxe-table-column field="realValue" title="实际功率(MW)"></vxe-table-column>
        <vxe-table-column field="dqValue" title="短期预测功率(MW)"></vxe-table-column>
        <vxe-table-column field="dqDeviation" title="短期预测偏差(MW)"></vxe-table-column>
        <vxe-table-column field="dqDeviationRatio" title="短期预测偏差比(%)"></vxe-table-column>
      </vxe-table>
      <vxe-pager
        perfect
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :total="total"
        :page-sizes=[10,50,100]
        :layouts="['PrevJump', 'PrevPage','JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
        @page-change="handlePageChange"
      >
      </vxe-pager>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: 'inverterinfo',
  data() {
    return {
      expireDateOption: {
        disabledDate(time) {
          return time.getTime() >= new Date(new Date().toLocaleDateString()).getTime()
        }
      },
      hoursArray: [],
      czChart: null,
      dateTime: [new Date(new Date().toLocaleDateString()).getTime() - 1000 * 60 * 60 * 24, new Date(new Date().toLocaleDateString()).getTime() - 1000 * 60 * 60 * 24],
      total: 0,
      sortOrder: 'asc',
      pageSize: 10,
      currentPage: 1,
      stationList: [],
      stationCode: [],
      searchForm: {},
      tableData: [],
      nameList: [],
      loading: false,
      lineColor: '#3b3b3b',
      xAxisBottomList: [],
      xAxisTopList: [],
      chartOption: {
        backgroundColor: 'transparent',
        title: {
          top: 20,
          text: '偏差图',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
          },
          left: 'center'
        },
        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
          },
          selected: {
            '短期预测偏差': true,
            '偏差比': true,
          }
        },
        dataZoom: [{
          show: true,
          realtime: true,
          start: 0,
          end: 100,
          left: "15%",
          right: "15%",
          throttle: 50
        }, {
          type: 'inside'
        }],
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {onZero: false},
            splitLine: {show: true, lineStyle: {color: '#cbcbcb'}, interval: 95},
            axisLabel: {
              formatter: function (value) {
                return value.split(' ')[1]
              }
            },
            axisTick:{show:false}
          },
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {onZero: false},
            position: 'top',
            axisLabel: {
              padding: [0, 0, 0, 110],
              interval: 95,
              formatter: function (value) {
                return value.split(' ')[0]
              }
            },
          }
        ],
        yAxis: [{
          type: 'value',
          name: 'MW',
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }, {
          type: 'value',
          name: '%',
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series:
          [{
            name: '短期预测偏差',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            connectNulls: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(121,255,68)',

              }
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(121,255,68)'
                },
                {
                  offset: 1,
                  color: 'rgb(121,255,68)'
                }
              ])
            },
            data: []
          },
            {
              yAxisIndex: 1,
              name: '偏差比',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              connectNulls: true,
              lineStyle: {
                normal: {
                  width: 2
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(255,68,68)',
                }
              },
              data: []
            },
          ]
      }
    }
  },
  created() {
    this.getStationCode()
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.czChart) {
      return
    }
    this.czChart.dispose()
    this.czChart = null
  },
  computed: {},
  methods: {
    initChart() {
      this.czChart = echarts.init(document.getElementById('czChartsId'), 'dark')
      this.czChart.setOption(this.chartOption)
    },
    nameFormat({cellValue, row, column}) {
      const item = this.nameList.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage
      this.pageSize = pageSize
    },
    exportFile() {
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1]) + 1000 * 60 * 60 * 24 - 1

      if (endTime - startTime > 60 * 60 * 24 * 1000 * 30) {
        this.$message.warning("最多只能查询30天的数据！")
        return
      }

      this.loading = true
      let queryParams = {
        "stationCode": this.stationCode,
        "startTime": startTime,
        "endTime": endTime,
      }
      this.$axios.get("/dqHistoryContrastController/export/", {params: queryParams},{
        responseType: 'blob'// 用于解决中文乱码
      }).then((response) => {
        this.loading = false
      }).catch((error) => {
        this.loading = false
        this.$message.error('导出失败' + error)
      })
    },
    async dataQuery() {
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1]) + 1000 * 60 * 60 * 24 - 1

      if (endTime - startTime > 60 * 60 * 24 * 1000 * 30) {
        this.$message.warning("最多只能查询30天的数据！")
        return
      }

      this.loading = true
      let queryParams = {
        "stationCode": this.stationCode,
        "startTime": startTime,
        "endTime": endTime,
      }
      this.$axios.get('/dqHistoryContrastController/queryTableData', {params: queryParams}).then(response => {
        this.tableData = response.data.tableList
        this.total = response.data.tableList.length

        this.chartOption.xAxis[0].data = response.data.xAxisBottomList
        this.chartOption.xAxis[1].data = response.data.xAxisBottomList
        console.log(response.data)
        // 偏差曲线
        this.chartOption.series[0].data = response.data.dqpcLineList
        // 偏差比曲线
        this.chartOption.series[1].data = response.data.ratioLineList
        // this.chartOption.series[1].data = this.tkData
        this.czChart.setOption(this.chartOption)


        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getStationCode() {
      this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
        this.stationList = response.data
        if (this.stationList.length > 0) {
          this.stationCode = this.stationList[0].value
          this.dataQuery()
        }
      })
    },
  },
}
</script>
