<template>
    <div class="follow">
        <van-sticky :offset-top="bar.value.show ? 46 : 0">
            <div class="top">
                <div class="name">我的粉丝</div>
            </div>
        </van-sticky>
        <div class="list">
            <template v-for="(item, index) in list" :key="index">
                <creator-info isFollow v-model:info="list[index]"></creator-info>
            </template>
            <van-empty
                v-if="empty"
                description="你还有没有粉丝哦~"
                :image="require('../../assets/kong_png_fensi.png')"
            />
        </div>
    </div>
</template>

<script>
import CreatorInfo from '../../components/creator/CreatorInfo.vue';
export default {
    components: { CreatorInfo },
    inject: ['bar'],
    data() {
        return {
            list: [],
            empty: false
        };
    },
    mounted() {
        this.$toast.loading({
            message: '加载中...',
            forbidClick: true
        });
        this.empty = false;
        this.$http.get('/user/myFollowers').then(res => {
            this.list = res;
            this.empty = res.length === 0;
            this.$toast.clear();
        });
    }
};
</script>

<style lang="less" scoped>
.follow {
    background-color: #0f0f0f;
}
.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;
    }
}
</style>
