<template>
  <Charts
    :width="width"
    :height="height"
    :echarts-options="echartsOption"
    :loading="loading"
  ></Charts>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";
import Charts from "../../../Charts.vue";
import { componentProps } from "./props";
import { useChartOptions } from "../../../hooks/useChartOptions";
import { type EChartsOption } from "echarts";
import { 
  get3dSeries,
  getCircleSeries,
  getTriangleSeries,
  get3dTriangleSeries,
} from './data';

export default defineComponent({
  name: "DSpecialBar",
  components: { Charts },
  props: componentProps,
  setup(props) {
    const { options, loading } = useChartOptions(props);

    const echartsOption = computed(() => {
      const opt = {
        ...options.value,
        series: Array.isArray(options.value?.series) 
        ? options.value?.series.map((item, index) => {
          // 获取不同形状的柱体
          switch(props.seriesExtend?.shape) {
            case "3d": return get3dSeries(item, index, options.value.color);
            case "circle": return getCircleSeries(item, index, options.value.color);
            case "triangle": return getTriangleSeries(item, index, options.value.color);
            case "3dTriangle": return get3dTriangleSeries(item, index, options.value.color);
            default: get3dSeries(item, index, options.value.color);;
          }
        })
        : options.value?.series
      } as EChartsOption;

      console.log('special bar option:', opt);
      return opt;
    })

    return {
      echartsOption,
      loading,
    };
  },
});
</script>

<style scoped></style>
