<template>
  <div class="app-container">
    <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
              :picker-options="expireDateOption"
              :clearable="false"
              v-model="dateTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              popper-class="cpp-popper"
          />
        </el-form-item>
        <el-form-item label="场站名称">
          <el-select class="select-dropdown-checkbox"
                     collapse-tags
                     v-model="biddingStage"
                     v-bind="$attrs"
                     multiple
                     style="width: 100%"
                     placeholder="请选择线路"
                     @change="handleSelect"
                     popper-class="cpp-popper" :popper-append-to-body="false"
          >
            <div style="padding: 0 20px; line-height: 34px">
              <el-checkbox
                  v-model="isCheckAll"
                  :indeterminate="isIndeterminate"
                  @change="handleCheckAllChange"
              >所有场站
              </el-checkbox
              >
            </div>
            <el-checkbox-group v-model="biddingStage">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
                <el-checkbox
                    style="pointer-events: none"
                    :label="item.value"
                >
                  {{ item.label }}
                </el-checkbox>
              </el-option>
            </el-checkbox-group>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 5px" icon="el-icon-search" @click="beforeQuery">查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="padding-top: 10px">
      <vxe-table
          ref="xTable"
          align="center"
          class="mytable-style"
          auto-resize
          border
          resizable
          export-config
          highlight-current-row
          show-overflow
          :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
        <vxe-table-column field="tkDate" title="调控日期"></vxe-table-column>
        <vxe-table-column field="stationCode" title="调控场站" :formatter="stationCodeFormat"></vxe-table-column>
        <vxe-table-column field="forecastDate" title="上报预测日期"></vxe-table-column>
        <vxe-table-column field="regulationStatusEnum" title="调控下发状态"></vxe-table-column>
        <vxe-table-column field="uploadStatusEnum" title="上报状态"></vxe-table-column>
        <vxe-table-column field="createBy" title="调控人"></vxe-table-column>
        <vxe-table-column field="voltage" title="策略查看">
          <template slot-scope="scope">
            <img src="@/assets/images/camera.png" style="width: 25px;cursor:pointer;" @click="jumpCamera(scope.row)">
          </template>
        </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>
    </div>


    <!--  策略选择弹窗     -->
    <div class="dark-el-dialog">
      <el-dialog :visible.sync="detailOpen" :before-close="closeDialog" :close-on-click-modal="false" width="60%"
                 style="height: calc(100% - 200px);">

        <div class="flex">
          <div style="font-size: 15px;font-weight: bold;">{{this.dialogShowForecastDate}}短期调控策略</div>
          <div style="margin-left: 100px;font-size: 15px;font-weight: bold;">调控日期: {{this.dialogShowTkDate}}</div>
        </div>
        <div class="flex width-100" style="margin-top: 10px">
          <div style="width: 40%">
            <el-table
                :data="detailData"
                height="550px"
                size="mini"
                style="width: 100%">
              <el-table-column
                  prop="time"
                  header-align="center"
                  align="center"
                  label="时间"
              >
              </el-table-column>
              <el-table-column
                  prop="xs"
                  header-align="center"
                  align="center"
                  label="系数">
              </el-table-column>
              <el-table-column
                  prop="sz"
                  header-align="center"
                  align="center"
                  label="数值">
              </el-table-column>
              <el-table-column
                  prop="ysValue"
                  header-align="center"
                  align="center"
                  label="原始值">
              </el-table-column>
              <el-table-column
                  prop="tkValue"
                  header-align="center"
                  align="center"
                  label="调控值"
              >
              </el-table-column>
            </el-table>
          </div>
          <div style="width:60%;margin-left: 5px;justify-content: center">
            <div style="width: 100%;height: 550px" id="tkcharts"></div>
          </div>
        </div>
      </el-dialog>
    </div>


  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: 'inverterinfo',
  data() {
    return {
      capacity: '',
      detailData:[],
      dialogShowTkDate:'',
      dialogShowForecastDate:'',
      selectRow:'',
      chart: null,
      detailOpen: false,
      isCheckAll: false, // 是否全选
      isIndeterminate: false, //全选复选框标识
      options: [],
      biddingStage: [],

      expireDateOption: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      dateTime: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime()],
      total: 0,
      sortOrder: 'asc',
      pageSize: 10,
      currentPage: 1,
      stationList: [],
      stationCode: [],
      searchForm: {},
      tableData: [],
      nameList: [],
      loading: false,
      modId: '',//备用id
      hoursArray: [],
      chartOption: {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ['原始曲线', '调控曲线','上报曲线'],
          right: '4%',
          textStyle: {
            fontSize: 12,
            // color: this.lineColor
          },
          selected: {
            '原始曲线': true,
            '调控曲线': true,
            '上报曲线': true,
          }
        },
        dataZoom: [{
          show: true,
          realtime: true,
          start: 0,
          end: 100,
          left: "15%",
          right: "15%",
          throttle: 50
        }, {
          type: 'inside'
        }],
        grid: {
          top: 100,
          left: '10%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {onZero: false},
        }],
        yAxis: [{
          type: 'value',
          name: 'MW',
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: [{
          name: '原始曲线',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          connectNulls: true,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(219,50,51)',
              borderWidth: 12
            }
          },
          data: []
        },
          {
            name: '调控曲线',
            type: 'line',
            showSymbol: false,
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            connectNulls: true,
            lineStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                width: 2
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderWidth: 50
              }
            },
            data: []
          },
          {
            name: '上报曲线',
            type: 'line',
            showSymbol: false,
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            connectNulls: true,
            lineStyle: {
              normal: {
                color: '#00FF00',
                width: 2
              }
            },
            itemStyle: {
              normal: {
                color: '#00FF00',
                borderWidth: 50
              }
            },
            data: []
          },
        ]
      }
    }
  },
  created() {
    // 获取场站下拉列表
    this.getStationCode()
  },
  mounted() {

  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  computed: {},
  methods: {
    closeDialog(){
      this.dialogShowForecastDate = ''
      this.dialogShowTkDate = ''
      this.hoursArray = []
      this.detailData = []
      this.chartOption.series[0].data = []
      this.chartOption.series[1].data = []
      this.chartOption.series[2].data = []
      this.chart.setOption(this.chartOption)
      this.detailOpen = false
    },
    initChart() {
      // 弹出框上部显示日期
      this.dialogShowForecastDate = this.selectRow.forecastDate
      this.dialogShowTkDate = this.selectRow.tkDate
      // 设置x轴时间
      for (let i = 0; i < 24 * 60; i += 15) {
        let hours = Math.floor(i / 60);
        let minutes = i % 60;
        this.hoursArray.push(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`);
      }
      this.chartOption.xAxis[0].data = this.hoursArray
      // 调用后端获取曲线数据和列表调控参数数据
      let queryParams = {
        "stationCode": this.selectRow.stationCode,
        "tkDate": this.selectRow.tkDate,
        "forecastDate": this.selectRow.forecastDate,
      }

      this.$axios.get('/dqRegulationController/getDqRegulationDetail', {params: queryParams}).then(response => {
        this.detailData = response.data.detailList
        this.chartOption.series[0].data = response.data.ysLineList
        this.chartOption.series[1].data = response.data.tkLineList
        this.chartOption.series[2].data = response.data.sbLineList
        this.chartOption.yAxis[0].max = response.data.electricField.capacity
        if (!this.chart) {
          this.chart = echarts.init(document.getElementById('tkcharts'), 'dark')
        }

        this.chart.setOption(this.chartOption)
      }).catch(() => {
      });
    },
    // 下拉框选择事件
    handleSelect(value) {
      const arr1 = this.options.filter((item) => {
        return item !== '所有场站'
      })
      const selectArr = value.filter((item) => {
        return item !== '所有场站'
      })
      const checkedCount = selectArr.length
      this.isCheckAll = checkedCount === arr1.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < arr1.length
      if (this.isCheckAll) {
        this.biddingStage.unshift('所有场站')
      } else {
        this.biddingStage = this.biddingStage.filter((item) => {
          return item !== '所有场站'
        })
      }
    },
    // 全选事件
    handleCheckAllChange(val) {
      const data = this.options.map(item => {
        return item.value
      })
      if (val) {
        this.biddingStage = data
        this.biddingStage.unshift('所有场站')
      } else {
        this.biddingStage = []
      }
      this.isIndeterminate = false;
    },

    jumpCamera(row) {
      this.detailOpen = true
      const _this = this
      this.$nextTick(() => {
        _this.selectRow = row
        _this.initChart()
      })
    },
    beforeQuery() {
      if (this.biddingStage.length == 0) {
        this.$message.warning("请选择场站进行查询！")
        return
      }
      // 判断日期间隔最多不能超出30天
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1])

      if (endTime - startTime > 60 * 60 * 24 * 1000 * 29) {
        this.$message.warning("最多只能查询30天的数据！")
        return
      }
      this.dataQuery()
    },
    nameFormat({cellValue, row, column}) {
      const item = this.nameList.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    stationCodeFormat({cellValue, row, column}) {
      const item = this.options.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage
      this.pageSize = pageSize
    },
    dataQuery() {
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1])
      if (startTime > endTime) {
        this.$message.error("开始时间不能大于结束时间")
        return
      }

      this.loading = true
      let queryParams = {
        "stationCode": this.biddingStage.join(','),
        "startTime": startTime,
        "endTime": endTime,
      }

      this.$axios.get('/dqRegulationController/getDqRegulationRecordList', {params: queryParams}).then(response => {
        this.tableData = response.data
        this.total = response.data.length
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    async getStationCode() {
      await this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
        this.options = response.data
        if (this.options.length > 0) {
          for (let i = 0; i < this.options.length; i++) {
            this.biddingStage.push(this.options[i].value)
          }
          this.biddingStage.unshift('所有场站')
          this.isCheckAll = true
          this.dataQuery()
        }
      })
    },
  }
}
</script>

<style scoped>
/deep/ .select-dropdown-checkbox .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
  display: none;
}

/deep/ .select-dropdown-checkbox .el-checkbox {
  color: #cddef1 !important;
}

/deep/ .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  background-color: transparent !important;
}

/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #cddef1 !important;
}


.divTable {
  position: relative;
  top: 30px; /* 向下移动15px */
  width: 30px;
  text-align: center
}

.divDescribe {
  position: relative;
  top: 20px; /* 向下移动15px */
  width: 100%;
  text-align: center
}

.width-100 {
  width: 100%;
}
</style>
