<template>
    <div class="list_display_order">
        <van-pull-refresh
            class="load_refresh"
            success-text="加载成功"
            success-duration="1000"
            v-model="isLoading"
            @refresh="onRefresh"
        >
            <div class="content">
                <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? barHeight : 0">
                    <!-- 标签页展示切换 -->
                    <van-tabs v-model:active="sort" line-width="32" line-height="2" @click-tab="changeTab">
                        <van-tab
                            :title="item.label"
                            :name="item.value"
                            :key="index"
                            v-for="(item, index) in selectOptions"
                        >
                        </van-tab>
                    </van-tabs>
                    <!-- <div class="my_list">
                        <div class="my_list_con">我的订单</div> -->
                    <!-- 标签页展示切换 -->
                    <!-- <div class="label_tabs">
                            <div
                                :class="tabLabel == 'whole' ? 'label_selected' : 'label_not_selected'"
                                @click="changeStatus('whole')"
                                class="label_tab"
                            >
                                全部
                            </div>
                            <div
                                :class="tabLabel == 'inTransaction' ? 'label_selected' : 'label_not_selected'"
                                @click="changeStatus('inTransaction')"
                                class="label_tab"
                            >
                                交易中
                            </div>
                            <div
                                :class="tabLabel == 'completed' ? 'label_selected' : 'label_not_selected'"
                                @click="changeStatus('completed')"
                                class="label_tab"
                            >
                                已完成
                            </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> -->
                    <!-- </div> -->
                </van-sticky>
                <van-list
                    class="list"
                    v-model:loading="loading"
                    :finished="finished"
                    :finished-text="empty ? '' : '- 更多藏品敬请期待 -'"
                    @load="getData"
                >
                    <div class="list_display">
                        <order-info @delFn="delFn" v-for="item in list" :key="item.id" :info="item"></order-info>
                    </div>
                    <van-empty
                        v-if="empty"
                        description="你还没有相关订单"
                        :image="require('@assets/dingdankong@3x.png')"
                    >
                        <!-- <van-button class="h44" size="small" color="#28B6FF" :round="true" to="/">去逛逛</van-button> -->
                        <div class="h44">这里将展示你在传奇数藏购买的数字藏品订单</div>
                    </van-empty>
                </van-list>
            </div>
        </van-pull-refresh>
    </div>
</template>

<script>
import OrderInfo from '../../components/order/OrderInfo.vue';
import list from '../../mixins/list';
export default {
    name: 'discover',
    inject: ['bar', 'barHeight'],
    mixins: [list],
    components: {
        OrderInfo
    },
    data() {
        return {
            tabLabel: 'whole',
            active: 'explore',
            stiky: null,
            status: 'CANCELLED,FINISH',
            list: [],
            selectOptions: [
                {
                    label: '全部',
                    value: 'whole'
                },
                // {
                //     label: '待付款',
                //     value: 'pendingPayment'
                // },
                {
                    label: '已付款',
                    value: 'paid'
                },
                {
                    label: '已取消',
                    value: 'cancelled'
                }
            ],
            // tabs: [
            //     {
            //         status: 'PROCESSING,FINISH',
            //         name: '全部'
            //     },
            //     {
            //         status: 'PROCESSING',
            //         name: '交易中'
            //     },
            //     {
            //         status: 'FINISH',
            //         name: '已完成'
            //     }
            // ],
            url: '/order/all',
            isLoading: true
        };
    },
    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();
        },
        changeTab(e) {
            switch (e.name) {
                case 'whole':
                    this.status = 'CANCELLED,FINISH';
                    break;
                case 'paid':
                    this.status = 'FINISH';
                    break;
                default:
                    this.status = 'CANCELLED';
            }
            this.$router.replace({
                path: '/orders',
                query: {
                    status: this.status
                    // type: this.type
                }
            });
            this.getData(true);
        },
        onRefresh() {
            this.getData(true).then(res => {
                this.isLoading = false;
            });
        }
        // changeActive(type) {
        //     this.$router.replace({
        //         path: '/orders',
        //         query: {
        //             status: this.status,
        //             type: type
        //         }
        //     });
        //     this.type = type;
        //     this.getData(true);
        // }
    }
};
</script>

<style lang="less" scoped>
.load_refresh {
    background: @bg;
}
/deep/ .van-button {
    width: 280px;
    height: 38px;
}
/deep/.van-list__finished-text{
    font-size: 12px;
}
/deep/ .van-button__content {
    font-weight: 500;
}
.content {
    width: 100%;
    height: 100%;
    // margin-top: 44px;
    background: @bg;
}
/deep/ .van-tabs__wrap {
    height: 36px;
    // padding: 12px 0px 15px;
    .van-tabs__nav--line {
        padding: 0 25px !important;
        border-top: none;
        background: #201B15;
        justify-content: space-between;
    }
    .van-tab {
        flex: 0 !important;
        margin-right: 0px !important;
        padding: 0px !important;
    }
    .van-tabs__line {
        bottom: 0;
        background: #d8d8d8;
    }
    .van-tab--active {
        font-size: 17px;
        font-weight: 500;
        color: #ffffff !important;
    }
    .van-tab--line {
        color: rgba(255, 255, 255, 0.5);
        font-size: 17px;
    }
}
.my_list {
    width: 100%;
    background: #15152d;
    padding: 12px 16px 10px 16px;
    box-sizing: border-box;
    .my_list_con {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 16px;
    }
    .label_tabs {
        width: 100%;
        display: flex;
        .label_tab {
            width: 108px;
            height: 24px;
            background: #29293f;
            border-radius: 4px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            line-height: 24px;
            text-align: center;
            margin-right: 16px;
        }
        .label_tab:last-child {
            margin-right: 0;
        }
        .label_selected {
            font-weight: 500;
            color: #28b6ff;
        }
        .label_not_selected {
            font-weight: 400;
            color: #939599;
        }
    }
}
.list_display {
    width: 100%;
    height: 100%;
    background: @bg;
    padding: 15px;
    box-sizing: border-box;
}
/deep/ .van-empty {
    padding-top: 68px;
}
/deep/ .van-tabs__nav--line {
    padding: 0;
    border: none;
}
/deep/ .van-tabs {
    background-color: #15152d;
}
.list {
    margin-bottom: 80px;
}
.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: var(--app-height);
}

/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;
}
.list_display_order {
    // padding-bottom: 40px;
    // box-sizing: border-box;
    background: @bg;
}
.h44 {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 20px;
    opacity: 0.3;
}
</style>
