<template>
  <div style="width: 100%">
    <div style="position: relative" :style="{ minHeight: ranking == '1' ? '46vw' : '33vw' }">
      <!-- 头像 -->
      <div
        style="
          position: relative;
          z-index: -1;
          display: flex;
          justify-content: center;
          align-items: center;
        "
        :style="{ height: avatarContainerHeight }"
      >
        <div :style="{ width: avatarWidth }">
          <img
            :src="avatarUrl || ''"
            alt=""
            width="100%"
            style="display: block; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
            @error="handleAvatarImageError"
          />
        </div>
      </div>

      <!-- 用户名和贡献值 -->
      <!-- 用户名 -->
      <div
        style="
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 3;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 1vw;
        "
        :style="{ height: bottomSectionHeight }"
      >
        <div
          style="display: flex; justify-content: center; align-items: center"
          :style="{
            width: nameValueWidth,
            height: nameValueHeight,
          }"
        >
          <div
            style="direction: ltr; font-weight: 700"
            class="showText"
            :class="isTopOne ? 'top1Text' : 'text'"
          >
            {{ name }}
          </div>
        </div>

        <!-- 贡献值 -->
        <div
          style="
            border-radius: 40px;
            box-shadow: 0 0 2.558px 0 rgba(0, 0, 0, 0.4) inset;
            border: 0.64px solid #ffdf36;
            padding: 1px 2px;

            display: flex;
            justify-content: center;
            align-items: center;
          "
          :style="{
            width: distributionValueWidth,
            background:
              ranking == '1'
                ? `linear-gradient(270deg, #3A0607 0%, #D8494B 47.45%, #3A0607 100%)`
                : ranking == '2'
                  ? `linear-gradient(270deg, #D1A3FD 0%, #801DBD 50%, #D0A3FD 100%)`
                  : `linear-gradient(270deg, #A3FDB7 0%, #1DBD3A 50%, #A3FDB2 100%)`,
          }"
        >
          <img
            v-smart-img
            src="/src/assets/icon/Aslan/coin.png"
            alt=""
            style="display: block"
            :style="{ width: coinWidth }"
          />
          <div
            style="font-weight: 590"
            class="showText"
            :class="isTopOne ? 'top1Text' : 'text'"
            :style="{
              color: ranking == '1' ? `#FFE601` : '#FFF',
            }"
          >
            {{ distributionValue }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

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

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

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

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

// 是否为第一名
const isTopOne = computed(() => {
  return props.ranking === '1'
})

// 头像容器高度
const avatarContainerHeight = computed(() => {
  switch (props.ranking) {
    case '1':
      return '85%'
    case '2':
      return '78%'
    case '3':
      return '78%'
    default:
      return '78%'
  }
})

// 头像宽度
const avatarWidth = computed(() => {
  switch (props.ranking) {
    case '1':
      return '80%'
    case '2':
      return '60%'
    case '3':
      return '60%'
    default:
      return '38%'
  }
})

// 底部信息区域高度
const bottomSectionHeight = computed(() => {
  switch (props.ranking) {
    case '1':
      return '31%'
    case '2':
      return '32%'
    case '3':
      return '28%'
    default:
      return '29%'
  }
})

// 名称高度
const nameValueHeight = computed(() => {
  switch (props.ranking) {
    case '1':
      return '40%'
    case '2':
      return '39%'
    case '3':
      return '43%'
    default:
      return '38%'
  }
})

// 名称宽度
const nameValueWidth = computed(() => {
  switch (props.ranking) {
    case '1':
      return '70%'
    case '2':
      return '70%'
    case '3':
      return '70%'
    default:
      return '40%'
  }
})

// 贡献值高度
const distributionValueHeight = computed(() => {
  switch (props.ranking) {
    case '1':
      return '26%'
    case '2':
      return '38%'
    case '3':
      return '38%'
    default:
      return '38%'
  }
})

// 贡献值宽度
const distributionValueWidth = computed(() => {
  switch (props.ranking) {
    case '1':
      return '60%'
    case '2':
      return '50%'
    case '3':
      return '50%'
    default:
      return '40%'
  }
})

// 金币图标宽度
const coinWidth = computed(() => {
  switch (props.ranking) {
    case '1':
      return '1em'
    case '2':
      return '0.9em'
    case '3':
      return '0.9em'
    default:
      return '0.9em'
  }
})
</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.75em;
}

.text {
  font-size: 0.6em;
}

@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>
