<!-- @Name: ts-vue-bar-style-1
     @Description: 柱状图
     @Creation Time: 2021/08/27 15:08
     @Author: daya -->
<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 } 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-bar-style-1',
  components: {
  },
  mixins: [chartMinxin],
  props: {
  },
  data () {
    return {
      // chart: null,
      optStyle: optStyle,
      colorStyle: colorStyle,
      seriesStyle: seriesStyle,
      chartConfig: chartConfig,
      // 图表类型
      type: 'bar'
    }
  },
  watch: {
  },
  computed: {
  },
  filters: {
  },
  // 创建前
  beforeCreate () {
  },
  // 已创建
  async created () {},
  // mount之前
  beforeMount: function () {
  },
  // mounted
  async mounted () {
  },
  // 更新前
  beforeUpdate: function () {
  },
  // 更新完成
  updated: function () {
  },
  // 销毁前
  beforeDestroy () {
  },
  // 已销毁
  destroyed () {
  },
  methods: {
    // 渲染图表
    async renderCharts () {
      let self = await this.setThat()
      if (self.chart) {
        // TODO:因为clear之后单个的堆叠样式有问题 by daya:20211114 02:48
        if (!self.option.aria || !self.option.aria.decal || !self.option.aria.decal.show) {
          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)
      let xAxis = await common.deepCopy(self.option.xAxis)
      if ((Array.isArray(yAxis) &&
        yAxis[0].type === 'value') ||
        yAxis.type === 'value') {
        // 纵向
        if (Array.isArray(xAxis)) {
          self.option.xAxis[0].data = self.data.axisList ? await common.deepCopy(self.data.axisList) || [] : []
        } else {
          self.option.xAxis.data = self.data.axisList ? await common.deepCopy(self.data.axisList) || [] : []
        }
        // console.log('纵向1', self.seriesName)
      } else {
        // 横向
        if (Array.isArray(yAxis)) {
          self.option.yAxis[0].data = self.data.axisList ? await common.deepCopy(self.data.axisList) || [] : []
        } 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])
        }
        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) {
          self.option = await common.deepCopy(self.optConfig.option)
        }
        if (self.commonConfig.console) {
          console.log('当前渲染的option', self.option)
          console.log('当前渲染的option', JSON.stringify(self.option))
        }
        this.chart.setOption(self.option)
      }
      self.setCustomConfig()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
