<!--
  -    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 style="display: inline-block; margin-top: 2%;margin-left: 15px">
        <span style="font-weight: bold;font-size: 16px;">场站名称：</span>
        <el-select class="transparent-background" style="width:250px;" v-model="stationCode" size="small" @change="getManufactor">
          <el-option
            v-for="item in stationList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <span style="float: left">{{ item.label }}</span>
            <span style="float: right; color: white;font-size: 13px">{{ item.value }}</span>
          </el-option>
        </el-select>
      </div>
      <span label="预测功率与实际功率对比" name="first">
          <div style="width: 100%; height: calc(80vh - 50px)" id="echarts"></div>
        </span>
    </div>
  </div>
</template>

<script>
  import {
    getStation,
    getCapacity,
    // getForecastManufactor,
    getCompositeData
  } from '@/api/forecastpowerultrashortterm'
  import {tableOption} from '@/const/crud/forecastpowerultrashortterm'
  import {mapGetters} from 'vuex'
  import * as echarts from 'echarts';
  import {getManufactorByStationCode} from '@/api/forecastmanufactor'
  import cc from '../curvecolors'
  export default {
    name: 'forecastpowerultrashortterm',
    props: {
      stationCode: {
        type: String
      }
    },
    data() {
      return {

        //安徽考核超短期第一点
        cdqQueryPoint: 1,
        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,
        stationList: [],
        forecastManufactor: '',
        forecastManufactorList: [],
        drawData: {datas: [], times: []},
        resizeKey: 1,
        activeName: 'first',
        loading: false,
        ultraShortData: [],
        shortData: [],
        powerStationStatusData: [],
        timeStamp: [],
        arrays: [],
        fromHead: []
      }
    },
    computed: {
      ...mapGetters(['permissions']),
    },
    watch: {
      stationCode(data) {
        this.stationCode = data
        this.getCompositeData()
      }
    },
    mounted() {
      this.getStationCode()
    },
    methods: {
      draw(timeaxis, realpower, shortPower, ultraShortPower, cap) {
        this.arrays = []
        this.arrays.push({
          name: '实际功率',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          data: realpower,
          itemStyle: {
            color: 'red' // 设置'Email'系列的颜色为红色
          }
        });
        let _this = this
        let tempDqLineColor = 1
        for (let item in shortPower[0]) {
          _this.arrays.push({
            name: item + '短期',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            data: shortPower[0][item],
            itemStyle: {
              color: cc["dq"+tempDqLineColor]
            }
          });
          tempDqLineColor=tempDqLineColor+1
        }
        let tempCdqLineColor = 1
        for (let item in ultraShortPower[0]) {
          _this.arrays.push({
            name: item + '超短期',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            data: ultraShortPower[0][item],
            itemStyle: {
              color: cc["cdq"+tempCdqLineColor]
            }
          });
          tempCdqLineColor = tempCdqLineColor+1
        }

        this.chart = echarts.init(document.getElementById('echarts'))
        const option = {
          backgroundColor: 'transparent',
          title: {
            top: 20,
            text: '预测功率与实际功率对比',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: 'white'
            },
            left: '1%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#ffffff'
              }
            }
          },
          legend: {
            top: 20,
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            // data: ['实际功率', '短期数据', '超短期数据'],
            right: '4%',
            textStyle: {
              fontSize: 12,
              color: 'white' // 设置图例文本颜色为蓝色
            }
          },
          dataZoom: [
            {
              startValue: ''
            },
            {
              type: 'inside'
            }],
          grid: {
            top: 100,
            left: '4%',
            right: '2%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: true,
            axisLine: {
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            data: timeaxis
          }],
          yAxis: [{
            type: 'value',
            name: '(MW)',
            axisTick: {
              show: false
            },
            axisLine: {
              show:true,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          }],
          series: this.arrays
        };
        option.yAxis[0].max = cap
        this.chart.setOption(option, true)
      },
      getManufactor(val) {
        this.forecastManufactorList = []
        this.forecastManufactor = []
        getManufactorByStationCode(val).then(response => {
          this.forecastManufactorList = response.data.data
          if (this.forecastManufactorList != '') {
            this.forecastManufactor = this.forecastManufactorList[0].sign;
          }
          this.tableLoading = false
        })
        this.getCompositeData()
      },
      getCompositeData() {
        const param = new URLSearchParams()
        param.append('stationCode', this.stationCode)
        param.append('startTime', this.startTime)
        param.append('endTime', this.endTime)
        param.append("cdqPoint", this.cdqQueryPoint)
        param.append("forecastManufactor", this.forecastManufactor)
        param.append("dqPoint", "1")
        getCompositeData(param).then(response => {
          // this.tableData = response.data.data.composite
          // this.page.total = this.tableData.length
          Promise.all([this.getCapacity(param)]).then((values) => {
            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.sj, response.data.data.dq, response.data.data.cdq, values[0].capacity)
          });
        })
      },
      getCapacity(param) {
        return new Promise(function (resolve, reject) {
          getCapacity(param).then(response => {
            resolve(response.data.data)
          })
        })
      },
      // getForecastManufactor(page, params) {
      //   this.tableLoading = true
      //   getForecastManufactor(Object.assign({
      //     // current: page.currentPage,
      //     // size: page.pageSize
      //   }, params, this.searchForm)).then(response => {
      //     console.log(response)
      //     this.forecastManufactorList = response.data.data.records
      //     if (this.forecastManufactorList.length > 0) {
      //       this.forecastManufactor = this.forecastManufactorList[0].sign
      //     }
      //   })
      // },
      getStationCode() {
        this.tableLoading = true
        getStation().then(response => {
          this.stationList = response.data.data
          if (this.stationList.length > 0) {
            // this.stationCode = this.stationList[0].value
            // this.getManufactor(this.stationCode)
          }
          // this.getCompositeData()
          this.tableLoading = false
        })
      },
      handlePageChange({currentPage, pageSize}) {
        this.currentPage = currentPage;//当前页
        this.pageSize = pageSize//每页显示的条数
      },
      // 绑定
      formatStationCode(value) {
        var data = ""
        this.stationList.forEach(s => {
          data = s.value == value ? s.label : data
        })
        return data
      }
    }
  }
</script>

<style>
  .transparent-background .el-input__inner,
  .transparent-background .el-select__item {
    background-color: transparent;
    border-color: transparent;
    color: white;font-size: 16px;
  }
  .transparent-background .el-input__suffix {
    display: none;
  }
</style>
