<template>
  <van-popup
    v-model:show="showPopup"
    round
    position="center"
    :style="{ background: 'none' }"
  >
    <div class="popup-main">
      <img class="logo" src="@/assets/images/discountCoupon/type2.png" />
      <div class="content-wrap">
        <div class="content">
          <div class="left">
            <h4 v-if="item.couponType === 1">
              <span class="coupon_number font_DINPro_Medium"
                >{{ item.discountNum }} </span
              ><i class="coupon_rmb" v-if="item.discountNumType == 1">天</i
              ><i class="coupon_rmb" v-if="item.discountNumType == 2">个月</i>
            </h4>
            <h3 v-if="item.couponType === 2">
              {{ item.discountPercent }}<span>折</span>
            </h3>
            <h3 v-if="Number(item.couponType) === 3">
              {{ item.discount }}
            </h3>
            <p v-if="item.basicConsume !== 0 && item.basicConsume !== null">
              满{{ item.basicConsume }}可用
            </p>
          </div>
          <div class="right">
            <h4>{{ item.name }}</h4>
            <p v-if="item.validDays">领取后{{ item.validDays }}小时内有效</p>
            <p v-else>
              {{ dayjs(Number(item.validStart)).format("YYYY-MM-DD") }} -
              {{ dayjs(Number(item.validEnd)).format("YYYY-MM-DD") }}
            </p>
            <p>适用范围：{{ ["全场通用", "指定产品可用"][item.scopeType] }}</p>
          </div>
        </div>
        <button @click="getCoupon(item.sendCouponId)">点击领取</button>
      </div>

      <i class="close" @click="showPopup = false"></i>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, defineProps, defineExpose } from "vue";
import { useRoute } from "vue-router";
import { receiveCoupon } from "@/api/video";
import dayjs from "dayjs";
import { showToast } from "vant";
const showPopup = ref(false);
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
  liveId: {
    type: Number,
  },
});
const route = useRoute();
let disableTime = null;
const getCoupon = async (sendCouponId) => {
  clearTimeout(disableTime);
  disableTime = setTimeout(async () => {
    let ret = await receiveCoupon({
      sendCouponId,
      liveMarketId: `${route.query.saleUserId ? route.query.saleUserId : ""}`,
      liveId: props.liveId,
    }).catch(() => {});
    if (ret.code === 0) {
      showToast("领取成功！");
      showPopup.value = false;
    }
  }, 1000);
};

defineExpose({
  showPopup,
});
</script>
<style scoped lang="scss">
.logo {
  width: 630px;
  height: 176px;
}
.close {
  display: block;
  width: 64px;
  height: 64px;
  background: url(../../../assets/images/close-icon1.png) no-repeat center;
  background-size: cover;
  margin: 100px auto 0;
}

.content-wrap {
  background-color: #fff;
  border-radius: 32px;
  padding: 32px;
  width: 526px;
  margin: 0 auto;
  text-align: left;
  .content {
    height: 200px;
    display: flex;
    align-items: center;
    background: url(../../../assets/images/discountCoupon/bg.png) no-repeat
      center;
    background-size: cover;
    .left {
      width: 192px;
      text-align: center;
      h4 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
      }
      h3 {
        color: rgb(240, 46, 24);
        text-align: center;
        font-size: 56px;
        font-weight: 600;
        line-height: 56px;
        margin-bottom: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        span {
          color: rgb(240, 46, 24);
          font-size: 24px;
          font-style: normal;
          font-weight: 500;
          line-height: 36px;
        }
      }
      p {
        color: rgba(240, 46, 24, 0.7);
        font-size: 24px;
        font-weight: 400;
        line-height: 36px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .right {
      width: calc(100% - 240px);
      margin-left: 24px;
      padding-right: 20px;
      h4 {
        color: rgb(51, 51, 51);
        font-size: 32px;
        font-style: normal;
        font-weight: 500;
        line-height: 48px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p {
        color: rgb(153, 153, 153);
        font-size: 24px;
        font-weight: 400;
        line-height: 36px;
        margin-top: 8px;
      }
    }
  }
  button {
    width: 526px;
    padding: 24px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 164px;
    background: var(----6, #f02e18);
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    margin-top: 32px;
  }
}
</style>
