<template>
  <div class="coupon-list__item" :class="disabled ? 'disabled' : ''">
    <img :src="info.iconUrl" class="coupon-list__tag" />
    <img v-if="info.overlying" src="@/assets/images/createOrder/overlying.png" class="overlying" />
    <div class="coupon-list__left">
      <div class="coupon-list__amount">
        <span>{{ currency }}</span>
        <i>{{ info.faceValue }}</i>
      </div>
      <div class="coupon-list__limit">{{ info.limitDesc }}</div>
    </div>
    <div class="coupon-list__content">
      <div class="coupon-list__desc">{{ info.name }}</div>
      <div v-if="info.canNotUseDescription" class="coupon-list__tip">
        <img v-if="info.canNotUseDescriptionIconUrl" :src="info.canNotUseDescriptionIconUrl" />
        <p>{{ info.canNotUseDescription }}</p>
      </div>
      <div class="coupon-list__date">{{ info.couponValidTime }}</div>
    </div>
    <div v-if="!disabled" class="coupon-list__right">
      <cr-icon v-if="info.isSelect" type="checked" color="#ec3333" size="25px" />
      <cr-icon v-else type="circle" color="#dcdcdc" size="25px" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => ({})
    },
    // 类型
    type: {
      type: String,
      default: 'coupon' // coupon 可用优惠券 invalidCoupons 不可用优惠券
    },
    currency: {
      type: String,
      default: '¥'
    }
  },
  computed: {
    disabled() {
      return this.type === 'invalidCoupons';
    }
  }
};
</script>

<style lang="less" scoped>
.overlying {
  position: absolute;
  right: 0;
  top: 0;
  width: 46px;
  height: 32px;
}
.disabled {
  background: #f7f8fa !important;
  .coupon-list {
    &__left {
      color: #666666 !important;
    }
    &__limit {
      color: #666666 !important;
    }
    &__date {
      color: #999999 !important;
    }
  }
}
.coupon-list {
  &__item {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #ffece6;
    border-radius: 6px;
    margin-bottom: 10px;
  }
  &__tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 16px;
  }
  &__left {
    text-align: center;
    color: #ec3333;
    min-width: 93px;
  }
  &__amount {
    line-height: 36px;
    margin: 0;
    span {
      font-weight: 500;
      font-size: 16px;
    }
    i {
      font-weight: 500;
      font-style: normal;
      font-size: 30px;
      line-height: 22px;
    }
  }
  &__limit {
    .text-size(12);
    color: #ec3333;
    line-height: 17px;
    margin: 0;
  }
  &__content {
    flex-grow: 1;
  }
  &__desc {
    .text-size(14);
    line-height: 20px;
    font-weight: 500;
    color: #333;
    margin-bottom: 3px;
  }
  &__tip {
    .text-size(12);
    color: #666;
    margin-bottom: 3px;
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    img {
      width: 12px;
      height: 12px;
      margin-right: 4px;
    }
  }
  &__date {
    .text-size(12);
    color: #666666;
    line-height: 17px;
  }
  &__right {
    margin-right: 9px;
    .radio {
      width: 30px;
      height: 30px;
      display: block;
      transform: scale(0.8);
      background-color: red !important;
    }
  }
}
::v-deep .cr-icon {
  line-height: 28px !important;
}
</style>
