<template>
  <div class="coupon">
    <p class="coupon-face">
      <span class="coupon-amount">{{ value.faceValue }}</span>
      <span class="coupon-name">{{ value.name }}</span>
    </p>
    <p class="coupon-content">
      <span class="coupon-desc">{{ value.description }}</span>
      <span class="coupon-time">{{ value.couponValidTime }}</span>
    </p>
    <p class="coupon-action">
      <cr-button size="mini" type="primary" shape="circle" class="coupon-button" @click="goNavUrl"
        >去使用</cr-button
      >
    </p>
  </div>
</template>
<script>
export default {
  props: {
    value: Object
  },
  methods: {
    goNavUrl() {
      this.$emit('click');
    }
  }
};
</script>
<style lang="less" scoped>
.coupon {
  width: 327px;
  height: 97px;
  background-size: 100%;
  background-image: url('../../../assets/images/pay/couponCard.png');
  margin-right: @padding-sm;
  padding: @padding-unit;
  box-sizing: border-box;
  &-face {
    width: 90px;
    color: @red-light;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    span {
      display: block;
    }
  }
  &-amount {
    .text-size(30);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    word-break: break-all;
    text-align: center;
    font-family: PingFangSC-Medium;
    &::before {
      content: '¥';
      .text-size(12);
    }
  }
  &-name {
    .text-size(12);
  }
  &-content {
    width: 137px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    span {
      display: inline-block;
      width: 100%;
    }
  }
  &-desc {
    .text-size(14);
    color: @black;
    overflow: hidden;
    font-weight: bold;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  &-time {
    .text-size(12);
    display: flex;
    color: @gray-5;
    word-break: break-all;
    align-items: flex-start;
  }
  &-action {
    width: 90px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  &-button {
    width: 64px;
  }
}
</style>
