<template>
    <div class="shop" @click="clear">
        <van-sticky>
            <div class="padding-safe-top">
                <van-tabs @change="changeTab" v-model:active="active" :swipe-threshold="2">
                    <van-tab title="通行证购买"> </van-tab>
                    <van-tab title="通行证兑换"> </van-tab>
                    <van-tab title="藏品兑换"> </van-tab>
                </van-tabs>
            </div>
        </van-sticky>

        <van-list
            @click="clear"
            v-model:loading="loading"
            :immediate-check="false"
            :finished="finished"
            finished-text=""
            @load="getData"
        >
            <template v-if="active === 2">
                <product-info
                    v-for="(item, index) in showList"
                    @choose="choose"
                    :key="index"
                    :info="item"
                    :isChoose="chooseTicket === item.id"
                ></product-info>
            </template>
            <template v-else>
                <pass-card
                    v-for="(item, index) in showList"
                    @choose="choose"
                    :key="index"
                    :info="item"
                    :isChoose="chooseTicket === item.type"
                    :balance="active === 1"
                ></pass-card>
            </template>
        </van-list>

        <div class="bottom" v-if="chooseTicket">
            <van-button type="primary" block v-if="active == 0" @click.stop="buy">确认购买</van-button>
            <van-button type="primary" block v-else @click.stop="goExchange">确认兑换</van-button>
        </div>

        <ticket-buy ref="buy" :info="ticketInfo" :buyType="buyType" @click.stop=""></ticket-buy>
    </div>
</template>

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

            return info ? info : {};
        },
        url() {
            if (this.active === 2) {
                return '/exchangeItem/all';
            } else {
                return '/ticketPrice/all';
            }
        },
        showList() {
            let list = [...this.list];
            if (this.active == 0 || this.active === 1) {
                return list.slice(0, 4);
            }
            return list;
        }
    },
    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);
        //     });
        this.checkLogin().then(() => {
            if (this.$route.query.active) {
                this.active = Number(this.$route.query.active);
                if (this.active == 2) {
                    this.listKey = 'content';
                } else {
                    this.listKey = '';
                }
            }
            this.$nextTick(() => {
                this.getData(true);
            });
        });

        if (this.$route.query.type) {
            this.buyType = true;
        } else {
            this.buyType = false;
        }
    },
    methods: {
        goExchange() {
            if (this.active === 1) {
                this.$router.push('/exchange?ticket=' + this.chooseTicket + '&buyType=' + this.buyType);
            } else {
                // this.$router.push(
                //     '/exchangeCollection?exchangeItemId=' + this.chooseTicket + '&buyType=' + this.buyType
                // );
                this.wait();
            }
        },
        beforeData() {
            return {
                query: { del: false }
            };
        },
        choose(type) {
            this.chooseTicket = type;
        },
        changeTab() {
            this.checkLogin().then(() => {
                this.clear();
                this.$router.replace({
                    query: {
                        ...this.$route.query,
                        active: this.active
                    }
                });
                if (this.active == 2) {
                    this.listKey = 'content';
                } else {
                    this.listKey = '';
                }
                this.getData(true);
            });
        },
        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);
    // }
}

.van-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>
