<script setup lang="ts">
import { ref, computed, nextTick, onMounted, watch } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";
const $props = defineProps({
  radarRefList: {
    type: Array,
    default: () => []
  }
});
onMounted(() => {
  if ($props) {
    initChart($props.radarRefList);
  }
});
watch(
  $props,
  newVal => {
    initChart(newVal.radarRefList);
  },
  { deep: true }
);
// 兼容dark主题
const { isDark } = useDark();
let theme = computed(() => {
  return isDark.value ? "dark" : "default";
});

// 初始化ECharts
const chartRef = ref();
const { setOptions } = useECharts(chartRef, { theme });
const rankName = ref([]);
const rankValue = ref([]);
// 根据配置项渲染ECharts
const initChart = async (item?: any) => {
  rankName.value = [];
  rankValue.value = [];
  const data = item || [];
  data.map(itx => {
    itx.dimensionList.map(it => {
      rankName.value.push({
        name: it.dimName
      });
      rankValue.value.push(it.soreRate);
    });
  });
  rankName.value.forEach(item => {
    if (item.name && item.name.length > 5) {
      item.name = item.name.slice(0, 5) + "..."; // 截取前5个字符并加上 "..."
    }
  });
  setOptions({
    tooltip: {},
    legend: {
      // icon: "arrow",
      itemWidth: 25,
      itemHeight: 4,
      data: ["得分率"],
      top: 10,
      left: "left"
    },
    radar: {
      radius: "65%", // 调整半径以使雷达图更大
      indicator: rankName.value.map((item, index) => ({
        name: item.name,
        max: 1 // 设置每个维度的最大值为 1，确保得分率的满分为 1
      })),
      axisName: {
        color: "black"
      }
    },
    series: [
      {
        name: "得分率",
        type: "radar",
        areaStyle: {
          normal: {
            color: "rgba(0, 128, 255, 0.2)" // 设置内部填充颜色和透明度
          }
        },
        lineStyle: {
          normal: {
            width: 1, // 设置线条宽度为 1
            color: "rgba(0, 128, 255, 1)" // 设置线条颜色
          }
        },
        data: [
          {
            value: rankValue.value
            // name: "支出"
          }
        ]
      }
    ]
  });
};
defineExpose({ initChart });
</script>

<template>
  <div ref="chartRef" class="w-80 h-64 m-auto mt-2" />
</template>
