<!-- 优惠券图标 -->
<template>
  <div class="container">
    <div class="icon icon1" v-if="props.item.couponType == 1">
      <div class="top">
        <span class="i">￥</span>
        <span class="num">{{ props.item.discountAmount }}</span>
      </div>
      <div class="intro">
        <span class="t">满{{ props.item.fullAmount }}可用</span>
      </div>
    </div>
    <div class="icon icon2" v-if="props.item.couponType == 2">
      <div class="top">
        <span class="i">{{ props.item.discountNum }}件</span>
        <span class="num">商品兑换</span>
      </div>
      <div class="intro">
        <span class="t">满{{ props.item.fullAmount }}可用</span>
      </div>
    </div>
    <div class="icon icon3" v-if="props.item.couponType == 3">
      <div class="top">
        <span class="num">{{ props.item.discountRate / 10 }}折</span>
      </div>
      <div class="intro">
        <span class="t">满{{ props.item.fullAmount }}可用</span>
      </div>
    </div>
    <div class="icon icon2" v-if="props.item.couponType == 4">
      <div class="top">
        <span class="i">第二件</span>
        <span class="num">半价券</span>
      </div>
    </div>
    <div class="icon icon2" v-if="props.item.couponType == 6">
      <div class="top">
        <span class="i">买一送</span>
        <span class="num">一券</span>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  item: {
    type: Object,
    default: {}
  }
});
</script>

<style scoped lang="scss">
$color: #ff1c1c;

.container {
  width: 100%;
  height: 100%;

  .icon {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &.icon1 {
      .top {
        .i {
          color: $color;
          font-size: 24upx;
          font-weight: bold;
        }

        .num {
          color: $color;
          font-size: 72upx;
          font-weight: bold;
        }
      }
    }

    &.icon2 {
      .top {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .i {
          color: $color;
          font-size: 34upx;
          font-weight: bold;
        }

        .num {
          color: $color;
          font-size: 34upx;
          font-weight: bold;
        }
      }
    }

    &.icon3 {
      .top {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .i {
          color: $color;
          font-size: 34upx;
          font-weight: bold;
        }

        .num {
          color: $color;
          font-size: 52upx;
          font-weight: bold;
        }
      }
    }

    .intro {
      display: flex;
      justify-content: center;

      .t {
        font-size: 22upx;
        color: #999;
      }
    }
  }
}
</style>
