<template>
  <div>
    <div
      id="palletLevel"
      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: 'PalletLevelChart',
  mixins: [resize],
  props: {
    chartMsg: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chart: '',
      chartHeight: tableHeight(400) * 0.5
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getChart()
    })
    window.addEventListener('resize', () => {
      this.chartHeight = tableHeight(400) * 0.5
    })
  },
  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已经初始化了一个实例，这是销毁实例
      }
      var chartDom = document.getElementById('palletLevel')
      this.chart = echarts.init(chartDom)
      console.log(this.chartMsg)
      var lp = this.chartMsg.okNum
      var jg = this.chartMsg.reprocessNum
      var fp = this.chartMsg.wasteNum
      const color = [
        'rgba(91, 143, 249, 0.8500)',
        'rgba(90, 216, 166, 0.8500)',
        'rgba(246, 189, 22, 0.8500)'
      ]
      var option = {
        color: color,
        legend: {
          icon: 'circle',
          bottom: '0',
          left: 'center',
          itemWidth: 10,
          itemHeight: 10
        },
        series: {
          name: 'palletLeve',
          type: 'pie',
          radius: ['40%', '60%'],
          center: ['50%', '45%'],
          data: [
            {
              value: lp,
              name: '良品 ' + lp
            },
            {
              value: jg,
              name: '再加工品 ' + jg
            },
            {
              value: fp,
              name: '废品 ' + fp
            }
          ]
        }
      }
      option && this.chart.setOption(option)
    }
  }
}
</script>
