<template>
    <div class="follow">
        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
            <div class="top">
                <div class="name">我赞过的</div>
            </div>
            <van-tabs v-model:active="type" @change="change" :ellipsis="false" line-width="16" line-height="2">
                <van-tab
                    :title="item.label"
                    :name="item.type"
                    :key="index"
                    v-for="(item, index) in typeOptions"
                ></van-tab>
            </van-tabs>
        </van-sticky>
        <div class="list">
            <template v-for="(item, index) in showList" :key="index">
                <product-info v-model:info="list[item.index]" @update:info="init"></product-info>
            </template>
            <van-empty
                v-if="showList.length === 0"
                description="你还有没有点赞哦~"
                :image="require('../../assets/kong_png_dianzan.png')"
            />
        </div>
    </div>
</template>

<script>
import ProductInfo from '../../components/product/productInfo.vue';
export default {
    components: { ProductInfo },
    inject: ['bar'],
    data() {
        return {
            list: [],
            empty: false,
            type: '',
            typeOptions: [
                {
                    label: '全部',
                    type: ''
                },
                {
                    label: '收藏品',
                    type: 'DEFAULT'
                },
                {
                    label: '数字盲盒',
                    type: 'BLIND_BOX'
                }
            ]
        };
    },
    computed: {
        showList() {
            return [...this.list]
                .map((item, index) => {
                    return {
                        ...item,
                        index
                    };
                })
                .filter(item => {
                    return !this.type || this.type === item.type;
                });
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.empty = false;
            this.$http.get('/collection/myLikes').then(res => {
                this.list = res;
                this.empty = res.length === 0;
                this.$toast.clear();
            });
        },
        change() {
            this.$root.$el.scrollTop = 0;
        }
    }
};
</script>

<style lang="less" scoped>
.follow {
    background-color: #0f0f0f;
    padding-bottom: 100px;
}
.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: #ffffff;
        line-height: 30px;
    }
}
/deep/.van-tabs {
    .van-tabs__nav {
        padding-left: 16px;
    }
}
/deep/.van-tab {
    flex-grow: 0;
    padding: 0 0 0 0;
    margin-right: 50px;
}
</style>
