<template>
  <!-- 前三名用户卡片：头像框、基础信息和等级行从上往下排列 -->
  <div
    class="top-user"
    :class="`top-user-${ranking}`"
    style="
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1vw;
      color: #fff;
      text-align: center;
    "
  >
    <!-- 头像展示区：接口头像在下层，frameTop 图片作为头像框覆盖层 -->
    <div class="avatar-box" style="position: relative; width: 100%">
      <div class="avatar-inner">
        <img
          v-if="avatarUrl"
          :src="avatarUrl"
          alt=""
          style="display: block; width: 100%; height: 100%; object-fit: cover"
          @error="handleAvatarImageError"
        />
      </div>
      <img
        v-smart-img.noFade
        :src="frameUrl"
        alt=""
        style="
          position: absolute;
          inset: 0;
          z-index: 1;
          display: block;
          width: 100%;
          height: 100%;
          object-fit: fill;
          pointer-events: none;
        "
      />
    </div>

    <!-- 用户基础信息：名称和展示 id，空榜时保留占位高度 -->
    <div class="user-name">{{ name }}</div>
    <div class="user-id">{{ $t('user_id_prefix') }} {{ userId }}</div>

    <!-- 等级展示行：VIP、魅力等级、财富等级规则同步 GulbenFestival -->
    <div
      style="
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5vw;
        direction: ltr;
      "
    >
      <img
        v-if="vipUrl"
        v-smart-img.noFade
        :src="vipUrl"
        alt=""
        style="width: 24%; display: block"
      />
      <itemCenter
        :imgUrl="charmLevelUrl"
        class="level-badge"
        style="width: 30%; min-height: 4vw; max-height: 5vw"
        contentStyle="padding: 0 0 0 42%; align-items: center; justify-content: center; box-sizing: border-box;"
      >
        <span>{{ charmLevel || 0 }}</span>
      </itemCenter>
      <itemCenter
        :imgUrl="wealthLevelUrl"
        class="level-badge"
        style="width: 30%; min-height: 4vw; max-height: 5vw"
        contentStyle="padding: 0 0 0 36%; align-items: center; justify-content: center; box-sizing: border-box;"
      >
        <span>{{ wealthLevel || 0 }}</span>
      </itemCenter>
    </div>
  </div>
</template>

<script setup>
import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
import itemCenter from '@/components/itemCenter.vue'

defineProps({
  ranking: {
    type: [String, Number],
    default: 1,
  },
  frameUrl: {
    type: String,
    required: true,
  },
  avatarUrl: {
    type: String,
    default: '',
  },
  name: {
    type: String,
    default: '',
  },
  userId: {
    type: String,
    default: '',
  },
  vipUrl: {
    type: String,
    default: '',
  },
  charmLevelUrl: {
    type: String,
    required: true,
  },
  wealthLevelUrl: {
    type: String,
    required: true,
  },
  charmLevel: {
    type: [String, Number],
    default: 0,
  },
  wealthLevel: {
    type: [String, Number],
    default: 0,
  },
})
</script>

<style lang="scss" scoped>
.avatar-box {
  aspect-ratio: 237 / 273;
}

.top-user-2 .avatar-box,
.top-user-3 .avatar-box {
  aspect-ratio: 231 / 225;
}

.avatar-inner {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 64%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  transform: translateX(-50%);
}

.top-user-2 .avatar-inner,
.top-user-3 .avatar-inner {
  top: 14%;
  width: 66%;
}

.user-name,
.user-id {
  width: 100%;
  min-height: 1.1em;
  overflow: hidden;
  color: #fff;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-name {
  font-size: 1em;
  font-weight: 800;
}

.user-id {
  font-size: 0.75em;
  font-weight: 600;
  opacity: 0.88;
}

.level-badge span {
  color: #fff;
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1;
}
</style>
