<template>
    <div class="follow">
        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
            <div class="top">
                <div class="name">{{ pageName }}</div>
            </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 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 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: 'id,desc',
            type: '',
            sourceOptions: [
                {
                    label: '全部',
                    value: 'id,desc'
                },
                {
                    label: '最新',
                    value: 'createdAt,desc'
                },
                {
                    label: '最热',
                    value: 'likes,desc'
                },
                {
                    label: '价格',
                    value: ['price,desc', 'price,asc'],
                    type: 'select'
                }
            ],
            url: '/collection/all'
        };
    },
    computed: {
        pageName() {
            return this.getLabelName(this.type, this.typeOptions);
        }
    },
    mounted() {
        if (this.$route.query.type) {
            this.type = this.$route.query.type;
        }
    },
    methods: {
        beforeData() {
            return {
                query: {
                    type: this.type,
                    onShelf: true,
                    del: false
                },
                sort: this.sort
            };
        }
    }
};
</script>

<style lang="less" scoped>
.follow {
    background-color: #0f0f0f;
    padding-bottom: 100px;
}
.van-list {
    padding: 8px;
}
.top {
    background-color: #181818;
    padding: 0 16px;
    height: 50px;
    display: flex;
    align-items: center;
    .name {
        font-size: 20px;
        // font-weight: bold;
        color: @prim;
        line-height: 30px;
    }
}
// /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;
        }
    }
}
/deep/.van-tab--active {
    .tab {
        .van-icon-arrow-up {
            color: #646566;
        }
    }
    &.asc {
        .tab {
            .van-icon-arrow-up {
                color: @prim;
            }
            .van-icon-arrow-down {
                color: #646566;
            }
        }
    }
}
</style>
