<template>
  <div class="list-box" ref="chatListBox" @scroll="getMore">
    <div class="advocate-tips" v-if="showTips">
      欢迎来到直播间！本平台提倡绿色健康直播，直播评论和弹幕严禁出现违法违规、低俗色情等内容，若有违反，将视情节严重程度对账号进行禁言、拉黑等。
    </div>
    <div class="loading" v-show="!isAjax">{{ list.length ? loadingMsg : '还没有评论' }}</div>
    <div id="chatList" class="list" ref="chatList">
      <div class="item" v-for="item in list" :key="item.id" :data-chatid="item.id">
        <chat-item :info="item"></chat-item>
      </div>
    </div>
  </div>
</template>

<script>
import { getChatList } from '@/plugins/API/apiAll';
import { mapGetters } from 'vuex';
import chatItem from './chatItem/index';
export default {
  name: 'vertical-chat-list',
  components: {
    chatItem
  },
  data() {
    return {
      isAjax: true,
      loadingMsg: '',
      showTips: false,
      page: 1,
      num: 50,
      list: []
    };
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
      channelInfo: 'channelInfo'
    })
  },
  mounted() {
    this.$Bus.$on('bus-addChat', this.addChat);
    this.$Bus.$on('bus-delChat', this.delChat);
    this.getChatList();
  },
  methods: {
    getMore() {
      const chatListBoxDom = this.$refs.chatListBox;
      const chatListDom = this.$refs.chatList;
      if (chatListBoxDom && chatListDom) {
        const boxScrollTop = chatListBoxDom.scrollTop;
        if (boxScrollTop <= 100) {
          this.getChatList();
        }
      }
    },
    async getChatList() {
      if (!this.isAjax) {
        return false;
      }
      this.isAjax = false;
      this.loadingMsg = '加载中...';
      const res = await getChatList({
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id,
        page: this.page,
        num: this.num
      });
      if (res.code === 200 && res.errorCode === 0) {
        const list = res.data || [];
        const firstLi =
          document.querySelector('#chatList') && document.querySelector('#chatList').children[0];
        list.forEach(item => {
          this.addChat(item, true);
        });
        this.$nextTick(() => {
          if (this.page === 1) {
            this._scrollBottom();
          } else {
            const chatListBoxDom = this.$refs.chatListBox;
            if (chatListBoxDom && firstLi) {
              chatListBoxDom.scrollTop = firstLi.offsetTop;
            }
          }
          this.loadingMsg = '';
          if (list.length < 50) {
            this.isAjax = false;
            this.loadingMsg = '已加载所有评论';
          } else {
            this.page++;
            this.isAjax = true;
            this.loadingMsg = '下拉加载更多';
          }
          this.showTips = true;
        });
      } else {
        this.isAjax = true;
        this.loadingMsg = '';
      }
    },
    addChat(obj, order = false) {
      const chatObj = obj;
      this.list = this.list.filter(x => {
        return Number(x.id) !== Number(chatObj.id);
      });
      if (this.list.length) {
        const newTime = chatObj.addTime;
        const prevTime = order ? this.list[0].addTime : this.list[this.list.length - 1].addTime;
        if (Math.abs(newTime - prevTime) > 600) {
          chatObj.showTime = true;
        }
      }
      if (order) {
        this.list.unshift(chatObj);
      } else {
        this.list.push(chatObj);
        this._scrollKeep();
      }
      if (this.list.length > 250) {
        this.list.splice(50, 100);
      }
    },
    delChat(id) {
      this.list = this.list.filter(x => {
        return Number(x.id) !== Number(id);
      });
    },
    _scrollKeep() {
      const chatListBoxDom = this.$refs.chatListBox;
      const chatListDom = this.$refs.chatList;
      if (chatListBoxDom && chatListDom) {
        const boxHeight = chatListBoxDom.clientHeight;
        const boxScrollTop = chatListBoxDom.scrollTop;
        const listHeigth = chatListDom.clientHeight;
        if (boxHeight + boxScrollTop > listHeigth - 250) {
          this.$nextTick(() => {
            chatListBoxDom.scrollTop = this.$refs.chatList.clientHeight;
          });
        }
      }
    },
    _scrollBottom() {
      const chatListBoxDom = this.$refs.chatListBox;
      const chatListDom = this.$refs.chatList;
      if (chatListBoxDom && chatListDom) {
        const listHeigth = chatListDom.clientHeight;
        chatListBoxDom.scrollTop = listHeigth;
      }
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-addChat', this.addChat);
    this.$Bus.$off('bus-delChat', this.delChat);
  }
};
</script>

<style lang="less" scoped>
.list-box {
  height: 100%;
  width: 100%;
  overflow: auto;
  .advocate-tips {
    padding: 0.01rem 0 0.01rem 0.16rem;
    line-height: 0.2rem;
    font-size: 0.12rem;
    color: #409eff;
  }
  .loading {
    height: 0.2rem;
    line-height: 0.2rem;
    text-align: center;
    color: #fff;
    font-size: 0.12rem;
  }
  .list {
    position: relative;
    .item {
      padding: 0.03rem 0.1rem;
    }
  }
}
</style>
