<template>
   <div class="coupon_box">
       <p class="coupon_num">限量{{data.couponDetail.couponNum}}张</p>
       <p class="coupon_fee">￥ <b class="price">{{data.couponDetail.couponFee }}</b></p>
       <p class="coupon_time">有效期:<br>{{data.couponDetail.useStartTime}}<br>至<br>{{data.couponDetail.useEndTime}}</p>
       <p class="coupon_minimumFee">满{{data.couponDetail.minimumFee }}元使用</p>
       <p class="already_down" v-show="isRobDown">已抢完</p>
   </div>
</template> 

<script>
//import { mapState } from 'vuex' 
export default {
  name: "couponListCard",
  props: {
    data: { // 获取组建数据
      type: Object,
      default: {},
      required: true
    }
     
  },
  components: {

  },
  computed: {
    isRobDown() {
      
      if(this.data.couponDetail.couponNum-this.data.couponDetail.receive === 0) {
        return true;
      }
      return false;
         
    }
  },
  mounted() {
      
  },
  data: function() {
    return {
      name: "template"
    };
  },
  methods: {

  }
};
</script>
<style scoped lang='less'>
	@import "~@/common/less/variable.less";
	@nice-conpon-gray:#626262;
	@nice-conpon-green:#29C7C9;
   .coupon_box{
      width: 150px;
      height: 130px;
      background: @nice-bgwhite;
      position: relative;
      .coupon_num {
      	width: 100%;
      	height: 20px;
      	font-size: 8px;
      	color: @nice-conpon-gray;
      	line-height: 20px;
      	padding-top: 5px;
      }
      .coupon_fee {
      	width: 100%;
      	height: 20px;
      	font-size: 16px;
      	font-weight: 600;
      	color: @nice-conpon-green;
      	line-height: 29px;
      	.price {
          font-size: 29px;
      	}
      }
      .coupon_time {
      	width: 100%;
      	height: 50px;
      	font-size: 7px;
      	color: @nice-conpon-green;
      	line-height: 14px;
      	display: flex;
        margin-top: 10px;
      	justify-content: center;
        align-items: center;


      }
      .coupon_minimumFee {
      	width: 90px;
      	height: 14px;
      	background:@nice-conpon-green;
      	color: @nice-bgwhite;
      	font-size: 7px;
      	margin:5px auto; 
      	line-height: 15px; 
      	display: flex;
      	justify-content: center;
      	align-items: center;
      }
      .already_down {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(0,0,0,0.5);
        font-size:14px;
        color:@nice-bgwhite;
        text-align: center;
        line-height: 60px;
        position: absolute;
        top:0;
        right: 0;
        left: 0;
        bottom: 0;
        margin:auto; 
      }
  }
</style>