import { onMounted, ref, type ShallowRef, watch } from 'vue';
import type { ECOption } from '@/utils/echarts';
import { chart } from '@/utils/echarts';
import { pieOption } from './data/pie';

type dataOption = Partial<ECOption['data']>;

/**
 * 饼图的 option
 */
function useSetPieChart(
  dom: Readonly<ShallowRef<HTMLSpanElement | null>>,
  series: any,
  opts: optsType = {}
): void {
  // 图表实例
  let chartInstance: any;

  onMounted(() => {
    // 检测边界范围 dom 和 series 是否存在
    if (!dom.value && !series) return;

    // 在 dom 挂载之后，显示饼图
    chartInstance = chart.init(dom.value);
    pieOption.series = JSON.parse(JSON.stringify(series.value));

    // 设置图表选项
    chartInstance.setOption(pieOption, opts);
  });

  // 如果 data 变动，重新生成图表w
  watch(series, (value) => {
    chartInstance.setOption(value, opts);
  });
}

export { useSetPieChart };