<template>
    <div class="shop">
        <van-tabs sticky shrink @change="changeTab" v-model:active="active" swipeable :swipe-threshold="2">
            <van-tab title="通行证购买">
                <div class="list" @click="clear">
                    <pass-card
                        v-for="(item, index) in ticketPrices"
                        @choose="choose"
                        :key="index"
                        :info="item"
                        :isChoose="chooseTicket === item.type"
                    ></pass-card>
                </div>
            </van-tab>
            <van-tab title="通行证兑换">
                <div class="list">
                    <pass-card
                        v-for="(item, index) in ticketPrices"
                        @choose="choose"
                        balance
                        :key="index"
                        :info="item"
                        :isChoose="chooseTicket === item.type"
                    ></pass-card>
                </div>
            </van-tab>
            <van-tab title="藏品兑换">
                <div class="list">
                    <product-info isChoose></product-info>
                    <product-info></product-info>
                    <product-info></product-info>
                </div>
            </van-tab>
        </van-tabs>

        <div class="bottom" v-if="chooseTicket">
            <van-button color="#12131E" block v-if="active == 0" @click="buy">确认购买</van-button>
            <van-button type="primary" block v-else @click="$router.push('/exchange?ticket=' + chooseTicket)"
                >确认兑换</van-button
            >
        </div>

        <ticket-buy ref="buy" :info="ticketInfo"></ticket-buy>
    </div>
</template>

<script>
import PassCard from '../components/PassCard.vue';
import ProductInfo from '../components/product/productInfo.vue';
import TicketBuy from '../components/TicketBuy.vue';
export default {
    data() {
        return {
            active: 0,
            ticketPrices: [],
            chooseTicket: ''
        };
    },
    components: {
        PassCard,
        ProductInfo,
        TicketBuy
    },
    computed: {
        ticketInfo() {
            let info = [...this.ticketPrices].find(item => {
                return item.type === this.chooseTicket;
            });

            return info ? info : {};
        }
    },
    mounted() {
        this.$http
            .post('/ticketPrice/all', { size: 1000, query: { del: false } }, { body: 'json' })
            .then(res => {
                this.ticketPrices = res;
            })
            .catch(e => {
                console.log(e);
                this.$toast(e.error);
            });
        if (this.$route.query.active) {
            this.active = Number(this.$route.query.active);
        }
    },
    methods: {
        choose(type) {
            this.chooseTicket = type;
        },
        changeTab() {
            this.clear();
            this.$router.replace({
                query: {
                    active: this.active
                }
            });
        },
        clear() {
            this.chooseTicket = '';
        },
        buy() {
            this.$refs.buy.init();
        }
    }
};
</script>
<style lang="less" scoped>
.shop {
    position: relative;
    /deep/.van-tabs__nav {
        .flex();
        justify-content: space-between;
    }

    /deep/.van-swipe__track {
        min-height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 94px);
    }
}

.list {
    padding: 8px;
    .bottom(50px);
    min-height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 94px);
    box-sizing: border-box;
}

.bottom {
    padding: 9px 28px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    .fixedBottom(50px);
    background-color: @bg;
    z-index: 20;
}
</style>
