<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->
<template>
  <div class="execution">
    <div class="filter">
      <div class="startTime" style="display: inline-block">
        <span class="timeText" style="font-weight: bold;font-size: 14px">&#12288;起始时间:</span>
        <el-date-picker
          v-model="startTime"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="endTime" style="display: inline-block">
        <span class="timeText" style="font-weight: bold;font-size: 14px">&#12288;截止时间:</span>
        <el-date-picker
          v-model="endTime"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="timeQuery" style="display: inline-block">
        &#12288;<el-button size="small" :loading="loading" @click="getCenterData">查询</el-button>
      </div>
    </div>
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="图表" name="first">
        <div style="width: 100%; height: calc(80vh - 50px)" id="echarts"></div>
      </el-tab-pane>
      <el-tab-pane label="表格" name="second">
        <vxe-table
          align="center"
          :loading="loading"
          ref="xTable"
          auto-resize
          border
          resizable
          highlight-current-row
          show-overflow
          :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        >
          <vxe-table-column
            v-for="(item, index) in fromHead"
            :key="index"
            align="center"
            :title="item.label"
            :field="item.field"
          ></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>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {

  getCenterData
} from '@/api/forecastpowerultrashortterm'
import {tableOption} from '@/const/crud/forecastpowerultrashortterm'
import {mapGetters} from 'vuex'
import * as echarts from 'echarts';
import cc from '../../../curvecolors'

export default {
  name: 'centerforecast',
  data() {
    return {
      searchForm: {},
      tableData: [],
      total: 0, // 总页数
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页显示多少条
      tableLoading: false,
      tableOption: tableOption,
      startTime: new Date(new Date().toLocaleDateString()).getTime(),
      endTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 1,
      drawData: {datas: [], times: []},
      resizeKey: 1,
      activeName: 'first',
      loading: false,
      ultraShortData: [],
      shortData: [],
      timeStamp: [],
      arrays: [],
      fromHead: []
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  mounted() {
    // this.getForecastManufactor(this.page)
    // this.draw()
  },
  methods: {
    draw(timeaxis, shortPower, ultraShortPower) {
      this.arrays = []
      this.arrays.push({
        name: '短期',
        type: 'line',
        smooth: true,
        showSymbol:false,
        symbolSize: 5,
        data: shortPower,
        itemStyle: {
          color: 'red'
        }
      });
      this.arrays.push({
        name: '超短期',
        type: 'line',
        smooth: true,
        showSymbol:false,
        symbolSize: 5,
        data: ultraShortPower,
        itemStyle: {
          color: '#FFD700'
        }
      });
      let _this = this

      this.chart = echarts.init(document.getElementById('echarts'))
      const option = {
        backgroundColor: 'transparent',
        title: {
          top: 20,
          text: '风电集中预测',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#040606'
          },
          left: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation:false,
            lineStyle: {
              color: '#040606'
            }
          }
        },
        legend: {
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          // data: ['实际功率', '短期数据', '超短期数据'],
          right: '4%',
          textStyle: {
            fontSize: 12
          }
        },
        dataZoom: [
          {
            startValue: ''
          },
          {
            type: 'inside'
          }],
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: '#040606'
            }
          },
          data: timeaxis
        }],
        yAxis: [{
          type: 'value',
          name: '(MW)',
          // max:totalcap,
          min:0,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#040606'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: this.arrays
      };
      this.chart.setOption(option, true)
    },
    getCenterData() {
      const param = new URLSearchParams()
      param.append('startTime', this.startTime)
      param.append('endTime', this.endTime)
      getCenterData(param).then(response => {
          this.fromHead = response.data.data.fromHead
          this.tableData = response.data.data.tableList
          this.total = response.data.data.tableList.length
          this.draw(response.data.data.time, response.data.data.dq, response.data.data.cdq)
      })
    },
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage;//当前页
      this.pageSize = pageSize//每页显示的条数
    },

    refreshChange() {
    }
  }
}
</script>
