<template>
  <view class="bg-white mx-[24rpx] rounded-[20rpx] pb-[20rpx]">
    <view class="px-[24rpx] h-[368rpx] z-1">
      <LEchart ref="echart" :customStyle="`z-index:1;`"></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)

interface IndicatorItem {
  name: string
  max: number
}

interface PicChartsData {
  indicator: IndicatorItem[]
  radars: number[]
}

const props = defineProps({
  picCharts: {
    type: Object as () => PicChartsData,
    default: () => ({
      indicator: [],
      radars: [],
    }),
  },
  description: {
    type: String,
    default: '',
  },
})

onMounted(() => {
  updateChart()
})

watch(
  () => props.picCharts,
  (newVal) => {
    if (newVal && newVal.indicator && newVal.indicator.length > 0) {
      updateChart()
    }
  },
  { deep: true },
)

const updateChart = () => {
  echart.value.init(echarts, (chart) => {
    // 提取职业锚名称，去除括号内的缩写
    const categories = props.picCharts.indicator.map((item) => {
      const match = item.name.match(/(.*?)\([^)]*\)/)
      return match ? match[1].trim() : item.name
    })

    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        top: 60,
        left: 0,
        right: 0,
        bottom: 0,
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: categories,
        axisLine: {
          lineStyle: {
            color: '#E0E0E0',
          },
        },
        axisLabel: {
          color: '#666',
          fontSize: 12,
          interval: 0,
          rotate: 45,
          formatter: function (value) {
            // 处理长文本
            if (value.length > 4) {
              return value.substring(0, 4) + '...'
            }
            return value
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        name: '分数',
        min: 0,
        max: 30,
        interval: 5,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#E0E0E0',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: '#E8E8E8',
            type: 'solid',
          },
        },
        axisLabel: {
          color: '#999',
        },
      },
      series: [
        {
          name: '得分',
          type: 'bar',
          barWidth: '20',
          itemStyle: {
            color: function (params) {
              // 为不同柱子设置不同颜色
              const colorList = [
                '#1580FF',
                '#F9AA5B',
                '#5470c6',
                '#91cc75',
                '#fac858',
                '#ee6666',
                '#73c0de',
                '#3ba272',
              ]
              return colorList[params.dataIndex % colorList.length]
            },
            borderRadius: [4, 4, 0, 0],
          },
          label: {
            show: true,
            position: 'top',
            color: '#666',
            fontSize: 12,
          },
          data: props.picCharts.radars,
        },
      ],
    }

    chart.setOption(option)
  })
}
</script>

<style scoped></style>
