<!--
 * @Author: lb
 * @Date: 2022-01-21 14:43:06
 * @LastEditors: zhp
 * @LastEditTime: 2023-02-07 13:46:05
 * @Description: 简单折线图
-->
<template>
  <div ref="SimpleLineChart" :style="{ height: height ? height + 'px' : '100%', width: '100%' }" />
</template>

<script>
import echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'

const AxisLine = {
  lineStyle: {
    type: 'solid',
    color: '#123341',
    width: '1'
  }
}

const AxisLabel = {
  textStyle: {
    color: '#666a74'
  }
}

/**
 * 2022.8.23 TODO:
 * 1.一份数据三张表
 * 2.切换选项卡时只更新一张表的数据
 * 3.注释掉成品率条形图，改为将“投入、产出”拆分图，与“成品率”合计三张
 */

class ChartOption {
  constructor() {
    this.color = [
      '#3574a8',
      '#9f3476',
      '#30959d',
      '#5255be',
      '#8b4449',
      '#a29848',
      '#FF6600',
      '#FFFF00',
      '#91cc75',
      '#fac858',
      '#ee6666',
      '#73c0de',
      '#3ba272',
      '#fc8452',
      '#9a60b4',
      '#ea7ccc'
    ]
    this.tooltip = { trigger: 'axis' }
    this.grid = {
      left: '2%',
      right: '2%',
      bottom: '5%',
      height: '80%',
      containLabel: true
    }
    this.legend = {
      itemHeight: 10,
      itemWidth: 10,
      y: 'top',
      x: 'center',
      top: 0,
      // right: '1%',
      data: [
        /** dynamic */
      ],
      // right: '1%',
      textStyle: {
        fontSize: 12,
        color: '#ced1d5'
      }
    }
    this.xAxis = {
      type: 'category',
      boundaryGap: false,
      splitLine: { show: false },
      axisLine: AxisLine,
      axisLabel: { ...AxisLabel, rotate: 20 },
      data: [
        /** dynamic */
      ]
    }
    this.yAxis = {
      type: 'value',
      splitLine: { show: false },
      axisLine: AxisLine,
      axisLabel: AxisLabel
    }
    this.series = [
      /** dynmaic */
    ]
  }

  /**
   * @param {object} rawdata
   */
  setLegend(rawdata) {
    if (rawdata) {
      const data = Object.keys(rawdata)
      this.legend.data = data.map(item => ({ icon: 'roundRect', name: item }))
    }
  }

  /**
   * @param {object} rawdata
   */
  setCategory(rawdata) {
    if (rawdata) {
      if (Object.keys(rawdata).length > 0) {
        const first = rawdata[Object.keys(rawdata)[0]]
        this.xAxis.data = Object.keys(first)
      }
    }
  }

  /**
   * @param {object} rawdata
   */
  setData(rawdata) {
    if (rawdata) {
      this.series = []
      for (const key in rawdata) {
        this.series.push({
          name: key,
          type: 'line',
          data: Object.entries(rawdata[key]).map(([subkey, value]) => value)
        })
      }
    }
  }

  clearOptions() {
    this.legend.data.splice(0)
    this.xAxis.data.splice(0)
    this.series.splice(0)
  }
  // add more...
}

export default {
  name: 'SimpleLineChart',
  mixins: [resize],
  props: {
    beilv: {
      type: Number,
      default: 1
    },
    height: {
      type: Number,
      default: 1
    },
    legend: {
      type: Array,
      default: () => []
    },
    caty: {
      type: Array,
      default: () => []
    },
    dataList: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      chart: null,
      defaultOpts: new ChartOption()
    }
  },
  computed: {
    showLegend() {
      return this.legend.length > 0
    }
  },
  watch: {
    dataList: {
      handler: function(val) {
        this.updateChartOptions()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  },
  methods: {
    initChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.SimpleLineChart)
        this.updateChartOptions()
      }
    },

    updateChartOptions() {
      if (!this.chart) return
      this.defaultOpts.clearOptions()
      /** set */
      this.defaultOpts.setLegend(this.dataList)
      this.defaultOpts.setCategory(this.dataList)
      this.defaultOpts.setData(this.dataList)
      /** log */
      this.chart.setOption({ ...this.defaultOpts })
    }
  }
}
</script>

<style scoped>
.chart {
  margin-top: -3em;
}
</style>
