<script setup>
import { getFullUrl } from '~/utils/helper'
const props = defineProps({
  data: [],
})

const imageData = ref([
  {
    img: '/images/dsj/first.png',
    color: '#FFCD00',
  },
  {
    img: '/images/dsj/second.png',
    color: '#D4D3D4',
  },
  {
    img: '/images/dsj/third.png',
    color: '#FF7700',
  },
])

const yxxsbData = ref([])
watch(
  () => props.data,
  (newVal, oldVal) => {
    if (newVal)
      yxxsbData.value = newVal
  },
  { immediate: true },
)
</script>

<template>
  <div class="yxxsbDiv pt-3">
    <div class="flex justify-center space-x-20">
      <template v-for="(item, index) in yxxsbData" :key="index">
        <div v-if="index < 3">
          <img :src="imageData[index].img" alt="">
          <div v-if="!item.avatar" class="avatar" :style="{ border: `2px solid ${imageData[index].color}` }" />
          <img v-else :src="getFullUrl(item.avatar)" alt="" class="avatar" :style="{ border: `2px solid ${imageData[index].color}` }">
          <div class="tip" :style="{ background: imageData[index].color }">
            TOP{{ index + 1 }}
          </div>
          <div class="name mt-1">
            {{ item.name }}
          </div>
        </div>
      </template>
    </div>
    <div class="flex justify-center space-x-20 mt-5">
      <template v-for="(item, index) in yxxsbData" :key="index">
        <div v-if="index >= 3">
          <div v-if="!item.avatar" class="avatar" />
          <img v-else :src="getFullUrl(item.avatar)" alt="" class="avatar">
          <div class="tip">
            TOP{{ index + 1 }}
          </div>
          <div class="name mt-1">
            {{ item.name }}
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.yxxsbDiv {
  img {
    display: block;
    margin-bottom: -0.625rem;
    margin-left: 0.0625rem;
    width: 3rem;
  }
  .avatar {
    width: 5.25rem;
    height: 5.25rem;
    border-radius: 50%;
    background: #eee;
  }
  .tip {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 0.75rem;
    width: 3.4375rem;
    text-align: center;
    margin: auto;
    margin-top: -0.625rem;
    background: #0cd3dc;
  }
  .name {
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    line-height: 1.375rem;
    letter-spacing: 2.01px;
  }
}
</style>
