<template>
  <div>
    <div
      id="main"
      style="width: 100%"
      :style="{ height: chartHeight + 'px' }"
    ></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { tableHeight } from '@/utils/index'
import resize from '@/utils/chartMixins/resize'
export default {
  name: 'deviceOeeLine',
  mixins: [resize],
  props: {
    chartMsg: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      chartDom: '',
      chart: '',
      chartHeight: tableHeight(214) / 2 - 35
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getChart()
    })
    window.addEventListener('resize', () => {
      this.chartHeight = tableHeight(214) / 2 - 35
    })
  },
  watch: {
    chartMsg: function () {
      this.getChart()
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getChart() {
      if (
        this.chart !== null &&
        this.chart !== '' &&
        this.chart !== undefined
      ) {
        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
      }
      this.chartDom = document.getElementById('main')
      this.chart = echarts.init(this.chartDom)
      let dateList = []
      let activationList = []
      let performanceList = []
      let failurePercentList = []
      let combinedEfficiencyList = []
      for (let i = 0; i < this.chartMsg.length; i++) {
        dateList.push(new Date(this.chartMsg[i].date).getDate())
        activationList.push(this.chartMsg[i].activation)
        performanceList.push(this.chartMsg[i].performance)
        failurePercentList.push(this.chartMsg[i].failurePercent)
        combinedEfficiencyList.push(this.chartMsg[i].combinedEfficiency)
      }
      var option = {
        color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['时间开动率', '性能开动率', '设备故障率', '综合效率'],
          left: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dateList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '时间开动率',
            type: 'line',
            stack: 'Total',
            data: activationList
          },
          {
            name: '性能开动率',
            type: 'line',
            stack: 'Total',
            data: performanceList
          },
          {
            name: '设备故障率',
            type: 'line',
            stack: 'Total',
            data: failurePercentList
          },
          {
            name: '综合效率',
            type: 'line',
            stack: 'Total',
            data: combinedEfficiencyList
          }
        ]
      }

      option && this.chart.setOption(option)
    }
  }
}
</script>
