<template>
  <div :class="[Number(type) === 0 ? 'type0' : 'type1', 'content']">
    <div class="left">
      <h4>{{ item.name }}</h4>
      <p v-if="item.validDays">领取后{{ item.validDays }}小时内有效</p>
      <p v-else>
        {{ dayjs(Number(item.stime)).format("YYYY-MM-DD HH:mm") }} -
        {{ dayjs(Number(item.etime)).format("YYYY-MM-DD HH:mm") }}
      </p>
      <p>适用范围：{{ ["全场通用", "指定产品可用"][item.scopeType] }}</p>
    </div>
    <div class="right">
      <h4 v-if="Number(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="Number(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>
      <span class="tag">{{ typeWord[Number(item.couponType)] }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";
import dayjs from "dayjs";
defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
  type: {
    type: String,
    default: "0",
  },
});
const typeWord = ref({
  1: "体验券",
  2: "折扣券",
  3: "满减券",
});
</script>
<style scoped lang="scss">
.content {
  height: 200px;
  display: flex;
  align-items: center;

  &.type0 {
    background: url(../../../../assets/images/discountCoupon/bg1.png) no-repeat
      center;
    background-size: cover;
  }
  &.type1 {
    background: url(../../../../assets/images/discountCoupon/bg2.png) no-repeat
      center;
    background-size: cover;
  }

  .right {
    flex: 1;
    text-align: center;
    h3 {
      color: rgb(240, 46, 24);
      text-align: center;
      font-size: 42px;
      font-weight: 600;
      line-height: 56px;
      margin-bottom: 8px;
      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;
    }
    .tag {
      background: #f4f5f7;
      border-radius: 26px;
      font-size: 24px;
      color: #9aa4b6;
      padding: 4px 20px;
      line-height: 30px;
    }
  }
  .left {
    width: calc(100% - 310px);
    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;
    }
  }
}
.coupon_number,
.coupon_rmb {
  font-size: 42px;
}
</style>
