<script setup lang="ts">
import Popover from './Popover.vue'
withDefaults(
  defineProps<{
    modelValue: boolean
    rewardList: anyObj[]
  }>(),
  {
    modelValue: false,
    showData: () => [],
  },
)
const emits = defineEmits(['update:modelValue'])

// 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,
//   },
// }))
</script>
<template>
  <div class="mask">
    <XAe ref="XAeRef" name="receive_reward" :frames="72" />
    <div class="content">
      <div class="reward-list">
        <Popover :rewardList="rewardList"></Popover>
        <!-- <ItemPopover
                    v-for="(item, index) in rewardList"
                    :key="index"
                    :data="{
                        iconName: item.userRewardMappingVo
                            ? ''
                            : typeToIcon[item.rewardType]?.iconName,
                        rewardName: item.userRewardMappingVo
                            ? item.userRewardMappingVo.rewardName
                            : typeToIcon[item.rewardType]?.rewardName,
                        personalCount: item.userRewardMappingVo
                            ? item.userHaveCount
                            : typeToIcon[item.rewardType]?.personalCount,
                        note: item.userRewardMappingVo ? item.userRewardMappingVo.note : '',
                        rewardResourceUrl: item.userRewardMappingVo
                            ? item.userRewardMappingVo.iconUrl
                            : '',
                    }"
                    :disabled="!!item.personalityVo"
                >
                    <div
                        :style="{
                            background: 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"
                    >
                        {{ item.rewardCount }}
                    </div>
                </ItemPopover> -->
      </div>
      <mj-button
        type="warn"
        class="button"
        width="386"
        @click="
          () => {
            $emit('update:modelValue', false)
          }
        "
        >确认</mj-button
      >
    </div>
  </div>
</template>

<style lang="scss" scoped>
//
.mask {
  position: fixed;
  z-index: 9;
  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: 90%;
    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;
      border-radius: 1.83vh;
      box-shadow: 0 0.44vh 0.44vh 0 #00000026;
    }
  }
  :deep(.button) {
    position: absolute;
    bottom: 8.33vh;
    .x-button-text {
      font-size: 4vh;
    }
  }
}
</style>
