<template>
  <div class="list">
    <div class="item" v-for="item in list" :key="item.id">
      <chat-item :info="item"></chat-item>
    </div>
  </div>
</template>

<script>
import { getTopChatList } from '@/plugins/API/apiAll';
import { mapGetters } from 'vuex';
import chatItem from './chatItem/index';
export default {
  name: 'vertical-top-chat-list',
  components: {
    chatItem
  },
  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 Number(x.id) !== Number(id);
      });
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-addTopChat', this.addChat);
    this.$Bus.$off('bus-delTopChat', this.delChat);
  }
};
</script>

<style lang="less" scoped>
.list {
  position: relative;
  .item {
    padding: 0.03rem 0.1rem;
  }
}
</style>
