<!--
 * @Author: 
 * @Date: 2023-03-01 19:20:44
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-01-03 14:47:29
 * @Description: tel files
 * @filePath: 
-->
<script setup lang="ts">
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import { welcomePie } from "@/api/welcome"
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions,
  randomColor
} 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
})
const pieColorList = [];
function getList() {
  welcomePie()
    .then((data) => {
      if (data.status == '1') {
        data.data.forEach(() => {
          pieColorList.push(randomColor({ type: "hex" }))
        });
        setOptions(
          {
            tooltip: {
              trigger: "item"
            },
            legend: {
              icon: "circle",
              //@ts-expect-error
              right: true
            },
            series: [
              {
                name: "分类占比",
                type: "pie",
                top: "20%",
                radius: "80%",
                center: ["40%", "50%"],
                color: pieColorList,
                data: data.data
                // 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);
            }
          }
        );

      } else {
        console.log(data.message);
      };
    }).catch((err) => {
      console.log(err);
    })
};
getList();

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

<template>
  <div ref="pieChartRef" style="width: 100%; height: 35vh" />
</template>
