<template>
    <div class="page">
        <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <template v-for="(item, index) in useList" :key="index">
                <coupon-info needChoose :collectionId="collectionId" :info="item" @choose="choose"></coupon-info>
            </template>

            <van-divider>不可用兑换券</van-divider>

            <template v-for="(item, index) in notUseList" :key="index">
                <coupon-info needChoose :collectionId="collectionId" :info="item" @choose="choose"></coupon-info>
            </template>

            <van-empty v-if="empty" description="暂无兑换券哦~" />
        </van-list>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import CouponInfo from '../../components/CouponInfo.vue';
import list from '../../mixins/list';
import coupon from '../../mixins/coupon';
export default {
    components: { CouponInfo },
    name: 'couponList',
    mixins: [list, coupon],
    data() {
        return {
            url: '/userCoupon/all',
            list: [],
            empty: false,
            chooseId: 0,
            size: 40,
            collectionId: 0
        };
    },
    computed: {
        ...mapState(['couponInfo']),
        useList() {
            return [...this.list].filter(item => {
                return this.checkTime(item) && this.checkUse(item, this.collectionId);
            });
        },
        notUseList() {
            return [...this.list].filter(item => {
                return !this.checkTime(item) || !this.checkUse(item, this.collectionId);
            });
        }
    },
    mounted() {
        if (this.$route.query.collectionId) {
            this.collectionId = Number(this.$route.query.collectionId);
        }
    },
    methods: {
        choose(info) {
            this.chooseId = info.id;
            this.$store.commit('setCouponInfo', info);
            this.$router.go(-1);
        },
        beforeData() {
            return {
                query: { userId: this.$store.state.userInfo.id, used: false }
            };
        }
    }
};
</script>

<style lang="less" scoped>
.list {
    padding: 24px 8px 50px;
}

.page {
    background-color: @bg3;
}

.van-divider {
    color: #ebebeb50;
    border-color: #ebebeb50;
    margin: 32px 8px 8px;
}
</style>
