<script setup>
import * as echarts from 'echarts'

const props = defineProps({
  data: [],
})

const zsdzwqkRef = $ref()

const option = {
  tooltip: {
    // trigger: 'axis',
    // axisPointer: {
    //   type: 'shadow'
    // }
  },
  radar: {
    center: ['50%', '55%'],
    radius: '70%',
    splitNumber: 4,
    splitArea: {
      show: false,
    },
    axisLine: { // 设置雷达图中间射线的颜色
      lineStyle: {
        color: 'rgba(255,255,255,0.5)',
      },
    },
    splitLine: { // 网格颜色设置
      show: true,
      lineStyle: {
        width: 1,
        color: 'rgba(255,255,255,0.5)',
      },
    },
    name: { // 修改indicator文字的颜色
      textStyle: {
        color: '#fff',
        fontSize: 14,
      },
    },
    indicator: [
      { name: '知识点一', max: 1000, axisLabel: { show: true } },
      { name: '知识点二', max: 1000 },
      { name: '知识点三', max: 1000 },
      { name: '知识点四', max: 1000 },
      { name: '知识点五', max: 1000 },
    ],
  },
  series: [
    {
      type: 'radar',
      data: [
        {
          value: [400, 400, 900, 950, 800],
          symbol: 'none',
          lineStyle: {
            normal: {
              color: 'rgba(83,198,222,0.24)',
              width: 0,
              type: 'solid',
            },
          },
          areaStyle: {
            color: 'rgba(0,209,200,0.50)',
          },
        },
      ],
    },
  ],
}
let myChart = null

const allData = ref([])
function initData() {
  const arr1 = []
  const arr2 = []
  allData.value.map((item) => {
    const obj = {
      name: item.name,
      max: item.max,
    }
    if (item.show != undefined) {
      obj.axisLabel = {
        show: item.show,
      }
    }
    arr1.push(obj)
    arr2.push(item.value)
  })
  option.radar.indicator = [...arr1]
  option.series[0].data[0].value = [...arr2]
  nextTick(() => {
    init()
  })
}

function init() {
  myChart = echarts.init(zsdzwqkRef)
  option && myChart.setOption(option)
}

watch(
  () => props.data,
  (newVal, oldVal) => {
    if (newVal) {
      allData.value = newVal
      initData()
    }
  },
  { immediate: true },
)

window.addEventListener('resize', async () => {
  myChart?.resize()
})
</script>

<template>
  <div class="zsdzwqkDiv">
    <div ref="zsdzwqkRef" class="w-full h-full" />
  </div>
</template>
