<script setup lang="ts">
import { userStore } from '@/stores'
import { storeToRefs } from 'pinia'
withDefaults(
  defineProps<{
    rewardList: anyObj[]
  }>(),
  {
    rewardList: () => [],
  },
)
const OSS_URL = import.meta.env.VITE_OSS_URL
const { userInfo } = storeToRefs(userStore())
const typeToIcon = computed<anyObj>(() => ({
  currency: {
    iconName: 'reward_coin',
    rewardName: '乐贝',
    personalCount: userInfo.value.currency,
  },
  diamond: {
    iconName: 'reward_diamond',
    rewardName: '钻石',
    personalCount: userInfo.value.diamond,
  },
  exp: {
    iconName: 'reward_exp',
    rewardName: '经验',
    personalCount: userInfo.value.experience,
  },
  dynamic: {
    iconName: 'reward_activity',
    rewardName: '活跃度',
    personalCount: userInfo.value.dynamic,
  },
  achievement: {
    iconName: 'task-achievementPoints',
    rewardName: '成就点数',
    note: '达到对应成就点数可领取阶段奖励',
  },
}))
</script>
<template>
  <ItemPopover
    v-for="(item, index) in rewardList"
    :key="index"
    :data="{
      iconName: item.userRewardMappingVo
        ? ''
        : typeToIcon[item.rewardCode === 'achievement' ? 'achievement' : item.rewardType]?.iconName,
      rewardName: item.userRewardMappingVo
        ? item.userRewardMappingVo.rewardName
        : typeToIcon[item.rewardCode === 'achievement' ? 'achievement' : item.rewardType]
            ?.rewardName,
      personalCount: item.userRewardMappingVo
        ? item.userHaveCount
        : typeToIcon[item.rewardType]?.personalCount,
      note: item.userRewardMappingVo
        ? item.userRewardMappingVo.note
        : item.rewardCode === 'achievement'
          ? typeToIcon.achievement.note
          : '',
      rewardResourceUrl: item.userRewardMappingVo ? item.userRewardMappingVo.iconUrl : '',
    }"
    :disabled="!!item.personalityVo"
  >
    <div
      :style="{
        background:
          item.rewardCode === 'achievement' && item.rewardType === 'dynamic'
            ? 'linear-gradient(150.34deg, #FFF4BF 8.74%, #FFEE6C 89.6%)'
            : item.personalityVo
              ? `url('${item.personalityVo.personalInfoResourceUrl}') center / contain no-repeat`
              : item.userRewardMappingVo
                ? `url('${item.userRewardMappingVo.iconUrl}') center / contain no-repeat`
                : `url('${OSS_URL}/icon/task-${item.rewardType}.svg') 100% / cover no-repeat`,
      }"
      :class="{
        'reward-item': true,
        isUnique: item.rewardCode === 'achievement' && item.rewardType === 'dynamic',
      }"
    >
      <div
        v-if="item.rewardType === 'dynamic'"
        class="img"
        :style="{
          background: `url('${OSS_URL}/icon/task-achievementPoints.svg') 100% / cover no-repeat`,
        }"
      ></div>
      <div class="text">
        {{ item.rewardCount }}
      </div>
    </div>
  </ItemPopover>
</template>

<style lang="scss" scoped>
.reward-item {
  height: 16.67vh;
  width: 16.67vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: 10px;
  font-family: $font-special;
  font-size: 3.33vh;
  font-weight: 400;
  line-height: 5vh;
  text-align: center;
  color: white;
  margin: 0 10px;
  border-radius: 1.83vh;
  box-shadow: 0 0.44vh 0.44vh 0 #00000026;
  &.isUnique {
    position: relative;
    border: 0.33vh solid #fff;
    .img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      height: 13.33vh;
      width: 13.33vh;
    }
  }
}
</style>
