<!-- src/views/Ranking/WeeklyStar/components/topUser.vue -->
<template>
  <div style="width: 100%">
    <div style="position: relative">
      <img
        v-smart-img
        :src="BorderImgUrl"
        alt=""
        width="100%"
        style="display: block; position: relative; z-index: 2"
      />
      <!-- 头像 -->
      <div
        style="
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 65%;
          z-index: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <div :style="{ width: isTopOne ? '50%' : '80%' }">
          <img
            v-smart-img
            :src="avatarUrl || ''"
            alt=""
            width="100%"
            style="border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
            @error="defaultAvatarUrl"
          />
        </div>
      </div>
      <!-- 用户名和贡献值 -->
      <div
        style="
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 35%;
          z-index: 3;

          display: flex;
          flex-direction: column;
          align-items: center;
        "
      >
        <div
          style="height: 28%; display: flex; justify-content: center; align-items: center"
          :style="{ width: isTopOne ? '35%' : '50%' }"
        >
          <div style="font-weight: 860" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
            {{ name }}
          </div>
        </div>
        <div
          style="height: 36%; display: flex; justify-content: center; align-items: center"
          :style="{ width: isTopOne ? '30%' : '40%' }"
        >
          <div
            style="font-weight: 700; color: #642624"
            class="showText"
            :class="isTopOne ? 'top1Text' : 'text'"
          >
            {{ distributionValue }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  isTopOne: {
    type: Boolean,
    default: true,
  },

  avatarUrl: {
    type: String,
    default: '/src/assets/icon/defaultAvatar.png',
  },

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

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

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

const defaultAvatarUrl = (e) => {
  console.log('头像资源出错')
  e.target.onerror = null //防止循环
  e.target.src = new URL('/src/assets/icon/defaultAvatar.png', import.meta.url).href
}
</script>

<style lang="scss" scoped>
* {
  font-family: 'SF Pro';
  color: black;
}

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

.top1Text {
  font-size: 12px;
}

.text {
  font-size: 10px;
}

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

  .text {
    font-size: 20px;
  }
}

@media screen and (min-width: 1024px) {
  .top1Text {
    font-size: 32px;
  }

  .text {
    font-size: 28px;
  }
}
</style>
