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(() => {
    console.log(`1233313123`,dom.value, series.value);

    // 检测边界范围 dom 和 series 是否存在
    if (!dom.value || !series.value) return;

    // 在 dom 挂载之后，显示饼图
    // 在 dom 挂载之后，显示饼图
    if (!chartInstance) {
      chartInstance = chart.init(dom.value);
    }
    // chartInstance = chartInstance ? chartInstance : chart.init(dom.value);
    pieOption.series = JSON.parse(JSON.stringify(series.value));
    // 设置图表选项
    chartInstance.setOption(pieOption, opts);
  });

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

    // 合并新的 series 数据到现有配置中
    chartInstance.setOption(
      {
        ...currentOptions,
        series: JSON.parse(JSON.stringify(value)) // 确保深拷贝防止引用污染
      },
      opts
    );
  });
}

export { useSetPieChart };
