<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 class="bg-[#F5FAFF] px-[16rpx] pt-[20rpx] mx-[34rpx] pb-[26rpx]">
      <view class="text-[#000] text-[30rpx] mb-[10rpx] font-700">能力评测建议</view>
      <view class="text-[26rpx] text-[#333]">{{ description }}</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({
  echartData: {
    type: Array,
    default: () => [
      {
        name: [],
        value: [],
      },
      {
        name: [],
        value: [],
      },
    ],
  },
  description: {
    type: String,
    default: '',
  },
})

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

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

const updateChart = () => {
  echart.value.init(echarts, (chart) => {
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
        formatter: function (params) {
          let result = params[0].name.split('\n').join('') + '\n'
          params.forEach((param) => {
            result += `${param.marker} ${param.seriesName}: ${param.value}\n`
          })
          return result
        },
        textStyle: {
          fontSize: 12,
        },
        position: function (point, params, dom, rect, size) {
          const tooltipWidth = dom._rect.width
          const canvasWidth = size.viewSize[0]

          if (point[0] + tooltipWidth > canvasWidth) {
            return [point[0] - tooltipWidth, '10%']
          }

          return [point[0], '10%']
        },
      },
      grid: {
        top: 40,
        left: 10,
        right: 20,
        bottom: 10,
        containLabel: true,
      },
      legend: {
        data: ['我的数据', '平均水平'],
        right: 'auto',
        left: 'center',
        top: 0,
        itemWidth: 15,
        itemHeight: 10,
        textStyle: {
          fontSize: 12,
        },
      },
      xAxis: [
        {
          type: 'category',
          data: (props.echartData[1] as { name: string[] })?.name.map((item) =>
            item.replace('智能', '').replace(/(.{2})/g, '$1\n'),
          ),
          axisLine: {
            lineStyle: {
              color: '#E0E0E0',
            },
          },
          axisLabel: {
            color: '#666',
            fontSize: 12,
            interval: 0,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '分数',
          min: 0,
          max: 50,
          interval: 10,
          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: '#1580FF',
            borderRadius: [4, 4, 0, 0],
          },
          data: (props.echartData[0] as { value: number[] })?.value,
        },
        {
          name: '平均水平',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            color: '#F9AA5B',
            width: 2,
          },
          itemStyle: {
            color: '#F9AA5B',
            borderWidth: 2,
            borderColor: '#fff',
          },
          data: (props.echartData[1] as { value: number[] })?.value,
        },
      ],
    }

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

<style scoped></style>
