<template>
    <div class="follow">
        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
            <div class="top" v-if="!minterId">
                <div class="name">{{ title || pageName }}</div>
                <img v-if="!title" src="@assets/icon-sosuo.png" alt="" @click="goSearch" class="search" />
            </div>
            <van-tabs
                v-if="!title"
                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 selectOptions"
                >
                    <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 v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <template v-for="(item, index) in list" :key="index">
                <product-info v-model:info="list[index]" @update:info="init"></product-info>
            </template>

            <van-empty
                :image="require('@assets/kong_png_yongyoude  (1).png')"
                v-if="empty"
                description="没有任何藏品哦~"
            />
        </van-list>
    </div>
</template>

<script>
import ProductInfo from '../../components/product/productInfo.vue';
import product from '../../mixins/product';
import list from '../../mixins/list';
export default {
    components: { ProductInfo },
    inject: ['bar'],
    mixins: [product, list],
    data() {
        return {
            list: [],
            empty: false,
            sort: 'soldOut;id,desc',
            type: '',
            source: '',
            minterId: '',
            selectOptions: [
                {
                    label: '全部',
                    value: 'soldOut;id,desc'
                },
                {
                    label: '最新',
                    value: 'createdAt,desc'
                },
                {
                    label: '最热',
                    value: 'likes,desc'
                },
                {
                    label: '价格',
                    value: ['price,desc', 'price,asc'],
                    type: 'select'
                }
            ],
            url: '/collection/all',
            title: ''
        };
    },
    computed: {
        pageName() {
            return this.getLabelName(this.source, this.sourceOptions) || this.getLabelName(this.type, this.typeOptions);
        }
    },
    mounted() {
        if (this.$route.query.type) {
            this.type = this.$route.query.type;
        }

        if (this.$route.query.source) {
            this.source = this.$route.query.source;
        }

        if (this.$route.query.minterId) {
            this.minterId = this.$route.query.minterId;
        }

        if (this.$route.query.title) {
            this.title = this.$route.query.title;
        }

        if (this.$route.query.maxSize) {
            this.maxSize = Number(this.$route.query.maxSize);
        }
    },
    methods: {
        beforeData() {
            return {
                query: {
                    type: this.type,
                    source: this.source,
                    onShelf: true,
                    del: false,
                    minterId: this.minterId
                },
                sort: this.sortOptions[this.title] || this.sort
            };
        },
        goSearch() {
            let url = '/productSearch';
            if (this.type) {
                url += '?type=' + this.type;
            }
            if (this.source) {
                url += '?source=' + this.source;
            }
            this.$router.push(url);
        }
    }
};
</script>

<style lang="less" scoped>
.follow {
    background-color: @bg3;
    padding-bottom: 100px;
}
.van-list {
    padding: 8px;
}
.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;
    }
}

/deep/.van-tabs__nav--line.van-tabs__nav--complete {
    border-color: @tabBorder;
}
// /deep/.van-tab {
// flex-grow: 0;
// padding: 0 0 0 0;
// margin-right: 50px;

.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;
}
</style>
