<template>
  <div
    id="wasteWaterLine"
    style="width: 100%"
    :style="{ height: chartHeight + 'px' }"
  ></div>
</template>
<script>
import * as echarts from 'echarts'
import resize from '@/utils/chartMixins/resize'
export default {
  name: "LineChart",
  mixins: [resize],
  data() {
    return {
      chartDom: '',
      chart: '',
      chartHeight: this.tableHeight(420)
    }
  },
  props: {
    chartData: {
      type: Object,
      required: true,
      default: () => {
        return {}
      }
    },
    timeDim: {
      type: String,
      default: ''
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.chartHeight = this.tableHeight(420)
    })
    this.getChart()
  },
  watch: {
    chartData: function () {
      this.getChart()
    }
  },
  methods: {
    getChart() {
      if (
        this.chart !== null &&
        this.chart !== '' &&
        this.chart !== undefined
      ) {
        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
      }
      this.chartDom = document.getElementById('wasteWaterLine');
      this.chart = echarts.init(this.chartDom);
      if (Object.keys(this.chartData).length === 0) {
        return false
      }
      let legendData = []
      let xData = []
      let seriesData = []
      for (let item in this.chartData) {
        legendData.push(item)
        let obj = {}
        let data = []
        for (let subItem in this.chartData[item]) {
          data.push(this.chartData[item][subItem].checkValue)
        }
        obj.name = item
        obj.type = 'line'
        obj.stack = 'Total'
        obj.symbol = 'none'
        obj.data = data
        seriesData.push(obj)
      }
      for (let i = 0; i < this.chartData[legendData[0]].length; i++) {
        let time = ""
        if (this.timeDim === '3') {
          let year = this.chartData[legendData[0]][i].axisTime.slice(0,4)
          let weak = this.chartData[legendData[0]][i].axisTime.slice(6,8)
          time = year+' 第 '+weak+' 周'
        } else {
          time = this.chartData[legendData[0]][i].axisTime
        }
        xData.push(time)
      }
      var option = {
        color: ['#63BDFF', '#7164FF', '#FF6860', '#FF9747', '#B0EB42', '#D680FF', '#0043D2'],
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              return (
                params[0].axisValue +
                `<br>` +
                params
                  .map((item) => {
                    let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`;
                    let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`;
                    let value = item.value ? item.value : '-';
                    let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`;
                    return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                    <span>${str}${seriesNameStr}</span>
                    <span>${valueStr}</span>
                  </span>`;
                  })
                  .join(``)
              );
            }
          },
          legend: {
            data: legendData,
            right: '2%',
            icon: 'rect',
            itemHeight: 8,
            itemWidth: 8,
            textStyle: {
              color: 'auto'
            }
          },
          grid: {
            left: '3%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData,
            axisLabel: {
              rotate: "45"
            }
          },
          yAxis: {
            type: 'value'
          },
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: 'rgba(11, 88, 255, 1)'
            }
          },
          series: seriesData
        };

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