<template>
  <view class="bg-white rounded-[20rpx] pb-[20rpx] custom-background">
    <view class="h-[586rpx] z-1">
      <LEchart ref="echart" :customStyle="`z-index:1;`"></LEchart>
    </view>
    <view class="relative mt-[68rpx] bg-[#F5FAFF] mx-[20rpx] px-[24rpx] pt-[58rpx] pb-[20rpx]">
      <image
        src="https://api.static.ycymedu.com/src/images/home/test-icon.png"
        mode="scaleToFill"
        class="w-[180rpx] h-[52rpx] absolute top-[-9rpx] left-[20rpx]"
      />
      <view v-for="(item, index) in innerParsing" class="text-[26rpx] mb-[20rpx]" :key="index">
        <text class="text-[#000] font-700">{{ item.title }}:&nbsp;</text>
        <text class="text-[#3d3d3d] font-400">{{ item.desc }}</text>
      </view>
      <view class="text-[26rpx]">
        <text class="text-[#000] font-700">策略偏好:</text>
        <view class="flex gap-x-[20rpx] gap-y-[16rpx] text-[22rpx] flex-wrap mt-[16rpx]">
          <view
            v-for="(item, index) in policy.items"
            :key="index"
            class="text-[22rpx] px-[12rpx] py-[4rpx] rounded-[20rpx] bg-[rgba(250,142,35,0.15)] text-[#FA8E23]"
          >
            {{ item.title }}
          </view>
        </view>
      </view>
    </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<any>(null)

const props = defineProps({
  picData: {
    type: Array,
    default: () => [],
  },
  parsing: {
    type: String,
    default: '',
  },
})

const innerParsing = ref<any[]>([])
const policy = ref({ items: [] })

watch(
  () => props.parsing,
  (newV) => {
    const _val = JSON.parse(newV) as {
      tags: { title: string; items: { title: string; desc: string }[] }[]
    }
    _val.tags.forEach((item) => {
      if (item.title === '策略偏好') {
        policy.value = item
        return
      } else {
        innerParsing.value.push(...item.items)
      }
    })
  },
)

// 监听数据变化
watch(
  () => props.picData,
  (newData) => {
    if (!newData || newData.length === 0) return

    if (echart.value) {
      echart.value.init(echarts, (chart) => {
        const option = {
          radar: {
            center: ['50%', '50%'],
            radius: '60%',
            indicator: newData.map((item: any) => ({
              name: `${item.type},${item.desc}`,
            })),
            shape: 'polygon',
            splitNumber: 4,
            axisName: {
              color: '#333',
              fontSize: 12,
              formatter: (value: string) => {
                // 处理文字换行
                const maxLength = 4
                const result = []
                let _val = value.split(',')
                for (let i = 0; i < _val[0].length; i += maxLength) {
                  result.push(value.slice(i, i + maxLength))
                }
                result.push(`(${_val[1]})`)
                return result.join('\n')
              },
            },
            splitArea: {
              areaStyle: {
                color: ['rgba(255,255,255,0.3)'],
              },
            },
            axisLine: {
              lineStyle: {
                color: '#E5E6EB',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#E5E6EB',
              },
            },
          },
          series: [
            {
              type: 'radar',
              data: [
                {
                  value: newData.map((item: any) => item.value),
                  name: '学习风格',
                  areaStyle: {
                    color: 'rgba(64, 158, 255, 0.3)',
                  },
                  lineStyle: {
                    color: '#409EFF',
                  },
                  itemStyle: {
                    color: '#409EFF',
                  },
                  label: {
                    show: true,
                    formatter: (params: any) => {
                      return params.value
                    },
                    color: '#1580FF',
                    fontSize: 12,
                  },
                },
              ],
            },
          ],
        }

        chart.setOption(option)
      })
    }
  },
  { immediate: true },
)

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

<style scoped>
.custom-background {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, #ffffff 6%);
}
</style>
