<template>
  <div class="w-[143px] h-[143px]">
    <div class="w-full h-inherit bg-transparent" ref="chartRef"></div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from "vue";
  import * as echarts from "echarts";

  // 图表容器引用
  const chartRef = ref<HTMLElement | null>(null);
  let chartInstance: echarts.ECharts | null = null;

  // 接收数据作为prop
  const props = defineProps({
    chartData: {
      type: Array,
      required: true,
      default: () => [],
    },
    width: {
      type: Number,
      default: 143,
    },
    height: {
      type: Number,
      default: 143,
    },
  });

  const generatedFormattedData = () => {
    const formattedData = props.chartData.map((item: any) => ({
      ...item,
      // 确保每个项都有itemStyle且包含color
      itemStyle: {
        color: item.color || (item.itemStyle && item.itemStyle.color),
        borderWidth: 0, // 移除边框以消除间隔
      },
    }));

    return formattedData;
  };

  // 初始化图表
  const initChart = () => {
    if (chartRef.value) {
      // 销毁之前的实例
      if (chartInstance) {
        chartInstance.dispose();
      }

      // 创建新实例
      chartInstance = echarts.init(chartRef.value);

      // 配置颜色从数据中获取

      // 配置项
      const option = {
        grid:{
          width:'auto',
          height:'auto'
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0, 0, 0, 0.7)",
          borderColor: "#44F1FF",
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
          formatter: "{b}: {d}%",
          position: ['25%', '40%']
        },
        series: [
          {
            name: "数据占比",
            type: "pie",
            radius: ["70%", "90%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderWidth: 0, // 移除扇区边框
            },
            label: {
              show: false,
            },
            emphasis: {
              scale: false,
              itemStyle: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            labelLine: {
              show: false,
            },
            data: generatedFormattedData(),
            // 移除间隙
            gap: 0,
          },
        ],
        graphic: [
          {
            id: "circle-rotate",
            elements: [
              {
                type: "image",
                left: "center",
                top: "center",
                style: {
                  image: "/images/rotate-circle.webp",
                  width: props.width,
                  height: props.height,
                  fill: "transparent",
                },
                z: 2,
                cursor: "point",
              },
            ],
          },
        ],
        animation: true,
        animationDuration: 500,
      };      
      // 设置配置项
      chartInstance.setOption(option);

      // 监听窗口大小变化
      window.addEventListener("resize", handleResize);
    }
  };

  // 处理窗口大小变化
  const handleResize = () => {
    if (chartInstance) {
      chartInstance.resize();
    }
  };

  // 生命周期钩子
  onMounted(() => {
    initChart();
  });

  watch(
    () => props.chartData,
    () => {
      if (chartInstance) {
        chartInstance.setOption({
          series: [
            {
              data: generatedFormattedData(),
            },
          ],
        });
      }
    },
    { deep: true },
  );

  watch(
    () => props.width,
    (newWidth) => {      
      if (chartInstance) {
        chartInstance.setOption({
          graphic: [
            {
              id: "circle-rotate",
              elements: [
                {
                  type: "image",
                  left: "center",
                  top: "center",
                  style: {
                    image: "/images/rotate-circle.webp",
                    width: newWidth,
                    height: props.height,
                    fill: "transparent",
                  },
                  z: 2,
                  cursor: "point",
                },
              ],
            },
          ],
        });
      }
    },
  );

  onUnmounted(() => {
    // 移除事件监听
    window.removeEventListener("resize", handleResize);

    // 销毁图表
    if (chartInstance) {
      chartInstance.dispose();
      chartInstance = null;
    }
  });
</script>

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