<script setup lang="ts">
import { ref } from 'vue'
import userApi from '@/api/system/user'
import { onMounted } from 'vue'
const oss_url = `${import.meta.env.VITE_OSS_URL}`
const medalExplainBg = `url(${oss_url}/urm/medal_explain.svg) 100%/cover no-repeat`
const medalBg = `url(${oss_url}/urm/medal_bg.svg) 100%/cover no-repeat`
const medalTextBg = `url(${oss_url}/urm/medal_text_bg.svg) 100%/cover no-repeat`
interface MedalType {
  id: number
  name: string
  detail: string
  num: any
  numTotal: number
  status: boolean
}
const activeMedal = ref({} as MedalType)

const medalList = ref([] as MedalType[])
function handleShowMedal(i: any) {
  activeMedal.value = i
}
async function init() {
  const { data } = await userApi.getPersonalMedalV2Api()
  medalList.value = data.data.medalList
  activeMedal.value = medalList.value[0]
}
onMounted(() => {
  init()
})
</script>
<template>
  <div class="medal_box">
    <el-scrollbar>
      <div class="medal_list">
        <div v-for="i in medalList" :key="i.id" class="medal_list_item" @click="handleShowMedal(i)">
          <div :class="{ medal_list_item_pic: true, active: activeMedal.id === i.id }">
            <Icon :name="`medal_${i.id}`" size="230" :class="{ gray: !i.status }" />
          </div>
          <div class="name">{{ i.name }}</div>
        </div>
      </div>
    </el-scrollbar>
    <div class="medal_explain" :style="{ background: medalExplainBg }">
      <div class="medal" :style="{ background: medalBg }">
        <Icon v-if="activeMedal.id" :name="`medal_${activeMedal.id}`" size="240" />
      </div>
      <div class="name" :style="{ background: medalTextBg }">
        {{ activeMedal.name }}
      </div>
      <div class="explain">{{ activeMedal.detail }}</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.medal_box {
  display: flex;
  // justify-content: space-between;
  margin: $space-6_h 0 0 106px;
  column-gap: 8vh;

  $item_w: 20vh;
  .medal_list {
    display: flex;
    flex-wrap: wrap;
    width: calc($item_w * 2 + $space-7_h * 2);
    height: 77.33vh;
    margin-top: 1.67vh;
    gap: $space-6_h $space-7_h;

    &_item {
      // margin: 0 $space-6 $space-6_h 0;
      width: $item_w;
      cursor: pointer;
      &:nth-child(2n) {
        margin-right: 0;
      }
      &_pic {
        background: linear-gradient(162.07deg, #fdfdf9 12.23%, #dfebf7 90.14%);
        border: 0.67vh solid #fff;
        border-radius: $radius-4;

        .gray {
          // filter: grayscale(100%);
          // filter: brightness(100%);
          filter: saturate(2%);
        }
      }
      .active {
        border: 0.67vh solid rgba(255, 248, 84, 1);
      }
      .name {
        margin-top: $space-2_h;
        text-align: center;
        font-family: $font-special;
        font-size: 3.33vh;
        line-height: 5vh;
        color: rgba(75, 75, 104, 1);
      }
    }
  }
  .medal_explain {
    position: relative;
    width: 58.17vh;
    height: 76.67vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10vh;
    padding-left: 2.5vh;

    .medal {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46.17vh;
      height: 25vh;
    }
    .name {
      width: 15.17vh;
      height: 3.08vh;
      margin: $space-2_h auto 3.5vh auto;
      font-family: $font-special;
      line-height: 5vh;
      font-size: 3.33vh;
      text-align: center;
    }
    .explain {
      font-family: $font-text;
      font-weight: 600;
      border-radius: 2.67vh;
      padding: 2.67vh 24px;
      box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.15);
      background-color: #fff;
      font-size: 2.33vh;
      line-height: 3.5vh;
    }
    // }
  }
}
</style>
