<template>
  <div class="dv-bar-chart">
    <div class="bar-chart-container" ref="bar-chart" />
  </div>
</template>

<script>
import Charts from '@jiaminghi/charts';
import { deepMerge } from '@jiaminghi/charts/lib/util/index';
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util';
export default {
  name: 'DvBarChart',
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      defaultConfig: {},
      mergedConfig: null,
      chart: null,
    };
  },
  methods: {
    init() {
      const { initChart, mergeConfig, setBarOption } = this;
      initChart();
      mergeConfig();
      setBarOption();
    },
    initChart() {
      // 寻找 Echart 根节点
      const { $refs } = this;
      this.chart = new Charts($refs['bar-chart']);
    },
    mergeConfig() {
      // 将页面设置的配置和默认配置进行合并
      const { defaultConfig, config } = this;
      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {});
    },
    setBarOption() {
      const { getBarOption, chart } = this;
      // 获取 Echart 的配置列表
      const option = getBarOption();
      chart.setOption(option, true);
    },
    getBarOption() {
      // 根据配置动态组装配置数据
      // const { mergedConfig } = this;
      return {
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: {
          type: 'value',
          data:[],
          axisLabel: {
            textStyle: {
              color: '#333',
              fontSize: 12,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ddd',
              type: 'dashed',
            },
          },
          axis: {
            // 在这里设置 axis 的属性
            name: 'Y轴名称',
            nameTextStyle: {
              color: '#666',
              fontSize: 14,
            },
            // 更多 axis 相关的属性...
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
          },
        ],
      };
    },
  },
  mounted() {
    const { init } = this;
    // 组件初始化
    init();
  },
};
</script>

<style lang="scss" scoped>
.bar-chart-container {
  height: 100%;
}
</style>
