<template>
  <div>
    <NotMsg v-show="notMsg"/>
    <div id="energeMonitoringChart" class="energe-monitoring-chart" style="width:575px;height:420px;" v-show='!notMsg'></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default {
  name: 'EnergeMonitoringChart',
  mixins: [resize],
  components:{ NotMsg },
  data() {
    return {
      chart: null,
      notMsg:true
    }
  },
  computed: {
    energyMonitoring() {
      return this.$store.state.websocket.energyMonitoring
    }
  },
  watch:{
    energyMonitoring: {
			handler(newVal, oldVal) {
        if (newVal === oldVal) {
          return false
        }
        this.updateChart()
        this.$emit('emitFun')
			}
		}
  },
  mounted() {
		this.$el.addEventListener('resize', () => {
			console.log('resziing.....');
		});
		this.updateChart()
	},
  methods: {
    updateChart() {
      if (
        this.chart !== null &&
        this.chart !== '' &&
        this.chart !== undefined
      ) {
        this.chart.dispose()
      }
      this.chart = echarts.init(document.getElementById('energeMonitoringChart'));
      let xData = []
      let yData = []
      this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => {
        xData.push(item.lineName)
        yData.push(item.useQuantity)
      })
      if (yData.length === 0) {
         this.notMsg = true
         return
      } else {
        this.notMsg = false
      }
      var option = {
        // color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
        grid: { top: 82, right: 12, bottom: 20, left: 90 },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          className: "energe-monitoring-chart-tooltip"
        },
        legend: {
          itemWidth:10,
          itemHeight:10,
          top: '2.5%',
					right: '0',
          data: [{name:'电耗能',itemStyle:{color:'#364BFE'}}],
          textStyle: {
            color: "#DFF1FE",
            fontSize: 12,
          }
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              color: "#fff",
              fontSize: 12,
            },
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                width: 1,
                color: "#213259",
              },
            }
          }
        ],
        yAxis: [
          {
            name: '单位kwh',
            nameTextStyle: {
              color: '#fff',
              fontSize: 10,
              align: 'right',
            },
            type: 'value',
            axisLabel: {
              color: "#fff",
              fontSize: 12,
              formatter: '{value}'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#213259",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#213259a0",
              },
            }
          }
        ],
        series: [
          {
            name: '电耗能',
            type: 'bar',
            barWidth: 20,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#5CB7FF' },
                { offset: 1, color: '#364BFE' }
              ])
            },
            data: yData
          }
        ]
      }
      option && this.chart.setOption(option)
    }
  }
}
</script>
<style scoped lang="scss">
.energe-monitoring-chart {
	width: 100%;
	height: 100%;
  top: -50px;
}
</style>
<style>
  .energe-monitoring-chart-tooltip {
    background: #0a2b4f77 !important;
    border: none !important;
    backdrop-filter: blur(12px);
  }
  .energe-monitoring-chart-tooltip * {
    color: #fff !important;
  }
</style>