<template>
  <div :ref="chartRef"></div>
</template>

<script>
// 图表逻辑公共处理部分js引入和使用
import {chartMinxin} from '../../../chart-mixin'
// eslint-disable-next-line no-unused-vars
import * as echarts from 'echarts'
// eslint-disable-next-line no-unused-vars
import {optStyle, colorStyle, seriesStyle, chartConfig, lineOption} from './index'
// eslint-disable-next-line no-unused-vars
import {setDataZoom} from '../../../charts'
// eslint-disable-next-line no-unused-vars
import common from '../../../common'
export default {
  name: 'ts-vue-pie-style-1',
  components: {
  },
  mixins: [chartMinxin],
  props: {
  },
  data () {
    return {
      // optStyle: optStyle,
      // colorStyle: colorStyle,
      // seriesStyle: seriesStyle,
      // chartConfig: chartConfig,
      // 图表类型
      type: 'pie'
    }
  },
  computed: {},
  watch: {},
  filters: {},
  // 创建前
  beforeCreate () {
  },
  // 已创建
  async created () {
    // console.log('执行顺序2')
  },
  // mounted
  async mounted () {
  },
  // 更新前
  beforeUpdate () {},
  // 更新完成
  updated () {},
  // 销毁前
  async beforeDestroy () {
    let self = await this.setThat()
    // 注销监听事件listenResizeFn
    common.removeResizeEvent(self.fnResize)
    self.chart.dispose()
  },
  // 已销毁
  destroyed () {},
  methods: {
    // 渲染图表
    async renderCharts () {
      let self = await this.setThat()
      if (self.chart) {
        self.chart.clear()
      }
      // 将图表类型的手字母转换为大写
      let styleName = await common.letterFrist2UpperCase(self.styleName)
      self.option = await common.deepCopy(optStyle['option' + styleName])
      // // 区分横轴
      // let yAxis = await common.deepCopy(self.option.yAxis)
      // if ((Array.isArray(yAxis) &&
      //   yAxis[0].type === 'value') ||
      //   yAxis.type === 'value') {
      //   // 纵向
      //   self.option.xAxis.data = self.data.axisList ? await common.deepCopy(self.data.axisList) || [] : []
      //   // console.log('纵向1')
      // } else {
      //   // 横向
      //   self.option.yAxis.data = self.data.axisList ? await common.deepCopy(self.data.axisList) || [] : []
      //   // console.log('横向')
      // }
      let dataList = self.data.dataList ? await common.deepCopy(self.data.dataList) || [] : []
      if (dataList.length) {
        let seriesList = []
        let seriesData = {}
        // 如果seriesName存在这拿seriesName，不存在则拿styleName预设样式
        if (self.seriesName) {
          let seriesName = await common.letterFrist2UpperCase(self.seriesName)
          seriesData = await common.deepCopy(seriesStyle['series' + seriesName])
        } else {
          seriesData = await common.deepCopy(optStyle['option' + styleName].series[0])
        }
        if (self.type === 'pie') {
          // 饼图
          self.option.series.forEach((series, index) => {
            series.data = this.data.dataList.map((item, dataIndex) => ({
              ...series.data[dataIndex],
              name: item.name,
              value: item.data || item.ratio || item.value || 0
            }))
            if (self.option.legend && self.option.legend.type === 'scroll') {
              series.data.forEach(seriesDataItem => {
                self.option.legend.data.push(seriesDataItem.name)
              })
            }
          })
        } else {
          // 柱状图和折线图
          self.data.dataList.forEach((item, index) => {
            let seriesItem = {
              ...seriesData,
              name: item.name,
              data: item.data || item.ratio || item.value || [],
              ratio: item.ratio || item.value || []
            }
            seriesList.push(seriesItem)
          })
          self.option.series = seriesList
        }
        // 修改颜色
        if (self.colorName) {
          let colorName = await common.letterFrist2UpperCase(self.colorName)
          self.option.color = await common.deepCopy(colorStyle['color' + colorName])
        }
        // if (self.data.axisList.length) {
        //   setDataZoom(self.option, self.data.axisList.length, self.dataZoomLen)
        // }
        // 如果存在修改配置，则先修改配置 （根据预设样式的）
        if (self.commonConfig.open) {
          self.option = await common.changeChartOpt(self.option, self.commonConfig, self.data, chartConfig)
        }
        // 如果是外部配置的图表option,这深拷贝赋值给option，无需结合任何配置
        if (self.optConfig.open) {
          /* debugger */
          self.option = await common.deepCopy(self.optConfig.option)
        }
        // 如果需要打印option
        if (self.commonConfig.console) {
          console.log('当前渲染的option', JSON.stringify(self.option))
        }
        // console.log('self.option', JSON.stringify(self.option))
        self.chart.setOption(self.option)
        // 如果自定义的配置生效，则option原本没有存在这个属性没有就赋值,有就替换这个值
        await self.setCustomConfig()
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
