<template>
    <div class="follow">
        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
            <div class="top">
                <div class="name">铸造者</div>
                <img src="@assets/icon-sosuo.png" @click="$router.push('/creatorSearch')" alt="" class="search" />
            </div>
            <van-tabs v-model:active="sort" :ellipsis="false" line-width="16" line-height="2" @change="getData(true)">
                <van-tab
                    :title="item.label"
                    :name="
                        item.type === 'select' ? (sort === item.value[0] ? item.value[1] : item.value[0]) : item.value
                    "
                    :title-class="item.type === 'select' && sort === item.value[0] ? '' : 'asc'"
                    :key="index"
                    v-for="(item, index) in sourceOptions"
                >
                    <template v-if="item.type === 'select'" #title>
                        <div class="tab">
                            <span>{{ item.label }}</span>
                            <van-icon size="8" name="arrow-up" />
                            <van-icon size="8" name="arrow-down" />
                        </div>
                    </template>
                </van-tab>
            </van-tabs>
        </van-sticky>
        <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <template v-for="(item, index) in list" :key="index">
                <creator-info v-model:info="list[index]"></creator-info>
            </template>
            <van-empty
                :image="require('@assets/kong_png_yongyoude  (1).png')"
                v-if="empty"
                description="没有任何藏品哦~"
            />
        </van-list>
    </div>
</template>

<script>
import CreatorInfo from '../../components/creator/CreatorInfo.vue';
import list from '../../mixins/list';
export default {
    name: 'creatorList',
    components: { CreatorInfo },
    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
    mixins: [list],
    data() {
        return {
            list: [],
            empty: false,
            sort: 'id,desc',
            sourceOptions: [
                {
                    label: '全部',
                    value: 'id,desc'
                },
                {
                    label: '最新',
                    value: 'createdAt,desc'
                },
                {
                    label: '最热',
                    value: 'followers,desc'
                },
                {
                    label: '销量',
                    value: ['sales,desc', 'sales,asc'],
                    type: 'select'
                }
            ],
            url: '/user/all',
            scrollTop: 0
        };
    },
    methods: {
        beforeData() {
            return {
                query: { minter: true },
                sort: this.sort
            };
        }
    },
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop);
        });
    },
    beforeRouteLeave(to, from, next) {
        if (!to.meta.menuPage) {
            this.scrollTop = this.scrollWrapper.value.scrollTop;
            this.setKeeps(['creatorList']);
        } else {
            this.scrollTop = 0;
            this.setKeeps(['creatorList'], false);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
.follow {
    background-color: @bg3;
    padding-bottom: 100px;
}
/deep/.van-tabs__nav--line.van-tabs__nav--complete {
    border-color: @tabBorder;
}
.top {
    background-color: @bg;
    padding: 0 16px;
    height: 50px;
    display: flex;
    align-items: center;
    position: relative;
    .name {
        font-size: @font3;
        font-weight: bold;
        color: @text0;
        line-height: 30px;
    }
    .search {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 16px;
        top: 13px;
    }
}
.tab {
    position: relative;
    padding-right: 14px;
    .van-icon {
        position: absolute;
        right: 0;

        &.van-icon-arrow-down {
            top: 8px;
        }

        &.van-icon-arrow-up {
            bottom: 8px;
        }
    }
}

.van-tabs {
    background-color: @bg;
}
.info {
    background-color: @bg;

    /deep/.van-button--mini {
        background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @prim, @warn) !important;

        &.follow {
            background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3) !important;
        }
    }
}
</style>
