<template functional>
  <div
    class="coupon-item"
    :class="{ picked: props.coupon.pickupAble || props.coupon.picked }"
    @click="parent.pickupTd(props.index)"
  >
    <cr-image
      v-if="props.coupon.pickupAble || props.coupon.picked"
      src="@/assets/images/maxMember/stamp.png"
      class="coupon-item__stamp"
      width="1.28rem"
      height="1.2rem"
    />
    <div v-if="props.coupon.pickupAble || props.coupon.picked" class="coupon-item__mask" />
    <div class="coupon-item__left">
      <div class="coupon-item__left__value">
        <em><i>¥</i>{{ props.coupon.faceValue }}</em>
        <span>x{{ props.coupon.receiverLimitCount }}张</span>
      </div>
      <div class="coupon-item__left__name">{{ props.coupon.name }}</div>
    </div>
    <div class="coupon-item__right">
      {{ props.coupon.pickupAble || props.coupon.picked ? '已领取' : '领取' }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    index: Number,
    coupon: {
      type: Object,
      default() {
        return {};
      }
    }
  }
};
</script>

<style lang="less" scoped>
@coupon: ~'coupon-item';
@coupon-stamp: ~'@{coupon}__stamp';
@coupon-left: ~'@{coupon}__left';
@coupon-right: ~'@{coupon}__right';
.coupon-item {
  background: url('~@/assets/images/maxMember/coupon-bg.png') center center no-repeat;
  background-size: contain;
  width: 178px;
  height: 69px;
  margin: 0 3px;
  flex-shrink: 0;
  border-radius: @border-radius-md + 4;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  &__stamp {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
    display: none;
  }
  &__mask {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: fade(#ffffff, 60%);
    border-radius: @border-radius-md + 4;
  }
  &__left {
    flex: 1;
    padding: 0 @padding-unit;
    &__value {
      color: #0055dd;
      line-height: 17px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      i {
        font-style: normal;
        font-size: 12px;
      }
      em {
        font-style: normal;
        font-size: 24px;
      }
      span {
        font-size: 12px;
        background: linear-gradient(235deg, #6293ff 0%, #689eff 100%);
        border-radius: 40px 32px 32px 0px;
        color: @white;
        padding: 0 @padding-unit;
        margin-left: 2px;
      }
    }
    &__name {
      .text-size(12px);
      color: #0055dd;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
  &__right {
    width: 12px;
    .text-size(12px);
    font-weight: 500;
    color: #0055dd;
    padding: 0 @padding-sm - 1;
  }
  &.picked {
    .@{coupon-stamp} {
      display: block;
    }
  }
}
</style>
