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

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

  export default {
    name: 'bottonCharts',
    data() {
      return {
        chart: null,
        timer: '',
        time: [],
        option:{
          title: {
            text: '实际功率与预测功率曲线对比',
            textStyle: {
              color: '#5f635b',
              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: '#5f635b',
                width: 2.5// 这里是为了突出显示加上的
              }
            },
            data: []
          },
          yAxis: {
            type: 'value',
            name: '功率',
            min: 0,
            max: [],
            // interval: 5,
            axisLabel: {
              formatter: '{value} MW'
            },
            axisLine: {
              lineStyle: {
                color: '#5f635b',
                width: 2.5// 这里是为了突出显示加上的
              }
            },
            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: []

            },
            {
              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() {
      // console.log('曲线渲染销毁')
      clearInterval(this.timer)
    },
    updated(){
      // console.log('曲线更新渲染结束')
    },
    beforeMount(){
      // console.log('曲线渲染准备中')
    },
    mounted() {
      // console.log('曲线渲染开始')
      this.init()
      // console.log('曲线渲染开始')
    },
    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.max = res.data.capacity
          }).catch(e=>{
            this.$message.error('获取场站信息异常'+e)
          })
      },
      getCompositeData() {
        this.$axios.get('/dashboard/getCompositeData').then(res => {
          if (res.data.displayKyLl === '1') {
            this.option.legend.data = ['超短期预测功率', '短期预测功率', '实际功率', '可用功率', '理论功率']
            this.option.color = [cc.cdq, cc.dq, cc.sj, cc.kygl, cc.llgl]
            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.option.series[3].data = res.data.kyList
            this.option.series[4].data = res.data.llList

          } else {
            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(e=>{
          console.error(e)
          this.$message.error('获取曲线数据异常'+e)
        })
      },
      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);
  }
</style>
