<template>
  <div>
    <div class="bSelectDiv">
      <el-select v-model="efiType" placeholder="请选择类型" @change="getCompositeData">
        <el-option
          v-for="item in efiTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>

  <div>
    <div id="charts"/>
  </div>
  </div>
</template>

<script>
import cc from '../curvecolors'

export default {
  name: 'Rightbotton',
  data() {
    return {
      efiType:'E1',
      efiTypeList: [{value: 'E1', label: '光伏'}, {value: 'E2', label: '风电'}],
      timer: '',
      time: [],
      chart: null,
      option:{
        title: {
          text: '实际功率与预测功率曲线对比',
          textStyle: {
            color: '#aacbff',
            fontSize: 16
          },
          top: 10,
          left: 10
        },
        grid: {
          top: '17%',
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        color: [],
        legend: {
          data: [],
          top: 25,
          textStyle: {
            color: '#79acff'
          }
        },
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },

        dataZoom: [{
          startValue: '00:00',
          endValue: '23:45'
        }, {
          type: 'inside'
        }],
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#666b8f',
              width: 4// 这里是为了突出显示加上的
            }
          },
          data: []
        },
        yAxis: [{
          type: 'value',
          name: '功率',
          min: 0,
          max: [],
          // interval: 5,
          axisLabel: {
            formatter: '{value} MW'
          },
          axisLine: {
            lineStyle: {
              color: '#666b8f',
              width: 4// 这里是为了突出显示加上的
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#315070'],
              width: 2,
              type: 'dotted'
            }
          }
        },
          {
            type: 'value',
            name: '风速',
            show: false,
            min: 0,
            axisLabel: {
              formatter: '{value} m/s'
            },
            axisLine: {
              lineStyle: {
                color: '#666b8f',
                width: 4// 这里是为了突出显示加上的
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#315070'],
                width: 2,
                type: 'dotted'
              }
            }
          }],
        series: [{
          name: '超短期预测功率',
          type: 'line',
          stack: '',
          smooth: false,
          symbol: 'none', // 这句就是去掉点的
          data: []
        },
          {
            name: '短期预测功率',
            type: 'line',
            stack: '',
            smooth: false,
            symbol: 'none', // 这句就是去掉点的
            data: []
          },
          {
            name: '实际功率',
            type: 'line',
            stack: '',
            smooth: false,
            symbol: 'none', // 这句就是去掉点的
            data: []

          }]
      }
    }
  },
  beforeDestroy(){
    // console.log('曲线准备销毁')
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  destroyed() {
    clearInterval(this.timer)

  },
  mounted() {
    this.init()

  },
  methods: {
    init() {
      this.getEl()
      this.getCompositeData()
      /*获取charts对象*/
      this.chart = this.$echarts.init(document.getElementById('charts'))
      var _self = this
      this.timer = setInterval(function (){
        _self.getCompositeData()
      }, 1000 * 60)
    },
    getEl() {
        this.$axios.get('/electricField/').then(res => {
          this.option.yAxis[0].max = res.data.capacity
        }).catch(error=>{
          this.$message.error("获取开机容量异常："+error)
        })
    },
    getCompositeData() {
        this.$axios.get('/dashboard/getCompositeData/'+ this.efiType).then(res => {

          this.option.legend.data = ['超短期预测功率', '短期预测功率', '实际功率']
          this.option.color = [cc.cdq, cc.dq, cc.sj]
          this.option.xAxis.data = res.data.timeList
          this.option.series[0].data = res.data.cdqList
          this.option.series[1].data = res.data.dqList
          this.option.series[2].data = res.data.sjList

          this.$nextTick(function () {
            this.drawcharts()
          })
        }).catch(error=>{
          this.$message.error("获取预测曲线异常："+error)
        })
    },
    drawcharts() {
      this.chart.setOption(this.option,true)
      window.addEventListener('resize', () => {
        if (this.chart) {
          this.chart.resize()
        }
      })
      // window.onresize = varchart.resize// 图表自适应浏览器大小
    }
  }
}
</script>

<style scoped>
#charts {
  width: 100%;
  height: calc(70vh);
}

.bSelectDiv /deep/ .el-select .el-input__inner {
  background: transparent;
  color: white;
  height: 32px;
}
.bSelectDiv /deep/ .el-select .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 90px;
}
.bSelectDiv /deep/ .el-select .el-input__icon {
  height: 100%;
  width: 25px;
  text-align: center;
  -webkit-transition: all .3s;
  transition: all .3s;
  line-height: 28px;
}

/deep/ .el-select-dropdown {
  background: #061f3e;
}

.bSelectDiv /deep/ .el-select {
  display: inline-block;
  position: relative;
  top: 8px;
  left: 15px;
  width: 90px;
}

</style>
