<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";
import * as echarts from "echarts/core";

const { isDark } = useDark();

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

const radarChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(
  radarChartRef as Ref<HTMLDivElement>,
  {
    theme
  }
);
const dataMax = ref([
  { name: "类型A", max: 15 },
  { name: "类型B", max: 15 },
  { name: "类型C", max: 15 },
  { name: "类型D", max: 15 },
  { name: "类型E", max: 15 }
]);
setOptions(
  {
    title: {
      text: "缺陷类型",
      left: "left",
      textStyle: {
        fontSize: 14,
        color: "#333"
      }
    },
    tooltip: {
      trigger: "item"
    },
    radar: {
      center: ["50%", "50%"], //调位置  第一个左右   第二个上下
      radius: 70, //调大小
      //   雷达图的指示器，用来指定雷达图中的多个变量（维度）
      indicator: dataMax.value,
      shape: "polygon", //对雷达图形设置成一个圆形,可选 circle:圆形,polygon:多角形(默认)
      splitArea: {
        areaStyle: {
          // 图表背景网格区域的颜色
          color: ["#f2f6ff"]
        }
      },
      axisLine: {
        show: false
      }
    },
    series: [
      {
        type: "radar",
        label: {
          show: false //显示数值
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "rgba(255, 255,255, 1)"
              },
              {
                offset: 1,
                color: "rgba(255, 84,3, 1)"
              }
            ],
            false
          )
        },
        // areaStyle: {}, //每个雷达图形成一个阴影的面积
        itemStyle: {
          //折线拐点标志的样式
          color: "#FF7B3D"
        },
        lineStyle: {
          //线条样式
          color: "#FF7B3D"
        },
        symbolSize: 4, //圆点大小
        symbol: "circle", //圆点样式
        data: [
          {
            name: "类型A",
            value: [5, 6, 7, 8, 9]
          },
          {
            name: "类型B",
            value: [9, 8, 7, 6, 5]
          }
        ]
      }
    ]
  },
  {
    name: "click",
    callback: params => {
      console.log("click", params);
    }
  }
);

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

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