<template>
  <view
    class="radar-chart-placeholder mx-[24rpx] bg-white chart-class h-[500rpx] flex items-center justify-center"
  >
    <view class="h-[415rpx] w-full z-1">
      <LEchart ref="echart"></LEchart>
    </view>
  </view>
</template>

<script lang="ts" setup>
import LEchart from '@/pages-evaluation-sub/uni_modules/lime-echart/components/l-echart/l-echart.vue'
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
const echart = ref(null)
const props = defineProps({
  picData: {
    type: Object,
    default: () => ({
      indicator: [],
      radars: [],
    }),
  },
})

// 处理标签名称的映射
const nameMap: Record<string, string> = {
  A: '艺术型(A)',
  R: '现实型(R)',
  I: '研究型(I)',
  S: '社会型(S)',
  E: '企业型(E)',
  C: '常规型(C)',
}

// 转换 indicator 数据
const formatIndicator = computed(() => {
  return props.picData.indicator.map((item) => ({
    name: nameMap[item.name] || item.name,
    max: item.max,
  }))
})

watch(
  () => props.picData,
  (newV) => {
    if (newV.radars.length > 0) {
      echart.value.init(echarts, (chart) => {
        let option = {
          legend: {
            show: false,
            data: ['Allocated Budget', 'Actual Spending'],
          },
          radar: {
            indicator: formatIndicator.value,
            splitArea: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#999',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#999',
              },
            },
          },
          series: [
            {
              name: '职业兴趣评测',
              type: 'radar',
              data: [
                {
                  value: props.picData.radars,
                  name: '测评结果',
                  itemStyle: {
                    color: '#1580FF',
                  },
                  areaStyle: {
                    color: 'rgba(21,128,255,0.2)',
                  },
                  lineStyle: {
                    width: 2,
                  },
                },
              ],
            },
          ],
        }
        chart.setOption(option)
      })
    }
  },
)

onBeforeMount(() => {
  if (echart.value) {
    echart.value.dispose()
  }
})
</script>

<style lang="scss" scoped>
.chart-class {
  border-radius: 20rpx 20rpx 0 0;
}
</style>
