<template>
    <div class="card" :class="{ prim: isChoose }" @click.stop="choose">
        <div class="title" :style="{ color: ticketInfo.color }">{{ ticketInfo.label }}</div>
        <div class="img">
            <van-image width="100%" fit="scale-down" :src="ticketInfo.icon" />
        </div>
        <div class="balance" v-if="balance">
            <span>{{ info.price }}</span>
            <span>个绿洲核</span>
        </div>
        <div class="price" v-else>
            <span>¥</span>
            <span>{{ info.price }}</span>
        </div>
        <img src="@assets/png_xuanzhong.png" v-if="isChoose" class="choose-icon" alt="" />
        <img src="@assets/png-weigouxuan.png" v-else class="choose-icon" alt="" />
    </div>
</template>

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

<style lang="less" scoped>
.card {
    background: @bg2;
    border-radius: 4px;
    padding: 10px 0 0;
    width: calc(50vw - 24px);
    position: relative;
    display: inline-block;
    margin: 8px;
    overflow: hidden;
    .choose-icon {
        width: 36px;
        height: 36px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 4;
    }
}
.img {
    padding: 0 10px;
}

.title {
    font-size: 14px;
    color: #ffa371;
    line-height: 24px;
    padding: 0 12px 12px;
}

.price {
    .flex();
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    height: 24px;
    span {
        &:first-child {
            font-size: 14px;
            font-weight: normal;
            margin-right: 2px;
        }
    }
}

.balance {
    .flex();
    justify-content: center;
    font-size: 12px;
    color: #ffffff;
    line-height: 24px;
    span {
        &:first-child {
            font-size: 16px;
            font-weight: bold;
            margin-right: 2px;
        }
    }
}

.prim {
    .price {
        background: linear-gradient(225deg, @prim2 0%, @prim 100%);
        color: #1a1c2b;
    }

    .balance {
        background: linear-gradient(225deg, #10f7ee 0%, #f6abf0 100%);
        color: #1a1c2b;
    }

    &::before {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px;
        background-color: #25283d;
        z-index: 1;
        border-radius: 4px;
    }

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        background: linear-gradient(225deg, @prim2 0%, @prim 100%);
    }

    & > div {
        z-index: 2;
        position: relative;
    }
}
</style>
