<template>
  <view class="interest-analysis mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
    <TitleBar title="兴趣分析与代表人物" />

    <text class="text-[26rpx] text-[#666] leading-[40rpx] mb-[30rpx] block">
      {{ description }}
    </text>

    <view class="flex items-center gap-[10rpx] mb-[16rpx]">
      <view class="w-[5rpx] h-[30rpx] bg-[#1580FF]"></view>
      <text class="text-[#1580FF] text-[32rpx]">代表人物</text>
      <text class="text-[#999] text-[24rpx]">以下代表人物仅作为参考</text>
    </view>
    <view class="avatars-list grid grid-cols-4 gap-x-[52rpx] gap-y-[18rpx]">
      <view
        class="avatar-item flex flex-col items-center"
        v-for="(person, index) in personList"
        :key="index"
      >
        <image
          :src="person.avatarUrl"
          class="w-[120rpx] h-[120rpx] rounded-full"
          mode="aspectFill"
        ></image>
        <text class="mt-[10rpx] text-[26rpx] text-[28rpx] font-normal text-center">
          {{ person.nickName }}
        </text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getTagMapPerson } from '@/service/index/api'
import TitleBar from './TitleBar.vue'

const props = defineProps({
  tag: {
    type: String,
    default: '',
  },
  description: {
    type: String,
    default: '',
  },
})

const personList = ref<any[]>([])

watch(
  () => props.tag,
  (newV) => {
    getTagMapPerson({ tag: newV }).then((resp) => {
      if (resp.code === 200) {
        personList.value = resp.result as any[]
      }
    })
  },
)
</script>
