<template>
    <!-- <TopNavigation/> -->
    <div class="content_farter">
        <van-pull-refresh
            class="load_refresh"
            success-text="加载成功"
            success-duration="1000"
            v-model="isLoading"
            @refresh="onRefresh"
        >
            <div class="content">
                <van-sticky :offset-top="bar.value && bar.value.show ? barHeight : 0">
                    <div class="content_top">我喜欢的</div>
                </van-sticky>
                <div class="current_recommendation">
                    <template v-for="(item, index) in showList" :key="index">
                        <CollectionList v-model:info="list[item.index]" @update:info="init"></CollectionList>
                    </template>
                </div>
                <van-empty
                    v-if="showList.length === 0"
                    description="你还没有喜欢的藏品哦～"
                    :image="require(`@assets/storage_room_icon_01.png`)"
                >
                </van-empty>
                <div class="go_stroll" v-if="showList.length === 0">
                    <van-button class="h44" size="small" color="#28B6FF" :round="true" to="/">去逛逛</van-button>
                </div>
            </div>
        </van-pull-refresh>
    </div>
</template>

<script>
import CollectionList from '../../components/CollectionList.vue';
import product from '../../mixins/product';
// import TopNavigation from "../../components/TopNavigation.vue"
// import ProductInfo from '../../components/product/productInfo.vue';
export default {
    mixins: [product],
    inject: ['bar', 'barHeight'],
    components: {
        CollectionList
        // TopNavigation,
        // ProductInfo
    },
    data() {
        return {
            list: [],
            empty: false,
            isLoading: true
        };
    },
    computed: {
        showList() {
            return [...this.list].map((item, index) => {
                return {
                    ...item,
                    index
                };
            });
        }
    },
    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;
        },
        onRefresh() {
            Promise.all([this.init()]).then(res => {
                this.isLoading = false;
            });
        }
    }
};
</script>

<style lang="less" scoped>
.content_farter {
    background: #0a0a1b;
}
.load_refresh {
    background: #0a0a1b;
}
.go_stroll {
    width: 100%;
    padding: 0px 48px;
    box-sizing: border-box;
}
/deep/ .van-button {
    width: 100%;
    height: 38px;
    font-weight: 500;
    font-size: 16px;
}
.content {
    width: 100%;
    // height: 100%;
    background: #0a0a1b;
    .content_top {
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
        background: #15152d;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
    }
    .current_recommendation {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 16px;
        box-sizing: border-box;
    }
}
// .shop_list_one{
//     height: 100%;
//     position: absolute;
// }
</style>
