<!-- src/views/Ranking/Overall/components/topUser.vue -->
<template>
  <div style="width: 100%">
    <div
      style="
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
      "
      :style="{ minHeight: currentLayout.minHeight }"
    >
      <!-- 头像 -->
      <itemCenter
        style="width: 100%; z-index: 1"
        :imgUrl="BorderImgUrl"
        :key="BorderImgUrl"
        :contentStyle="``"
      >
        <img
          :src="avatarUrl || ''"
          alt=""
          style="
            position: relative;
            z-index: -1;
            display: block;
            width: 70%;
            aspect-ratio: 1/1;
            object-fit: cover;
          "
          @error="handleAvatarImageError"
        />
      </itemCenter>

      <!-- 名称 -->
      <div
        style="width: 100%; min-width: 0; text-align: center; font-weight: 860"
        class="showText text"
      >
        {{ name }}
      </div>

      <!-- 贡献金币 -->
      <div
        style="
          width: 100%;
          min-width: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        <img
          v-smart-img
          src="/src/assets/icon/Aslan/coin.png"
          alt=""
          style="display: block; width: 0.95em; flex-shrink: 0"
        />
        <div style="font-weight: 700; color: white" class="showText valueText">
          {{ displayValue }}
        </div>
      </div>
    </div>
  </div>
</template>

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

const TOP_USER_LAYOUTS = {
  Wealth: {
    1: {
      minHeight: '0vw',
      avatarBox: { top: '0', height: '110%' },
      avatarImage: { width: '36%' },
      name: { bottom: '14%', width: '30%', height: '7.2%' },
      value: { bottom: '2%', width: '34%', height: '10%' },
    },
    2: {
      minHeight: '0vw',
      avatarBox: { top: '0', height: '90%' },
      avatarImage: { width: '42%' },
      info: { bottom: '0', height: '17%', width: '60%' },
    },
    3: {
      minHeight: '0vw',
      avatarBox: { top: '0', height: '90%' },
      avatarImage: { width: '42%' },
      info: { bottom: '0', height: '17%', width: '60%' },
    },
  },
  Charm: {
    1: {
      minHeight: '0vw',
      avatarBox: { top: '0', height: '90%' },
      avatarImage: { width: '36%' },
      name: { bottom: '16%', width: '38%', maxWidth: '38%', height: '7.2%' },
      value: { bottom: '2%', width: '34%', maxWidth: '34%', height: '10%' },
    },
    2: {
      minHeight: '0vw',
      avatarBox: { top: '0', height: '90%' },
      avatarImage: { width: '42%' },
      info: { bottom: '0', height: '17%', width: '60%' },
    },
    3: {
      minHeight: '0vw',
      avatarBox: { top: '0', height: '90%' },
      avatarImage: { width: '42%' },
      info: { bottom: '0', height: '17%', width: '60%' },
    },
  },
  Room: {
    1: {
      minHeight: '0vw',
      avatarBox: { top: '0', height: '100%' },
      avatarImage: { width: '27%' },
      name: { bottom: '24%', width: '30%', height: '7.2%' },
      value: { bottom: '3%', width: '34%', height: '10%' },
    },
    2: {
      minHeight: '0vw',
      avatarBox: { top: '0', height: '90%' },
      avatarImage: { width: '42%' },
      info: { bottom: '0', height: '17%', width: '60%' },
    },
    3: {
      minHeight: '0vw',
      avatarBox: { top: '0', height: '90%' },
      avatarImage: { width: '42%' },
      info: { bottom: '0', height: '17%', width: '60%' },
    },
  },
}

const props = defineProps({
  ranking: {
    type: String,
    default: '',
  },
  Type: {
    type: String,
    default: '',
  },
  rank: {
    type: Number,
    default: 1,
  },
  isTopOne: {
    type: Boolean,
    default: false,
  },
  avatarUrl: {
    type: String,
    default: '/src/assets/icon/Aslan/defaultAvatar.png',
  },
  BorderImgUrl: {
    type: String,
    required: true,
  },
  name: {
    type: String,
    default: '',
  },
  distributionValue: {
    type: String,
    default: '',
  },
})

const currentType = computed(() => {
  return TOP_USER_LAYOUTS[props.Type] ? props.Type : 'Wealth'
})

const normalizedRank = computed(() => {
  return Number(props.ranking || props.rank || 1)
})

const currentRank = computed(() => {
  if (props.isTopOne || normalizedRank.value === 1) {
    return 1
  }

  return normalizedRank.value === 3 ? 3 : 2
})

const isFirst = computed(() => {
  return currentRank.value === 1
})

const currentLayout = computed(() => {
  return TOP_USER_LAYOUTS[currentType.value][currentRank.value]
})

const avatarBorderRadius = computed(() => {
  return props.Type === 'Room' ? '0' : '50%'
})

const displayValue = computed(() => {
  return props.distributionValue || '0'
})
</script>

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

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

.top1Text {
  font-size: 0.86em;
}

.top1ValueText {
  font-size: 0.72em;
}

.text {
  font-size: 0.74em;
}

.valueText {
  font-size: 0.68em;
}

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

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

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

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