<script setup lang="ts">
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const pieChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
  theme
});

setOptions(
  {
    // title: {
    //   text: "算力占用",
    //   left: "left",
    //   textStyle: {
    //     fontSize: 14,
    //     color: "#333"
    //   }
    // },
    tooltip: {
      trigger: "item",
      formatter: function (params) {
        // 图例值格式化
        return `${params.value}%`;
      }
    },
    // legend: {
    //   // icon: "rect",
    //   // // orient: "vertical",
    //   // align: "auto",
    //   // bottom: "0",
    //   // // top: "40%",
    //   // // right: "15%",
    //   // // itemGap: 18,
    //   // textStyle: {
    //   //   fontSize: 12,
    //   //   color: "#333"
    //   // }
    //   // right: true
    // },
    series: [
      {
        type: "pie",
        radius: ["30%", "50%"], // 设置内半径和外半径，达到高低不一样的效果
        color: ["#1D39EF", "#F58702"],
        // depth: 30,
        labelLine: {
          // type: "dashed",
          length: 20, // 设置引导线长度
          length2: 30 // 设置引导线第二段长度
        },

        label: {
          // formatter: "{b} {c}", // 设置标签显示内容
          lineHeight: 20, // 设置标签行高
          // backgroundColor: ["#1D39EF", "#F58702"],

          align: "center",
          verticalAlign: "middle",
          formatter: function (params) {
            // 自定义 formatter 函数
            const { name, percent } = params;
            if (name === "未占用") {
              // 设置 Apple 标签的背景色为红色
              return `{red|${name}: ${percent}%}`;
            } else {
              // 设置其他标签的背景色为蓝色
              return `{blue|${name}: ${percent}%}`;
            }
          },
          rich: {
            red: {
              backgroundColor: "#1D39EF",
              // width: 79,
              height: 24,
              padding: [5, 8], // 调整背景边界大小
              borderRadius: 4, // 调整背景圆角大小
              color: "#fff"
            },
            blue: {
              backgroundColor: "#F58702",
              // width: 79,
              height: 24,
              padding: [5, 8], // 调整背景边界大小
              borderRadius: 4, // 调整背景圆角大小
              color: "#fff"
            }
          }
        },
        data: [
          { value: 22, name: "未占用" },
          { value: 78, name: "已占用" }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  },
  {
    name: "click",
    callback: params => {
      console.log("click", params);
    }
  },
  // 点击空白处
  {
    type: "zrender",
    name: "click",
    callback: params => {
      console.log("点击空白处", params);
    }
  }
);

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="pieChartRef" style="width: 100%" />
</template>
