<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"
    },
    legend: {
      icon: "rect",
      // orient: "vertical",
      align: "auto",
      bottom: "0",
      // top: "40%",
      // right: "15%",
      // itemGap: 18,
      textStyle: {
        fontSize: 12,
        color: "#333"
      }
      // right: true
    },
    series: [
      {
        name: "算力占用",
        type: "pie",
        center: ["50%", "50%"],
        radius: ["30%", "55%"],
        color: ["#6217DE", "#FF4444"],
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 1
        },
        data: [
          { value: 1600, name: "已占用" },
          { value: 400, 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%; height: 35vh" />
</template>
