<template>
    <div class="pass">
        <van-sticky :offset-top="barHeight">
            <van-tabs v-model:active="active" @change="changeTab" shrink line-width="34" line-height="2">
                <van-tab title="未使用"> </van-tab>
                <van-tab title="已使用"></van-tab>
                <van-tab title="已过期"></van-tab>
            </van-tabs>
        </van-sticky>
        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <pass-info v-for="(item, index) in list" :key="index" :info="item"></pass-info>
            <van-empty
                v-if="empty"
                description="当前没有通行证哦～"
                :image="require('../../assets/kong-pimg-tongxingzheng.png')"
            />
        </van-list>
    </div>
</template>

<script>
import list from '../../mixins/list.js';
import passInfo from '../../components/PassInfo.vue';
export default {
    data() {
        return {
            active: 0,
            url: '/userTicket/my'
        };
    },
    inject: ['barHeight'],
    mixins: [list],
    components: { passInfo },
    mounted() {
        // this.emitter.emit('setRightBar', { text: '明细', path: '/userPassList' });
    },
    methods: {
        beforeData() {
            if (this.active === 0) {
                return {
                    query: {
                        used: false,
                        expired: false,
                        del: false
                    }
                };
            } else if (this.active == 1) {
                return {
                    query: {
                        used: true,
                        expired: false,
                        del: false
                    }
                };
            } else {
                return {
                    query: {
                        used: false,
                        expired: true,
                        del: false
                    }
                };
            }
        },
        changeTab() {
            this.$nextTick(() => {
                this.getData(true);
            });
        }
    }
};
</script>
<style lang="less" scoped>
/deep/.van-tabs__nav {
    padding: 0 0 14px;
    justify-content: space-between;
}
/deep/.van-tab {
    padding: 0 16px;
}
.van-list {
    padding: 16px;
}
</style>
