<template>
  <div class="app-container">
<!--    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">-->
<!--      <el-tab-pane label="短期" name="dq"></el-tab-pane>-->
<!--      <el-tab-pane label="超短期" name="cdq"></el-tab-pane>-->
<!--    </el-tabs>-->
    <div class="dark-el-input dark-el-button">
      <el-form ref="queryForm" size="small" :inline="true" popper-class="cpp-popper">
        <el-form-item label="时间范围">
          <el-date-picker
              :clearable="false"
              v-model="dateTime"
              type="monthrange"
              range-separator="至"
              :picker-options="expireDateOption"
              :unlink-panels="true"
              @change="onchange"
              format="yyyy-MM"
              placeholder="选择生成日期"
              popper-class="cpp-popper">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="场站名称">
          <el-select v-model="stationCode" placeholder="请选择" popper-class="cpp-popper" @change="onchange">
            <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" size="small" style="margin-left: 5px" icon="el-icon-search" @click="dataQuery">
            查询
          </el-button>
          <el-button type="primary" size="small" style="margin-left: 5px" icon="el-icon-download" @click="exportFile">
            导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="masChart" style="width: 100%;height: 450px"></div>
    <div v-if="activeName == 'dq'">
      <vxe-table
        ref="shortTermTable"
        border v-loading="loading"
        class="custom-table"
        max-height="350px"
        element-loading-background="rgba(8, 61, 92,1)"
        :data="tableData.slice((currentPage-1) * pageSize,currentPage * pageSize)"
      >
        <vxe-table-column title="场站" align="center" field="station"/>
        <vxe-table-column title="月份" align="center" field="month" :formatter="monthFormatter"/>
        <vxe-table-column title="预测模型" align="center" field="preModels"/>
        <vxe-table-column title="短期准确率(%)" align="center" field="shortAccuracy"/>
        <vxe-table-column title="上报文件短期准确率(%)" align="center" field="uploadShortAccuracy"></vxe-table-column>
        <vxe-table-column title="准确率排名" align="center" field="accuracyRanking"/>
      </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 v-else>
      <vxe-table ref="ultraShortTermTable" border v-loading="loading" :data="tableData" class="custom-table" max-height="300px"
                element-loading-background="rgba(8, 61, 92,1)">
        <vxe-table-column title="场站" align="center" field="station"/>
        <vxe-table-column title="月份" align="center" field="month" :formatter="monthFormatter"/>
        <vxe-table-column title="预测模型" align="center" field="preModels"/>
        <vxe-table-column title="超短期准确率(%)" align="center" field="shortAccuracy"/>
        <vxe-table-column title="上报文件超短期准确率(%)" align="center" field="uploadShortAccuracy"></vxe-table-column>
        <vxe-table-column title="准确率排名" align="center" field="accuracyRanking"/>
      </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 {
      ifclick: true,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      activeName:'dq',
      stationName:'',
      showDeleteButton:true,
      expireDateOption: {
        disabledDate(time) {
          const today = new Date();
          const threeYearDate = new Date(today)
          threeYearDate.setFullYear(today.getFullYear() - 3)
          return time.getTime()<threeYearDate.getTime() || time.getTime()>today.getTime()
        }
      },
      loading: false,
      xData:[],
      yData:[],
      tableData: [],
      dataS:'E2',
      dataS4:'E4',
      form: [],
      dateTime: [ new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime(), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0, 23, 59, 59, 999).getTime()],
      stationList: [],
      stationCode: '',
      forecastType: "dq",
    }
  },
   created() {
    this.getStationCode()
  },
  mounted() {},
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  computed: {},
  methods: {
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage
      this.pageSize = pageSize
    },
    monthFormatter({cellValue, row, column}){
      return cellValue;
    },
    onchange(){
      this.dataQuery()
    },
    handleClick(tab, event){
      this.forecastType = tab.name
      this.dataQuery()
    },
    exportFile() {
      this.loading = true
      var find = this.stationList.find(s=>s.value == this.stationCode);
      this.stationName = find.label
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1])
      let queryParams = {
        "stationCode": this.stationCode,
        "startTime": startTime,
        "endTime": endTime,
        "forecastType": this.forecastType,
        "dataSources": 'E2',
        "uploadDataSources": 'E4',
        "stationName":this.stationName
      }
      this.$axios.get("/accuracyPassRate/export/", {params: queryParams},{
        responseType: 'blob'// 用于解决中文乱码
      }).then((response) => {
        this.loading = false
      }).catch((error) => {
        this.loading = false
        this.$message.error('导出失败' + error)
      })
    },
    dataQuery(){
      if (!this.ifclick){
        return;
      }
      var find = this.stationList.find(s=>s.value == this.stationCode);
      this.stationName = find.label
      this.xData = []
      this.yData = []
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1])
      let queryParams = {
        "stationCode": this.stationCode,
        "startTime": startTime,
        "endTime": endTime,
        "forecastType": this.forecastType,
        "dataSources": 'E2',
        "uploadDataSources": 'E4',
        "stationName":this.stationName
      }
      this.ifclick = false
      const accuracyPassRateByMonthPromise = new Promise((resolve,reject)=>{
        this.$axios.get('/accuracyPassRate/getByMonthBetweenAndForecastTypeAndStationCode', {params: queryParams}).then(response => {
          if (response.data){
            for (const [key,value] of Object.entries(response.data)){
              this.xData.push(key)
              this.yData.push(value.toFixed(2))
            }
          }
          resolve();
        }).catch(() => {}).finally(()=>{
          this.initChart()
        })
      })
      const accuracyPassRateSingleMonthPromise = new Promise((resolve,reject)=>{
        this.$axios.get('/accuracyPassRate/getBySingleMonthBetweenAndForecastTypeAndStationCode', {params: queryParams}).then(response => {
          if (response.data){
            this.tableData = response.data || []
            this.total = response.data.length
          }
          resolve();
        })
      })
      Promise.all([accuracyPassRateByMonthPromise,accuracyPassRateSingleMonthPromise]).then(()=>{
        this.ifclick = true
      })
    },
    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()
      })
    },
    initChart() {
      var chartDom = document.getElementById('masChart');
      this.chart = echarts.init(chartDom);
      this.chart.setOption({
        title: {
          top: 20,
          text: '综合准确率',
          textStyle: {
            color:'#fff',
             fontSize: 16,
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.xData,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontWeight: 500,
                fontSize: '14'
              },
            },
          }
        ],
        yAxis: [
          {
            name: '%',
            nameTextStyle: {
              color: '#ffffff',
              fontSize: 12,
              padding: 10
            },
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontWeight: 500,
                fontSize: '14'
              },
            },
          }
        ],
        series: [
          {
            // name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: this.yData,
            markLine:{
              data:[
                {
                  silent:true,
                  yAxis:65,
                  label:{
                    position:'end',
                    formatter:'65',
                    color:'#4d69da',
                  },
                  lineStyle:{
                    type:'dashed',
                    color:'#3c73ea',
                    width:1
                  }
                },
              ]
            },
          }
        ]
      })
    },
  }
}
</script>
<style scoped>
::v-deep .el-tabs__nav-scroll{
  display: flex;
  justify-content: center;
  width: 50% !important;
  margin: 0 auto !important;
}

/deep/ .reg-config-btu .el-button:first-child {
  margin-top: 5px;
}

/deep/ .reg-config-btu .el-button {
  margin-top: 10px;
}

/deep/ .reg-config-btu .el-button:last-child {
  margin-bottom: 10px;
}

/deep/ .reg-config-btu .el-button + .el-button {
  margin-left: 0px;
}
</style>
