<template>
    <div class="coupon" @click="choose" :class="{ notUse: notUse }">
        <div class="coupon-top">
            <div class="text1">{{ info.name }}</div>
            <div class="text2">
                <span>兑换券编码</span>
                <span>{{ info.id }}</span>
            </div>
        </div>
        <div class="coupon-bottom">
            <span>有效期至:{{ info.expiration }}</span>
            <span v-if="info.limited">规定作品可用</span>
        </div>
        <template v-if="needChoose && !notUse">
            <img v-if="chooseId === info.id" class="icon" src="@assets/icon_gouxuan_pre.png" alt="" />
            <img v-else class="icon" src="@assets/icon_gouxuan_huise.png" alt="" />
        </template>
        <div v-else-if="!notUse" class="btn" @click.prevent="goDetail">
            <span>立即使用</span>
        </div>

        <div class="tag" v-if="notUse">
            {{ info.used ? '已使用' : checkTime(this.info) ? '指定藏品使用' : '已过期' }}
        </div>
    </div>
</template>

<script>
import coupon from '../mixins/coupon';
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        chooseId: {
            type: Number,
            default: 0
        },
        needChoose: {
            type: Boolean,
            default: false
        },
        collectionId: {
            type: Number,
            default: 0
        }
    },
    mixins: [coupon],
    computed: {
        notUse() {
            return this.info.used || !this.checkTime(this.info) || !this.checkUse(this.info, this.collectionId);
        }
    },
    methods: {
        choose() {
            if (!this.notUse) {
                this.$emit('choose', this.info);
            }
        },
        goDetail() {
            this.$router.replace('/home');
        }
    }
};
</script>

<style lang="less" scoped>
.coupon {
    border-radius: 8px;
    background: linear-gradient(135deg, @prim, @warn);
    position: relative;
    padding: 0 10px;
    margin: 8px;
    display: inline-block;
    width: calc(100% - 36px);
    overflow: hidden;
    // width: 100%;
    &::after {
        content: '';
        position: absolute;
        top: 1px;
        right: 1px;
        left: 1px;
        bottom: 1px;
        border-radius: 8px;
        background-color: @bg;
        z-index: 0;
    }

    div {
        position: relative;
        z-index: 1;
    }

    .coupon-top {
        padding: 16px 0;

        .text1 {
            font-size: 18px;
            font-weight: bold;
            color: @text3;
            line-height: 24px;
            background: linear-gradient(0deg, @prim 0%, @warn 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .text2 {
            padding-top: 6px;
            font-size: 12px;
            line-height: 17px;
            color: @text3;
            span {
                &:last-child {
                    color: #fff;
                    margin-left: 6px;
                }
            }
        }
    }

    .coupon-bottom {
        border-top: 1px dashed #ebebeb50;
        color: @text3;
        font-size: 11px;
        line-height: 17px;
        padding: 9px 0;
        display: flex;
        justify-content: space-between;
        position: relative;
        &::before {
            content: '';
            position: absolute;
            background-color: @bg3;
            width: 16px;
            height: 16px;
            left: -18px;
            top: -8px;
            border-radius: 16px;
        }
        &::after {
            content: '';
            position: absolute;
            background-color: @bg3;
            width: 16px;
            height: 16px;
            right: -18px;
            top: -8px;
            border-radius: 16px;
        }
    }

    .icon {
        position: absolute;
        width: 24px;
        height: 24px;
        right: 10px;
        top: 30px;
        z-index: 3;
    }

    &.notUse {
        background: @bg;

        .coupon-top {
            .text1 {
                -webkit-background-clip: none;
                -webkit-text-fill-color: @text3;
            }
            .text2 {
                span {
                    &:last-child {
                        color: @text3;
                    }
                }
            }
        }
    }
}

.btn {
    position: absolute !important;
    right: 10px;
    top: 30px;
    width: 70px;
    height: 26px;
    font-size: 12px;
    color: @prim;
    line-height: 26px;
    text-align: center;
    border-radius: 16px;
    background: linear-gradient(135deg, @prim, @warn);
    &::after {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px;
        background-color: @bg;
        border-radius: 16px;
        z-index: 0;
        transition: backgroundColor ease-in-out 0.3s;
    }

    span {
        position: relative;
        z-index: 1;
    }

    &:active {
        &::after {
            background-color: transparent;
        }
        color: #fff;
    }
}

.tag {
    font-size: 11px;
    color: @text0;
    line-height: 18px;
    height: 18px;
    background: @text3;
    border-radius: 0px 8px 0px 8px;
    padding: 0 7px;
    position: absolute !important;
    right: 0;
    top: 0;
}
</style>
