<template>
    <van-pull-refresh
        success-text="加载成功"
        success-duration="1000"
        class="discover"
        v-model="isLoading"
        :head-height="80"
        @refresh="onRefresh"
        pageType="light"
    >
        <van-sticky ref="top" :offset-top="barHeight">
            <div class="top">
                <div class="top-btn">
                    <div class="btn" :class="{ active: type === 'ENTITY' }" @click="changeActive('ENTITY')">
                        藏传文玩拍卖
                    </div>
                    <div class="btn" :class="{ active: type === 'NFT' }" @click="changeActive('NFT')">数字艺术拍卖</div>
                </div>
            </div>

            <van-tabs
                v-model:active="paymentType"
                :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>

            <!-- <div class="btns">
                <div class="btn-item" v-for="(item, index) in statusBtns" :key="index">{{ item.name }}</div>
            </div> -->
        </van-sticky>

        <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <order-info-auction
                @delFn="delFn"
                v-for="(item, index) in list"
                :key="item.id"
                v-model:info="list[index]"
                :isOrder="paymentType === 'FIXED_PRICE'"
            ></order-info-auction>
            <van-empty v-if="empty" description="你还没有订单哦~" :image="require('@assets/kong.png')" />
        </van-list>
    </van-pull-refresh>
</template>

<script>
import OrderInfoAuction from '../../components/order/OrderInfoAuction.vue';
import list from '../../mixins/list';
export default {
    name: 'discover',
    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll', 'barHeight'],
    mixins: [list],
    components: {
        OrderInfoAuction
    },
    data() {
        return {
            active: 'explore',
            stiky: null,
            status: 'DELIVERY,PENDING,RECEIVE,AIR_DROP,FINISH',
            type: 'ENTITY',
            list: [],
            paymentType: 'FIXED_PRICE',
            tabs: [
                {
                    status: 'FIXED_PRICE',
                    name: '一口价订单'
                },
                {
                    status: 'BIDDER',
                    name: '竞拍订单'
                }
            ],
            statusBtns: [
                {
                    status: 'AIR_DROP,',
                    name: '全部'
                },
                {
                    status: 'AIR_DROP,',
                    name: '待发货'
                },
                {
                    status: 'AIR_DROP,',
                    name: '待收货'
                },
                {
                    status: 'AIR_DROP,',
                    name: '已完成'
                }
            ],
            scrollTop: 0
        };
    },
    mounted() {
        if (this.$route.query.status) {
            this.status = this.$route.query.status;
        }
    },
    computed: {
        url() {
            if (this.paymentType === 'FIXED_PRICE') {
                return '/auctionOrder/all';
            } else {
                return '/auctionRecord/userRecord';
            }
        }
    },
    methods: {
        beforeData() {
            if (this.paymentType === 'FIXED_PRICE') {
                return {
                    query: {
                        userId: this.$store.state.userInfo.id,
                        paymentType: this.paymentType,
                        source: this.type === 'ENTITY' ? 'OFFICIAL' : 'TRANSFER'
                        // hide: false,
                        // del: false
                    },
                    sort: 'id,desc'
                };
            } else {
                return {
                    type: this.type
                };
            }
        },
        getData(isFirst = false, scrollTop = 0) {
            if (isFirst) {
                this.page = 0;
                this.list = [];
                this.$root.$el.scrollTop = scrollTop;
            }

            this.loading = true;
            this.finished = false;
            this.empty = false;
            let data = { page: this.page, size: this.size, sort: 'createdAt,desc' };
            if (this.beforeData) {
                data = {
                    ...data,
                    ...this.beforeData()
                };
            }
            let url = this.url;

            if (this.paymentType !== 'FIXED_PRICE') {
                data = {};
                url += '?type=' + this.type;
            }

            return this.$http.post(url, data, { body: 'json' }).then(res => {
                if (this.paymentType !== 'FIXED_PRICE') {
                    this.list = res;
                    this.empty = res.length === 0;
                    this.finished = true;
                    this.loading = false;
                } else {
                    if (res.first) {
                        this.list = [];
                    }
                    this.list = [...this.list, ...res.content];
                    this.empty = res.empty;
                    this.loading = false;
                    this.finished = res.last;
                    if (!this.finished) {
                        this.page = this.page + 1;
                    }
                    this.totalElements = Number(res.totalElements);
                }
            });
        },
        delFn() {
            console.log('删除成功');
            this.getData(true);
            this.beforeData();
        },
        changeStatus(name) {
            this.$router.replace({
                path: '/' + this.$route.params.companyId + '/auctionOrders',
                query: {
                    status: name,
                    type: this.type
                }
            });
            this.getData(true);
        },
        changeActive(type) {
            this.$router.replace({
                path: '/' + this.$route.params.companyId + '/auctionOrders',
                query: {
                    status: this.status,
                    type: type
                }
            });
            this.type = type;
            this.getData(true);
        },
        onRefresh() {
            this.getData(true).then(() => {
                this.isLoading = false;
            });
        }
    },
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop);
        });
    },
    beforeRouteLeave(to, from, next) {
        if (!to.meta.menuPage) {
            this.scrollTop = this.scrollWrapper.scrollTop;
            this.setKeeps(['index', 'discover']);
        } else {
            this.scrollTop = 0;
            this.setKeeps(['index', 'discover'], false);
        }
        next();
    }
};
</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;
            color: #939599;

            &.active {
                color: #000;
                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-tab {
    margin-right: 30px;
}
/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;
}

.btns {
    background-color: #fff;
    padding: 10px 16px 16px;
    .flex();

    .btn-item {
        height: 22px;
        background: #f5f7fa;
        border-radius: 12px;
        font-size: 12px;
        color: #939599;
        line-height: 22px;
        width: calc(25% - 9px);
        text-align: center;
    }
    .btn-item + .btn-item {
        margin-left: 16px;
    }
}
</style>
