<template>
  <div style="width: 100%">
    <div style="position: relative">
      <img
        v-smart-img.noFade
        :src="BorderImgUrl"
        alt=""
        width="100%"
        style="display: block; position: relative; z-index: 2"
      />

      <!-- 前三名头像区域 -->
      <div class="avatar-wrap" :style="{ height: avatarContainerHeight }">
        <div :style="{ width: avatarWidth }">
          <img
            :src="avatarUrl || ''"
            alt=""
            width="100%"
            class="top-avatar"
            style="display: block; aspect-ratio: 1 / 1; object-fit: cover"
            @error="handleAvatarImageError"
          />
        </div>
      </div>

      <!-- 用户昵称和贡献值 -->
      <div class="info-wrap" :style="{ height: bottomSectionHeight }">
        <div
          class="name-wrap"
          :style="{
            width: nameValueWidth,
            height: nameValueHeight,
          }"
        >
          <div class="showText" :class="isTopOne ? 'top1Text' : 'text'">
            {{ name }}
          </div>
        </div>

        <div
          v-if="distributionValue !== ''"
          class="distribution-value-pill"
          :class="distributionValueClass"
        >
          <img
            v-smart-img.noFade
            :src="resolvedValueIconUrl"
            alt=""
            class="value-icon"
            :style="{ width: coinWidth }"
          />
          <div class="showText" :class="isTopOne ? 'top1Text' : 'text'">
            {{ distributionValue }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({
  ranking: {
    type: String,
    default: '1',
  },

  avatarUrl: {
    type: String,
    default: '',
  },

  BorderImgUrl: {
    type: String,
    required: true,
  },

  name: {
    type: String,
    default: '',
  },

  distributionValue: {
    type: [String, Number],
    default: '',
  },

  valueIconUrl: {
    type: String,
    default: '',
  },
})

const isTopOne = computed(() => props.ranking === '1')

const resolvedValueIconUrl = computed(() => {
  return props.valueIconUrl || new URL('/src/assets/icon/Aslan/coin.png', import.meta.url).href
})

const distributionValueClass = computed(() => {
  switch (props.ranking) {
    case '1':
      return 'distribution-value-pill-top1'
    case '2':
      return 'distribution-value-pill-top2'
    case '3':
      return 'distribution-value-pill-top3'
    default:
      return ''
  }
})

const avatarContainerHeight = computed(() => (isTopOne.value ? '78%' : '80%'))
const avatarWidth = computed(() => (isTopOne.value ? '45%' : '60%'))
const bottomSectionHeight = computed(() => {
  if (props.ranking === '1' || props.ranking === '2') return '26%'
  return '24%'
})
const nameValueWidth = computed(() => (isTopOne.value ? '40%' : '48%'))
const nameValueHeight = computed(() => '30%')
const coinWidth = computed(() => (isTopOne.value ? '1em' : '0.9em'))
</script>

<style lang="scss" scoped>
* {
  color: #fff;
}

.avatar-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-avatar {
  border-radius: 50%;
}

.info-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.name-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.showText {
  color: #fff;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.top1Text {
  font-size: 0.75em;
}

.text {
  font-size: 0.6em;
}

.distribution-value-pill {
  width: 50%;
  border-radius: 40px;
  border: 0.64px solid #ffdf36;
  box-shadow: 0 0 2.558px 0 rgba(0, 0, 0, 0.4) inset;
  padding: 1px 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.distribution-value-pill-top1 {
  width: 35%;
  background: linear-gradient(270deg, #ad1300 0%, #fe280c 50%, #ad1300 100%);
}

.distribution-value-pill-top2 {
  background: linear-gradient(270deg, #6593ff 0%, #0152cd 50%, #6593ff 100%);
}

.distribution-value-pill-top3 {
  background: linear-gradient(270deg, #f59188 0%, #d74f36 50%, #f59188 100%);
}

.value-icon {
  display: block;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 16px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}
</style>
