<template>
    <div class="discover">
        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
            <div class="top">
                <div class="top-btn">
                    <div class="btn" :class="{ active: type === 'DEFAULT' }" @click="changeActive('DEFAULT')">
                        作品订单
                    </div>
                    <div class="btn" :class="{ active: type === 'BLIND_BOX' }" @click="changeActive('BLIND_BOX')">
                        盲盒订单
                    </div>
                </div>
                <!-- <div class="search">
                    <img src="@assets/svgs/search.svg" alt="" />
                </div> -->
            </div>

            <van-tabs v-model:active="status" :ellipsis="false" line-width="16" line-height="2" @click="changeStatus">
                <van-tab v-for="(item, index) in tabs" :key="index" :title="item.name" :name="item.status"></van-tab>
            </van-tabs>
        </van-sticky>

        <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <order-info @delFn="delFn" v-for="item in list" :key="item.id" :info="item"></order-info>
            <van-empty v-if="empty" description="你还没有订单哦~" :image="require('@assets/kong_png_wudingdan.png')" />
        </van-list>
    </div>
</template>

<script>
import OrderInfo from '../../components/order/OrderInfo.vue';
import list from '../../mixins/list';
export default {
    name: 'discover',
    inject: ['bar'],
    mixins: [list],
    components: {
        OrderInfo
    },
    data() {
        return {
            active: 'explore',
            stiky: null,
            status: 'PROCESSING,FINISH',
            type: 'DEFAULT',
            list: [],
            tabs: [
                {
                    status: 'PROCESSING,FINISH',
                    name: '全部'
                },
                {
                    status: 'PROCESSING',
                    name: '交易中'
                },
                {
                    status: 'FINISH',
                    name: '已完成'
                }
            ],
            url: '/order/all'
        };
    },
    mounted() {
        if (this.$route.query.status) {
            this.status = this.$route.query.status;
        }
    },
    methods: {
        beforeData() {
            return {
                query: {
                    userId: this.$store.state.userInfo.id,
                    status: this.status,
                    type: this.type,
                    hide: false,
                    del: false
                }
            };
        },
        delFn() {
            console.log('删除成功');
            this.getData(true);
            this.beforeData();
        },
        changeStatus(name) {
            this.$router.replace({
                path: '/orders',
                query: {
                    status: name,
                    type: this.type
                }
            });
            this.getData(true);
        },
        changeActive(type) {
            this.$router.replace({
                path: '/orders',
                query: {
                    status: this.status,
                    type: type
                }
            });
            this.type = type;
            this.getData(true);
        }
    }
};
</script>

<style lang="less" scoped>
.top {
    display: flex;
    padding: 10px 16px;
    background-color: @bg;
    align-items: center;
    .top-btn {
        flex-grow: 1;
        .flex();
        .btn {
            font-size: @font3;
            line-height: 26px;
            display: inline-block;
            vertical-align: text-bottom;

            &.active {
                color: @prim;
                font-size: @font3;
                font-weight: bold;
                line-height: 30px;
            }
        }

        .btn + .btn {
            margin-left: 30px;
        }
    }
}

.discover {
    background-color: @bg3;
    min-height: 100vh;
}

.list {
    padding-bottom: 100px;
}

/deep/.van-tabs__nav--line.van-tabs__nav--complete {
    border-color: @tabBorder;
}
.grid-img {
    display: block;
}
.van-grid {
    margin-top: 12px;
}
/deep/ .van-grid-item__content {
    padding: 14px 20px 16px;
}
/deep/ .van-grid-item__text {
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    margin-top: 4px;
}

.title {
    padding: 16px 20px 8px;
    color: @prim;
    font-size: 18px;
    font-weight: bold;
}

.box-list {
    // display: flex;
    // flex-wrap: wrap;
    padding: 0 8px;
}

.discover {
    padding-bottom: 50px;
}
.van-tabs {
    background-color: @bg;
}
</style>
