<script setup lang="ts">
import router from '@/router'

defineProps<{
  data: anyObj
}>()

const self = ref()
const hide = ref(false)

const defaultNote: anyObj = {
  reward_coin: '数字权益，可用于兑换商城物品、奖学金等。',
  reward_diamond: '冲关奖励，可用于兑换个性化皮肤、开启一些特权功能。',
  reward_exp: '闯关及完成任务获得经验值。',
  reward_activity: '达到对应活跃度可领取日常和周常任务奖励。',
}

// 查看明细
async function showDetail() {
  self.value.hide()
  hide.value = true
  router.push('/self-coin-detail')
}

function onHide() {
  hide.value = false
}
</script>
<template>
  <el-popover
    ref="self"
    v-bind="$attrs"
    :popper-class="{
      'item-popover': true,
      hide: hide,
    }"
    trigger="hover"
    :show-arrow="false"
    @hide="onHide"
  >
    <div class="main">
      <div class="info">
        <div class="info-img">
          <Icon v-if="data?.iconName" :name="data?.iconName" size="160" />
          <img v-else :src="data?.rewardResourceUrl" />
          <span
            v-if="data?.count > 1"
            :data-content="data?.count"
            class="info-img-count px-count"
            >{{ data?.count }}</span
          >
        </div>
        <div class="info-right">
          <div class="name">
            <span>{{ data?.rewardName }}</span>
            <span v-if="data?.rewardName === '乐贝'" class="detail" @click.stop="showDetail"
              >明细</span
            >
          </div>
          <div class="count">已拥有：{{ data?.personalCount }}</div>
        </div>
      </div>
      <div class="desc">
        {{ data?.note || defaultNote[data?.iconName] || '' }}
      </div>
    </div>

    <template #reference>
      <slot></slot>
    </template>
  </el-popover>
</template>
<style lang="scss">
.item-popover {
  width: 480px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;

  &.hide {
    display: none;
  }

  .main {
    background-color: #fff;
    right: -496px;
    width: 480px;
    height: 26vh;
    border-radius: 2.5vh;
    border: 0.33vh solid $font-color;
    padding: $space-2;
    box-sizing: border-box;
    .info {
      display: flex;
      margin-bottom: 1.33vh;

      .info-img {
        position: relative;
        width: 160px;
        height: 13.33vh;
        margin-right: 16px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border: 0.5vh solid #fff;
          border-radius: 2.67vh;
          box-shadow: 0 0.5vh 0.5vh 0 rgba(0, 0, 0, 0.15);
        }
      }
      .info-right {
        width: calc(100% - 176px);
      }
      .px-count {
        @include font-stroke;
      }
      .info-img-count {
        position: absolute;
        bottom: 0;
        right: 6px;
        color: #fff;
        text-align: right;
        font-family: $font-special;
        font-size: 2vh;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5;
      }
      .name {
        width: 100%;
        color: $font-color;
        font-family: $font-special;
        font-size: 3.33vh;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5;
        margin-bottom: 1.33vh;
        @include single_ellipsis;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .detail {
          font-family: $font-text;
          font-size: 2.5vh;
          cursor: pointer;
          color: skyblue;
        }
      }
      .count {
        width: 100%;
        color: #666;
        font-family: 'Alibaba Health Font 2.0 CN';
        font-size: 2.33vh;
        font-style: normal;
        font-weight: 600;
        line-height: 3.5vh; /* 150% */
        padding-bottom: 1.33vh;
        border-bottom: 0.25vh dashed #ccc;
        @include single_ellipsis;
      }
    }
    .desc {
      width: 100%;
      color: $font-color;
      font-family: 'Alibaba Health Font 2.0 CN';
      font-size: 2.67vh;
      font-style: normal;
      font-weight: 600;
      line-height: 4vh; /* 150% */
      @include multiple_ellipsis(2);
    }
  }
}
</style>
