<template>
    <div class="coupon-item" :class="couponType" v-if="item">
        <div class="left">
            <p class="price">{{item.coupon_value_str}}</p>
            <p class="condition">{{item.use_rule}}</p>
        </div>
        <div class="right">
            <p class="name"><span>[{{item.catalog_name}}]</span> {{item.coupon_name}}</p>
            <p class="time">{{item.coupon_validity}}</p>
            <p class="coupon-info">
                <span>券号：{{item.coupon_code}}</span>
                <span>券ID：{{item.coupon_id}}</span>
            </p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'couponItem',
    data() {
        return {
            type: {
                '店铺券': 'shop',
                '活动券': 'activity',
                '运费券': 'freight'
            }
        };
    },
    props: ['item'],
    computed: {
        couponType() {
            if (this.item) {
                return `coupon-${this.type[this.item.catalog_name]}`;
            }
        }
    },
    methods: {
    },
    components: {
    }
}
</script>

<style lang="scss" scoped>
    .coupon-item {
        margin: 10px auto 0;
        width: 355px;
        height: 100px;

        p {
            margin: 0;
        }

        &:first-child {
            margin: 0 auto;
        }

        .left {
            width: 105px;
            float: left;
            text-align: center;
            display: flex;
            align-items: center;
            height: 100%;
            justify-content: center;
            flex-direction: column;
            padding-left: 7px;
            box-sizing: border-box;
        }

        .right {
            width: 240px;
            float: left;
            position: relative;
            padding-left: 10px;
            box-sizing: border-box;
        }

        .price {
            font-weight: bold;
            font-size: 36px;
        }

        .condition {
            font-size: 14px;
        }

        .name {
            font-size: 14px;
            color: #444;
            margin-top: 10px;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .time,
        .coupon-info {
            font-size: 13px;
            color: #B0B0B0;
        }

        .time {
            position: absolute;
            top: 45px;
        }

        .coupon-info {
            position: absolute;
            top: 74px;
        }
    }

    .coupon-shop {
        background: url(../../../static/images/coupon-2.png) no-repeat;
        background-size: contain;

        .price,
        .condition {
            color: #FFA72E;
        }

        .name {
            span {
                color: #FFA72E;
            }
        }
    }

    .coupon-activity {
        background: url(../../../static/images/coupon-3.png) no-repeat;
        background-size: contain;

        .price,
        .condition {
            color: #FC5960;
        }

        .name {
            span {
                color: #FC5960;
            }
        }
    }

    .coupon-freight {
        background: url(../../../static/images/coupon-4.png) no-repeat;
        background-size: contain;

        .price,
        .condition {
            color: #000;
        }

        .name {
            span {
                color: #000;
            }
        }
    }

    .gray {
        background: url(../../../static/images/coupon-1.png) no-repeat !important;
        background-size: contain !important;

        .price,
        .condition {
            color: #B0B0B0 !important;
        }

        .name {
            color: #a09f9f !important;

            span {
                color: #B0B0B0 !important;
            }
        }
    }
</style>