import * as echarts from 'echarts'
import deepMerge from './utils/deepMerge'
import { debounce } from 'lodash'
// tooltip 默认参数
import { defaultLToolbox, defaultTooltip, defaultLegend } from './defaultValue'

export const EChartMixin = {
  data() {
    return {
      // echarts 图表实例
      chart: null,
      // echarts 实例数据
      option: {}
    }
  },
  watch: {
    // 深度监听 echarts -> series: data 数据变化
    series: {
      handler(val) {
        this.$nextTick(() => {
          console.log('echarts-series: ', val)
          // 初始化加载 echarts 图表
          this.initChart()
        })
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    // 获取 echarts Dom 实例
    const chartDom = this.$refs.chartRef
    // 初始化 echarts 实例 (Canvas vs Svg -> https://echarts.apache.org/handbook/zh/best-practices/canvas-vs-svg)
    this.chart = echarts.init(chartDom, null, { renderer: 'svg' })
    // 监听 window 变化
    window.addEventListener('resize', debounce(this.resize, 300))
  },
  methods: {
    /**
     * 初始化图表
     * @author Matrix
     */
    initChart() {
      console.log('初始化 ECharts 图表')
      // 设置 toolbox 工具栏
      this.getToolboxMerge()
      // 设置 tooltip 提示框
      this.setTooltipMerge()
      // 设置 legend 图例组件
      this.setLegendMerge()
      // 设置 xAxis x轴组件
      this.setXAxisMerge()
      // 设置 yAxis y轴组件
      this.setYAxisMerge()
      // 设置 series 图表数据
      this.setSeriesData()
      // 绘制图表
      this.chart.setOption(this.option)
    },
    /**
     * 自适应
     * @author Matrix
     */
    resize() {
      this.chart.resize()
    },

    /**
     * 设置 tooltip
     * @author Matrix
     */
    getToolboxMerge() {
      if (this.toolbox.show === false) return
      this.option.toolbox = deepMerge(defaultLToolbox, this.toolbox)
    },

    /**
     * 设置 tooltip
     * @author Matrix
     */
    setTooltipMerge() {
      if (this.tooltip.show === false) return
      // 初始化的时候，折线图默认 axisPointer.type = 'line'
      defaultTooltip.axisPointer.type = this.type === 'line' ? 'line' : 'shadow'
      this.option.tooltip = deepMerge(defaultTooltip, this.tooltip)
    },

    /**
     * 设置 legend
     * @author Matrix
     */
    setLegendMerge() {
      if (this.tooltip.legend === false) return
      if (this.type !== 'pie') defaultLegend.data = this.series.map(item => item.name)
      this.option.legend = deepMerge(defaultLegend, this.legend)
    },

    /**
     * 设置 xAxis
     * @author Matrix
     */
    setXAxisMerge() {
      // ['pie'] 没有 xAxis
      if (this.type === 'pie') return
      const xAxis = {
        axisLabel: {
          textStyle: { color: 'rgba(255, 255, 255, .9)' }
        },
        axisLine: {
          lineStyle: { color: 'rgba(255, 255, 255, .9)' }
        }
      }
      this.option.xAxis = { ...xAxis, ...this.xAxis }
    },

    /**
     * 设置 yAxis
     * @author Matrix
     */
    setYAxisMerge() {
      // ['pie'] 没有 yAxis
      if (this.type === 'pie') return
      const yAxis = {
        axisLabel: {
          textStyle: { color: 'rgba(255, 255, 255, .9)' }
        },
        axisLine: {
          lineStyle: { color: 'rgba(255, 255, 255, .9)' }
        }
      }
      this.option.yAxis = { ...yAxis, ...this.yAxis }
    },

    /**
     * 设置 series
     * @author Matrix
     */
    setSeriesData() {
      this.option.series = this.series
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', debounce(this.resize, 300))
  }
}
