<template>
    <div class="pass-info" :class="{ used: info.used || info.expired }">
        <van-image width="136" height="64" :src="ticketInfo.img" fit="cover" />
        <div class="pass-content">
            <div class="text1">{{ ticketInfo.label }}</div>
            <div class="flex1"></div>
            <div class="text2">编号:{{ info.id }}</div>
            <div class="text2">到期时间:{{ info.expireAt }}</div>
        </div>
        <img src="@assets/png-shiyong.png" v-if="info.used" alt="" class="status" />
        <img src="@assets/png-guoqi.png" v-if="info.expired" alt="" class="status" />
    </div>
</template>

<script>
import room from '../mixins/room.js';
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    mixins: [room],
    computed: {
        ticketInfo() {
            let info = [...this.requireTicketOptions].find(item => {
                return item.value === this.info.type;
            });
            return info ? info : {};
        }
    }
};
</script>

<style lang="less" scoped>
.pass-info {
    .flex();
    background-color: @bg2;
    border-radius: 4px;
    padding: 12px;
    position: relative;
    .pass-content {
        margin-left: 10px;
        .text1 {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
        }

        .text2 {
            font-size: 12px;
            color: #6a6d83;
            line-height: 17px;
        }
        .text2 + .text2 {
            margin-top: 2px;
        }
    }

    &.used {
        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(37, 40, 61, 0.2);
            z-index: 2;
        }
    }
}
.pass-info + .pass-info {
    margin-top: 16px;
}

.status {
    position: absolute;
    width: 51px;
    height: 46px;
    right: 0;
    top: 0;
    z-index: 3;
}
</style>
