<script setup lang="ts">
import { userStore } from '@/stores'
import { storeToRefs } from 'pinia'
withDefaults(
  defineProps<{
    modelValue: boolean
    rewardList: anyObj[]
  }>(),
  {
    modelValue: false,
    rewardList: () => [],
  },
)
const emits = defineEmits(['update:modelValue', 'ok'])
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,
  },
  experience: {
    iconName: 'reward_exp',
    rewardName: '经验',
    personalCount: userInfo.value.experience,
  },
  activeDegree: {
    iconName: 'reward_activity',
    rewardName: '活跃度',
    personalCount: userInfo.value.dynamic,
  },
}))

function onOk() {
  emits('update:modelValue', false)
  emits('ok')
}
</script>
<template>
  <div v-if="modelValue" class="mask">
    <XAe ref="XAeRef" name="receive_reward" :frames="72" />
    <div class="content">
      <div class="reward-list">
        <ItemPopover
          v-for="(item, index) in rewardList"
          :key="index"
          :data="{
            iconName: typeToIcon[item.rewardCode]?.iconName,
            rewardName: typeToIcon[item.rewardCode]?.rewardName,
            personalCount: typeToIcon[item.rewardCode]?.personalCount,
          }"
        >
          <div
            :style="{
              background: `url('${OSS_URL}/icon/task-${item.rewardCode}.svg') 100% / cover no-repeat`,
            }"
            class="reward-item"
          >
            {{ item.count }}
          </div>
        </ItemPopover>
      </div>
      <mj-button type="warn" class="button" width="386" @click="onOk">确认</mj-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
//
.mask {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  background-color: #00000040;
}
.content {
  position: absolute;
  top: 8.33vh;
  width: 100%;
  height: 70.58vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .reward-list {
    width: 100%;
    height: 18.33vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 0px;
      height: 0;
      display: none;
    }
    .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;
    }
  }
  :deep(.button) {
    position: absolute;
    bottom: 8.33vh;
    .x-button-text {
      font-size: 4vh;
    }
  }
}
</style>
