<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="batchDqPresets">一键设置干预值</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="capacity" 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>

      <div>
        <el-dialog :visible.sync="bathInterveneVisible" :close-on-click-modal='false'
                   :before-close="closeDialog" width="50%">
          <el-form :model="bathForm">
            <fieldset>
              <legend>一键设置干预值</legend>
              <el-row style="gutter:30" class="row-bg el-row-two" justify="space-between">
                <el-col :span="10" :offset="1">
                  <el-form-item label="开始时间：" label-width="150px" style="min-width: 100px">
                    <el-time-select
                      v-model="bathForm.startTime"
                      :clearable="false"
                      :picker-options="{
                        start:'00:00',
                        step:'00:15',
                        end:'23:45'
                      }"
                      placeholder="选择日期">
                    </el-time-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                  <el-form-item label="结束时间：" label-width="150px" style="min-width: 110px">
                    <el-time-select
                      v-model="bathForm.endTime"
                      :clearable="false"
                      :picker-options="{
                        start:'00:00',
                        step:'00:15',
                        end:'23:45',
                      }"
                      placeholder="选择日期">
                    </el-time-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="gutter:30" class="row-bg el-row-two" justify="space-between">
                <el-col :span="10" :offset="1">
                  <el-form-item label="设定干预值：" label-width="150px" style="min-width: 110px">
                    <el-input-number style="width: 100%" v-model="bathForm.dqValue" :min=0 placeholder="必填项"/>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                </el-col>
              </el-row>
            </fieldset>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveBathIntervene()">设 置</el-button>
        </span>
        </el-dialog>
      </div>
    </el-container>
  </div>
</template>
<script>

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

export default {
  data() {
    return {
      bathForm: {
        startTime: '00:00',
        endTime: '23:45',
        dqValue: 0
      },
      bathInterveneVisible: false,
      gyDate:'',
      stationCode: '',
      stationList: [],
      stationAllList: [],
      chart:null,
      // 日期选择器
      dateTime: '',
      tableData:[],
      tableLoading: false,
      showTable:true,
      loading:false,
      capacity:'',
    }
  },
  destroyed() {
    this.chart.dispose()
    this.chart.clear()
  },
  created: function() {
    this.$axios.get('/electricfield/allData').then((res) => {
      this.stationAllList = res.data.data
    })
  },
  mounted() {
    this.getStationCode()
    // 获取装机容量
    // this.$axios.get('/electricfield/getStationInfo').then((res) => {
    //   this.capacity = res.data.capacity
    // }).catch((error) => {
    //   this.$message.error('查询装机容量出错' + error)
    // })
  },
  methods: {
    batchDqPresets(){
      if (this.tableData.length==0){
        this.$message.warning('请先获取干预数据')
        return
      }
      this.bathForm.startTime="00:00"
      this.bathForm.endTime="23:45"
      this.bathInterveneVisible = true
    },
    saveBathIntervene(){
      if (this.bathForm.startTime=='' ||this.bathForm.startTime==null || this.bathForm.endTime=='' || this.bathForm.endTime==null){
        this.$message.warning('请选择开始时间和结束时间！')
        return
      }
      if (this.bathForm.startTime>this.bathForm.endTime){
        this.$message.warning('开始时间不能大于结束时间，不能进行设置！')
        return
      }

      if (this.bathForm.dqValue==null){
        this.$message.warning('请录入干预值！')
        return
      }

      if (this.bathForm.dqValue>this.capacity){
        this.$message.warning('干预值超出装机容量:'+this.capacity+'MW，不能进行设置！')
        return
      }

      for (let i=0;i<this.tableData.length;i++){
        let tempsj = this.$moment(this.tableData[i].forecastTime).format('HH:mm')
        if (tempsj>=this.bathForm.startTime && tempsj<=this.bathForm.endTime){
          this.tableData[i].presetsPower = this.bathForm.dqValue
        }
      }
      this.closeDialog()
    },
    closeDialog() {
      this.bathForm.startTime=''
      this.bathForm.endTime=''
      this.bathForm.dqValue=0
      this.bathInterveneVisible = false
    },
    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.dateTime==null){
        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
      }
      const item = this.stationAllList.find(item => item.stationCode === this.stationCode)
      this.capacity = item.capacity

      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'))

        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(){
      if (this.tableData.length>0){
        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) => {
        })
      }
      else{
        this.$message.warning('数据不足96个点不能下发干预！')
      }
    },
    // 保存短期干预
    bathDqPresets(){
      if (this.tableData.length>0){
        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) => {
        })
      }
      else{
        this.$message.warning('数据不足96个点不能下发干预！')
      }
    }
  }
}
</script>
<style>

</style>
