<template>
    <div class="list">
        <div class="item" v-for="(item,index) in list" :key="item.id">
            <top-text :info="item"></top-text>
        </div>
    </div>
</template>

<script>
    import {getTopChatList} from '@/plugins/API/apiAll'
    import {mapGetters} from 'vuex'
    import topText from './chatItem/topText'
    export default {
        components: {
            topText
        },
        data(){
            return {
                page: 1,
                num: 50,
                list: [],
            }
        },
        computed: {
            ...mapGetters({
                'userInfo': 'userInfo',
                'channelInfo': 'channelInfo',
            }),
        },
        mounted(){
            this.$Bus.$on('bus-addTopChat', this.addChat)
            this.$Bus.$on('bus-delTopChat', this.delChat)
            this.getChatList();
        },
        methods: {
            async getChatList(){
                const res = await getTopChatList({
                    uin: this.channelInfo.uin,
                    channelId: this.channelInfo.id,
                    page: this.page,
                    num: this.num
                })
                if(res.code == 200 && res.errorCode == 0){
                    this.list = res.data || [];
                }
            },
            addChat(obj){
                this.list.unshift(obj)
            },
            delChat(id){
                this.list = this.list.filter((x) => {return x.id != id;});
            }
        },
        beforeDestroy(){
            this.$Bus.$off('bus-addTopChat', this.addChat);
            this.$Bus.$off('bus-delTopChat', this.delChat)
        },
    }
</script>

<style lang="less" scoped>
    
</style>