<template>
    <van-pull-refresh
        success-text="加载成功"
        success-duration="500"
        class="follow"
        v-model="isLoading"
        :head-height="80"
        @refresh="onRefresh"
    >
        <van-sticky ref="top" :offset-top="46">
            <div class="top">
                <div class="name">艺术机构</div>
                <div class="search" @click="$router.push('/' + this.$route.params.companyId + '/creatorSearch')">
                    <img src="@assets/icon-sosuo.png" alt="" />
                    <span>搜索你要的精彩</span>
                </div>
            </div>
        </van-sticky>

        <swiper pagination :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }" v-if="banners.length > 0">
            <swiper-slide v-for="item in banners" :key="item.id">
                <van-image radius="10" height="37.3vw" :src="item.pic" fit="cover" />
            </swiper-slide>
        </swiper>

        <van-sticky :offset-top="96">
            <van-tabs class="dark" v-model:active="sort" 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-small v-model:info="list[index]"></creator-small>
            </template>
            <van-empty :image="require('@assets/kong_black.png')" v-if="empty" description="没有任何藏品哦~" />
        </van-list>
    </van-pull-refresh>
</template>

<script>
import list from '../../mixins/list';
import { Swiper, SwiperSlide } from 'swiper/vue';

import 'swiper/swiper.min.css';
import 'swiper/swiper-bundle.min.css';

import SwiperCore, { Pagination, Autoplay } from 'swiper';
import CreatorSmall from '../../components/creator/CreatorSmall.vue';

// install Swiper modules
SwiperCore.use([Pagination, Autoplay]);
export default {
    name: 'creatorList',
    components: { Swiper, SwiperSlide, CreatorSmall },
    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,
            banners: []
        };
    },
    mounted() {
        this.getBanner();
    },
    methods: {
        beforeData() {
            return {
                query: { minter: true },
                sort: this.sort
            };
        },
        getBanner() {
            return this.$http
                .post(
                    '/banner/all',
                    {
                        query: {
                            type: 'MINTER',
                            del: false
                        },
                        sort: 'sort,asc;createdAt,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.banners = res.content;
                    this.$toast.clear();
                    if (this.swiperRef) {
                        this.swiperRef.update();
                    }
                });
        },
        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(['creatorList']);
        } else {
            this.scrollTop = 0;
            this.setKeeps(['creatorList'], false);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
.follow {
    background-color: #272b2e;
    padding-bottom: 100px;
}
/deep/.van-tabs__nav--line.van-tabs__nav--complete {
    border-color: #303133;
    border-width: 2px;
}
.top {
    background-color: #222426;
    padding: 0 16px;
    height: 50px;
    display: flex;
    align-items: center;
    position: relative;
    .flex();
    .name {
        font-size: @font3;
        font-weight: bold;
        color: #fff;
        line-height: 30px;
    }
    .search {
        .flex();
        flex-grow: 1;
        background: #373b3e;
        border-radius: 21px;
        margin-left: 14px;
        height: 32px;
        padding: 0 20px;
        img {
            width: 16px;
            height: 16px;
        }
        span {
            font-size: 14px;
            color: @text3;
            line-height: 24px;
            margin-left: 10px;
        }
    }
}
.tab {
    position: relative;
    padding-right: 14px;
    .van-icon {
        position: absolute;
        right: 0;

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

        &.van-icon-arrow-up {
            bottom: 8px;
        }
    }
}
.list {
    padding: 8px;
}
::v-deep(.mySwiper) {
    background-color: #222426;
    // height: 255px;
    padding: 16px 0;
    margin: 0 16px;
    box-sizing: border-box;
    // padding-bottom: 35px;

    .swiper-pagination {
        bottom: 30px;
    }

    .swiper-pagination-bullet {
        width: 5px;
        height: 5px;
        border-radius: 5px;
        background: @text3;
        margin: 0 4px;
        opacity: 1;
    }

    .swiper-pagination-bullet-active {
        background: @prim;
    }
}

/deep/.van-sticky--fixed {
    background-color: #222426;

    &:after {
        content: '';
        background-color: #222426;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -4px;
        height: 5px;
    }
}

.van-tabs.dark {
    background-color: #222426;
}

/deep/.van-tab {
    flex-grow: 1 !important;
    margin-right: 0 !important;
    background-color: #222426;
}
</style>
