<template>
  <div class="app-container">
    <el-container>
      <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
      <el-form ref="queryForm" size="small" :inline="true" label-width="100px">
        <el-form-item label="场站名称" prop="stationCode">
          <el-select style="width:250px" clearable v-model="stationCode" size="small">
          <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: #8492a6;font-size: 13px">{{ item.value }}</span>
          </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="干预日期" prop="gyDate">
          <el-date-picker
            v-model="dateTime"
            type="date"
          />
        </el-form-item>
        <el-form-item>
          <el-button size="small" :loading="loading" @click="getDqData">查询</el-button>
          <el-button type="primary" size="small" style="margin-left: 5px" icon="el-icon-s-tools" @click="saveDqPresets">保存并下发短期干预值</el-button>
        </el-form-item>
      </el-form>
      </el-header>

      <div style="width: 100%;height: 92%;position: absolute;top: 9%">
        <div style="height: 100%;width: 30%;left: 0;top:0;display: inline-block">
          <el-table
            height="550px"
            border
            stripe
            size="mini"
            :data="tableData"
            style="width: 90%">
            <el-table-column
              prop="forecastTime"
              header-align="center"
              align="center"
              :formatter="dateFormat"
              label="预测时间">
            </el-table-column>
            <el-table-column
              prop="activePower"
              header-align="center"
              align="center"
              label="预测值">
            </el-table-column>
            <el-table-column
              prop="presetsPower"
              :show-overflow-tooltip="true"
              header-align="center"
              align="center"
              label="干预值">
              <template slot-scope="scope">
                <vxe-input type="number" v-model="scope.row.presetsPower" size="small" style="width:100%" min="0"
                           :max="50" placeholder=""></vxe-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="height: 100%;width: 70%;left: 30%;top:0;display: inline-block;position: absolute">
          <div id="gycharts" style="float:left;width: 95%;height: 550px"></div>
        </div>
      </div>
    </el-container>
  </div>
</template>
<script>

import {getStation} from "@/api/inverterinfo";

export default {
  data() {
    return {
      gyDate:'',
      stationCode: '',
      stationList: [],
      chart:null,
      // 日期选择器
      dateTime: '',
      tableData:[],
      tableLoading: false,
      showTable:true,
      loading:false,
      capacity:'',
    }
  },
  destroyed() {
    this.chart.dispose()
    this.chart.clear()
  },
  created: function() {
  },
  mounted() {
    this.getStationCode()
    // 获取装机容量
    // this.$axios.get('/electricfield/getStationInfo').then((res) => {
    //   this.capacity = res.data.capacity
    // }).catch((error) => {
    //   this.$message.error('查询装机容量出错' + error)
    // })
  },
  methods: {
    getStationCode() {
      this.$axios.get('/electricfield/all').then((res) => {
        this.stationList = res.data.data
      })
    },
    //格式化表格时间
    dateFormat(row,column){
      let date = row[column.property]
      return this.$moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    // 获取短期干预
    getDqData() {
      // 判断场站和干预日期是否选择
      if(this.stationCode=='' || this.dateTime==''){
        this.$message.warning('请选择场站及干预日期')
        return
      }

      const startTime = Math.round(this.dateTime)
      const endTime = Math.round(this.dateTime) + 60 * 60 * 24 * 1000 - 1
      var queryParams = {
        startTime: startTime,
        endTime:endTime,
        stationCode:this.stationCode
      }
      this.$axios.get('/dqInterveneController/getShort/',{params: queryParams}).then((res) => {
        this.tableData = res.data.data
        let activePower=[]
        let presetsPower=[]
        let time=[]
        for (let i=0;i<this.tableData.length;i++) {
          if (i==0){
            this.capacity = this.tableData[i].capacity
          }
          activePower.push(this.tableData[i].activePower)
          presetsPower.push(this.tableData[i].presetsPower)
          time.push(this.$moment(this.tableData[i].forecastTime).format('YYYY-MM-DD HH:mm:ss'))
        }
        this.chart = this.$echarts.init(document.getElementById('gycharts'))
        // var fmColors= ['#FF0000', '#00fe3b']
        // var fdoption= {
        //   color: fmColors,
        //   legend: {
        //     icon:'roundRect',
        //     data: ['预测值', '干预值'],
        //     selectedMode:false,
        //     padding: [0, 0, 0, 0]
        //   },
        //   tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //       type: 'cross'
        //     },
        //   },
        //
        //   xAxis: {
        //     type: 'category',
        //     data:time,
        //   },
        //   yAxis: [
        //     {
        //       type: 'value',
        //       position: 'left',
        //       name: '功率',
        //       min: 0,
        //       max: this.capacity,
        //       axisLabel: {
        //         formatter: '{value} MW'
        //       },
        //     }
        //   ],
        //   series: [
        //     {
        //       name:'预测值',
        //       data: activePower,
        //       type: 'line',
        //       symbol: 'none'
        //     },
        //     {
        //       name:'干预值',
        //       data: presetsPower,
        //       type: 'line',
        //       symbol: 'none',
        //     },
        //   ]
        // }

        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: '3%',
            right: '2%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: true,
            axisLine: {
              lineStyle: {
                color: '#040606'
              }
            },
            data: time
          }],
          yAxis: [{
            type: 'value',
            name: '(MW)',
            min: 0,
            max: this.capacity,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#040606'
              }
            },
            axisLabel: {
              interval:'auto',
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: '#57617B'
              }
            }
          }],
          series: [
            {
              name:'预测值',
              data: activePower,
              type: 'line',
              symbol: 'none',
              smooth: true,
              showSymbol:false,
              symbolSize: 5,
            },
            {
              name:'干预值',
              data: presetsPower,
              type: 'line',
              symbol: 'none',
              smooth: true,
              showSymbol:false,
              symbolSize: 5,
            },
          ]
        };


        this.chart.setOption(option,true)
        // window.onresize = this.chart.resize()
      })
    },
    // 保存短期干预
    saveDqPresets(){
      var dqTempDto = {
        list: this.tableData,
        stationCode:this.stationCode
      }
      this.$axios.post('/dqInterveneController/saveIntervene',dqTempDto).then((res) => {
        if (res==undefined){
          this.$message.success('保存失败')
        }
        else{
          this.$message.success('保存成功')
          this.getDqData()
        }
      }).catch((error) => {
      })
    }
  }
}
</script>
<style>

</style>
