<template>
  <view
    class="radar-chart-placeholder mx-[24rpx] bg-white chart-class h-[630rpx] flex flex-col justify-center px-[24rpx] pt-[62rpx] pb-[20rpx]"
  >
    <view class="w-full z-1 flex flex-col gap-[40rpx]">
      <view
        class="w-full flex items-center gap-[16rpx] text-[30rpx] text-[#A8A8A8]"
        v-for="(item, index) in characterData"
        :style="`--start-color:${colors[index].startColor};--end-color:${colors[index].endColor};--active-color:${colors[index].activeColor}`"
        :key="index"
      >
        <view
          :class="`w-110rpx ${item.leftData.value > item.rightData.value ? 'left-active' : ''}`"
        >
          {{ item.leftData.name }}
        </view>
        <view class="flex-1 h-[28rpx] bg-[#F1F2F4] rounded-[16rpx]">
          <view
            class="w-[60%] rounded-[16rpx] bar-color h-[28rpx]"
            :style="`transform:translateX(${(item.rightData.value / (item.rightData.value + item.leftData.value)) * 100}%);`"
          ></view>
        </view>
        <view
          :class="`w-110rpx ${item.leftData.value > item.rightData.value ? '' : 'right-active'}`"
        >
          {{ item.rightData.name }}
        </view>
      </view>
    </view>

    <view class="px-[16rpx] py-[20rpx] flex flex-col bg-[#F5FAFF] mt-[32rpx]">
      <text class="text-[30rpx] text-[#000] mb-[10rpx] font-700">性格介绍</text>
      <text class="text-[26rpx] text-[#333]">{{ description }}</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
const props = defineProps({
  linChart: {
    type: Object,
    default: () => ({
      name: [],
      value: [],
    }),
  },
  description: {
    type: String,
    default: '',
  },
})

const colors = [
  { startColor: '#97FBCD', endColor: '#00BAAD', activeColor: '#00BAAD' },
  { startColor: '#FF5940', endColor: '#FAA896', activeColor: '#FF4117' },
  { startColor: '#FFBF5E', endColor: '#F59300', activeColor: '#EB8D00' },
  { startColor: '#96E4FA', endColor: '#117CFC', activeColor: '#117CFC' },
]
const transformData = (names: string[], values: number[]) => {
  const result = []
  const pairMap = new Map()
  const pairData = { E: 'I', S: 'N', T: 'F', J: 'P' }

  // 先建立名称和值的映射
  names.forEach((name, index) => {
    const match = name.match(/\((.*?)\)(\w+)/)
    if (match) {
      const letter = match[2]
      pairMap.set(letter, { name, value: values[index] })
    }
  })

  // 根据 pairData 构建配对数据
  Object.entries(pairData).forEach(([left, right]) => {
    const leftData = pairMap.get(left)
    const rightData = pairMap.get(right)
    if (leftData && rightData) {
      result.push({
        leftData,
        rightData,
      })
    }
  })

  return result
}

const characterData = ref<any[]>([])
watch(
  () => props.linChart,
  (newV) => {
    let data = transformData(newV.name, newV.value)
    characterData.value = data
  },
)
</script>

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

.bar-color {
  background: linear-gradient(90deg, var(--start-color) 0%, var(--end-color) 100%);
}

.left-active {
  color: var(--active-color);
  font-weight: 700;
}
.right-active {
  color: var(--active-color);
  font-weight: 700;
}
</style>
