<template>
    <div class="explore_content" :class="collections.length < 5 ? 'shop_list_one' : ''">
        <van-pull-refresh
            class="load_refresh"
            success-text="加载成功"
            success-duration="1000"
            v-model="isLoading"
            @refresh="onRefresh"
        >
            <!-- 搜素 -->
            <van-sticky :offset-top="0" class="explore_content_con">
                <div class="explore_content_top">
                    <div class="search" @click="$router.push('/productSearch')">
                        <img src="@assets/icon-sosuo.png" alt="" class="search_img" />
                        <span class="search_text">搜索你想要的</span>
                    </div>
                    <!-- 标签页展示切换 -->
                    <div class="label_tabs">
                        <div
                            :class="tabLabel == 'whole' ? 'label_selected' : 'label_not_selected'"
                            @click="tabLabelName('whole')"
                            class="label_tab"
                        >
                            全部
                        </div>
                        <div
                            :class="tabLabel == 'onSale' ? 'label_selected' : 'label_not_selected'"
                            @click="tabLabelName('onSale')"
                            class="label_tab"
                        >
                            出售中
                        </div>
                        <div
                            :class="tabLabel == 'showOnly' ? 'label_selected' : 'label_not_selected'"
                            @click="tabLabelName('showOnly')"
                            class="label_tab"
                        >
                            仅展示
                        </div>
                        <div
                            :class="tabLabel == 'notShown' ? 'label_selected' : 'label_not_selected'"
                            @click="tabLabelName('notShown')"
                            class="label_tab"
                        >
                            未展示
                        </div>
                    </div>
                </div>
            </van-sticky>
            <div class="data_display">
                <!-- 藏品展示 -->
                <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getAllCollections">
                    <div class="data_display_fanter">
                        <template v-for="(item, index) in collections" :key="index">
                            <asset-info :info="item"></asset-info>
                        </template>
                    </div>
                    <van-empty
                        v-if="empty || (collections.length === 0 && !loading)"
                        :description="'你还没有藏品哦～'"
                        :image="require(`@assets/storage_room_icon_01.png`)"
                    >
                        <van-button class="h44" size="small" color="#28B6FF" :round="true" to="/">去逛逛</van-button>
                    </van-empty>
                    <!-- </van-empty> -->
                </van-list>
            </div>
        </van-pull-refresh>
    </div>
</template>

<script>
import AssetInfo from '../components/asset/assetInfo.vue';
export default {
    components: {
        AssetInfo
    },
    data() {
        return {
            tabLabel: 'whole',
            page: 0,
            empty: false,
            loading: false,
            finished: false,
            // 藏品列表
            collections: [],
            isLoading: true
        };
    },
    computed: {
        status() {
            return 'NORMAL,TRADING,GIFTING,MINTING';
        }
    },
    mounted() {
        // this.getAllCollections();
    },
    methods: {
        // 获取全部库存藏品
        getAllCollections() {
            if (!this.isLogin) {
                this.empty = true;
                this.loading = false;
                return Promise.resolve();
            }
            if (this.page === 0) {
                this.collections = [];
            }
            this.finished = false;
            this.empty = false;
            let form = {
                page: this.page,
                size: 20,
                sort: 'createdAt,desc',
                query: {
                    userId: this.$store.state.userInfo.id,
                    ...this.beforeQuery()
                }
            };
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            return this.$http.post('/asset/all', form, { body: 'json' }).then(res => {
                if (res.first) {
                    this.collections = [];
                }

                this.collections = [...this.collections, ...res.content].filter(item => item.status === 'NORMAL'||item.status === 'GIFTING'||item.status === 'TRADING'||item.status === 'MINTING');
                this.empty = res.empty;
                this.loading = false;
                this.finished = res.last;
                if (!this.finished) {
                    this.page = this.page + 1;
                }
                this.$toast.clear();
            });
        },
        // 顶部数据类型切换
        tabLabelName(title) {
            this.tabLabel = title;
            this.page = 0;
            this.loading = true;
            this.getAllCollections();
        },
        beforeQuery() {
            let form = {};
            if (this.tabLabel == 'onSale') {
                form = {
                    ...form,
                    publicShow: true,
                    consignment: true
                };
            } else if (this.tabLabel == 'showOnly') {
                form = {
                    ...form,
                    publicShow: true,
                    consignment: false
                };
            } else if (this.tabLabel == 'notShown') {
                form = {
                    ...form,
                    publicShow: false,
                    consignment: false
                };
            } else {
                form = {
                    status: this.status
                };
            }
            return form;
        },
        onRefresh() {
            this.page = 0;
            this.getAllCollections().then(() => {
                this.isLoading = false;
            });
        }
    }
};
</script>
<style lang="less" scoped>
.load_refresh {
    background: #0f0f27;
}
/deep/ .van-button {
    width: 280px;
    height: 38px;
}
.explore_content {
    width: 100%;
    height: 100%;
    // margin-top: 44px;
    box-sizing: border-box;
    background: #0f0f27;
    .explore_content_top {
        padding: 12px 16px 20px;
        box-sizing: border-box;
        background: #0f0f27;
    }
    .search {
        width: 100%;
        height: 32px;
        background: #29293f;
        border-radius: 4px;
        padding: 5px 0 4px 33px;
        margin-bottom: 16px;
        box-sizing: border-box;
        position: relative;
        .search_img {
            width: 16px;
            height: 16px;
            position: absolute;
            left: 10px;
            top: 6px;
        }
        .search_text {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #5f646f;
        }
    }
    .label_tabs {
        display: flex;
        .label_tab {
            // width: 80px;
            flex: 1;
            height: 24px;
            background: #29293f;
            border-radius: 4px;
            margin-right: 16px;
            text-align: center;
            line-height: 24px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
        }
        .label_tab:last-child {
            margin-right: 0;
        }
        .label_selected {
            font-weight: 500;
            color: #28b6ff;
        }
        .label_not_selected {
            font-weight: 400;
            color: #5f646f;
        }
    }
    .data_display {
        padding: 0px 16px 16px;
        box-sizing: border-box;
        // background: #0F0F27;
        .data_display_fanter {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 50px;
        }
    }
}
.shop_list_one {
    height: 100%;
    position: absolute;
}
.explore_content_con {
    position: relative;
    z-index: 10;
}
</style>
