<template>
    <router-link :to="{ name: 'myCouponDetail', params: { cplId: item.cplId }}" tag="div" class="index-coupon-item">
        <div class="coupon-left">
            <!--优惠券类型-->
            <div class="coupon-type">
                <div class="coupon-type-left" :style="{'color':item.cplBgcolor}">{{item.cplValue}}</div>
                <div class="coupon-type-right">
                    <!--<div class="type-up">{{item.cplUnit}}</div>-->
                    <div class="type-down">{{item.cplUnit}}</div>
                </div>
            </div>
            <!--优惠券名称-->
            <div class="coupon-name"><span :style="{'color':item.cplBgcolor ,'border-color':item.cplBgcolor }"
                                           class="typer">{{item.cplTypeName}}</span>{{item.cplName}}
            </div>
            <!--优惠券有效期--->
            <div class="coupon-time">{{startTime}} 至 {{endTime}}</div>
        </div>
        <div class="coupon-right" :style="{'background':item.cplBgcolor}">
            <div class="use-now">立即使用<span class="mint-cell-allow-right"></span></div>
        </div>
    </router-link>
</template>
<script type="text/ecmascript-6">
    export default {
        data() {
            return {}
        },
        props: {
            item: {}
        },
        computed: {
            startTime(){
                return this.item.cplStartTime.substring(0, 11);
            },
            endTime(){
                return this.item.cplEndTime.substring(0, 11);
            }
        }
    }
</script>