<template>
  <div class="energe-monitoring-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
export default {
  name: 'EnergeMonitoringChart',
  mixins: [resize],
  data() {
    return {
      chart: null
    }
  },
  computed: {
    energyMonitoring() {
      return this.$store.state.websocket.energyMonitoring
    }
  },
  watch:{
    energyMonitoring: {
			handler(newVal, oldVal) {
        if (newVal === oldVal) {
          return false
        }
        this.updateChart()
			}
		}
  },
  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(this.$el);
      let xData = []
      let yData = []
      this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => {
        xData.push(item.lineName)
        yData.push(item.useQuantity)
      })
      var option = option = {
        // color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
        grid: { top: 32, right: 12, bottom: 20, left: 60 },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          className: "energe-monitoring-chart-tooltip"
        },
        legend: {
          data: ['电耗能'],
          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: [
          {
            type: 'value',
            name: '单位',
            // min: 0,
            // max: 250,
            // interval: 50,
            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 + ' ml';
              }
            },
            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%;
}
</style>
<style>
  .energe-monitoring-chart-tooltip {
    background: #0a2b4f77 !important;
    border: none !important;
    backdrop-filter: blur(12px);
  }
  .energe-monitoring-chart-tooltip * {
    color: #fff !important;
  }
</style>