<template>
    <div class="follow">
        <van-sticky :offset-top="barHeight">
            <van-tabs @change="init" v-model:active="pageType" line-width="34" line-height="2" color="#ffffff">
                <van-tab :title="'关注 ' + (userInfo.follows ? userInfo.follows : '')" name="follow"></van-tab>
                <van-tab :title="'粉丝 ' + (userInfo.followers ? userInfo.followers : '')" name="follower"></van-tab>
            </van-tabs>
        </van-sticky>
        <div class="list">
            <template v-for="(item, index) in list" :key="index">
                <creator-info v-model:info="list[index]" @update:info="init"></creator-info>
            </template>
            <van-empty v-if="empty" :description="emptyText.name" :image="require('@assets/kong_png_gaunzhu.png')" class="empty_con">
                <div class="empty-tips">{{ emptyText.sub }}</div>
            </van-empty>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import CreatorInfo from '../../components/creator/CreatorInfo.vue';
export default {
    components: { CreatorInfo },
    inject: ['barHeight'],
    data() {
        return {
            list: [],
            empty: false,
            pageType: 'follow',
            emptyInfo: {
                follow: {
                    name: '你还没有关注别人哦～',
                    sub: '这里将展示你在传奇数藏的关注的用户'
                },
                follower: {
                    name: '你还没有粉丝哦~',
                    sub: '这里将展示你在传奇数藏的粉丝用户'
                }
            }
        };
    },
    computed: {
        ...mapState(['userInfo']),
        emptyText() {
            return this.emptyInfo[this.pageType];
        },
        showList() {
            return [...this.list].filter(item => {
                return item.follow;
            });
        }
    },
    mounted() {
        if (this.$route.query.pageType) {
            this.pageType = this.$route.query.pageType;
        }
        this.init();
    },
    methods: {
        init() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.empty = false;
            this.list = [];
            if (this.pageType === 'follow') {
                this.$http
                    .get('/user/myFollows')
                    .then(res => {
                        this.list = res;
                        this.empty = res.length === 0;
                        this.$toast.clear();
                    })
                    .catch(e => {
                        this.$toast(e.error);
                    });
            } else {
                this.$http
                    .get('/user/myFollowers')
                    .then(res => {
                        this.list = res;
                        this.empty = res.length === 0;
                        this.$toast.clear();
                    })
                    .catch(e => {
                        this.$toast(e.error);
                    });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.follow {
    background-color: @bg;
}
.empty_con{
    padding-top: 126px;
}
.top {
    background-color: @bg;
    padding: 0 16px;
    height: 50px;
    display: flex;
    align-items: center;
    .name {
        font-size: 20px;
        font-weight: bold;
        color: @text0;
        line-height: 30px;
    }
}
</style>
