<template>
    <div class="wrapper">
        <div class="list-box" ref="chatListBox" @scroll="getMore">
            <div class="loading" v-show="!isAjax">{{loadingMsg}}</div>
            <div id="chatList" class="list" ref="chatList">
                <div class="item" v-for="(item,index) in list" :key="item.id" :data-chatid="item.id">
                    <!--时间划分-->
                    <template v-if="item.msgType == 0">
                        <chat-time :info="item"></chat-time>
                    </template>
                    <!--普通聊天-->
                    <template v-else-if="item.msgType == 1">
                        <chat-text :info="item"></chat-text>
                    </template>
                    <!--打赏消息-->
                    <template v-else-if="item.msgType == 2">
                        <chat-reward-cash :info="item"></chat-reward-cash>
                    </template>
                    <!--普通红包-->
                    <template v-else-if="item.msgType == 3">
                        <chat-red-default :info="item"></chat-red-default>
                    </template>
                    <!--领取普通红包-->
                    <template v-else-if="item.msgType == 4">
                        <chat-red-default-tip :info="item"></chat-red-default-tip>
                    </template>
                    <!--图片聊天-->
                    <template v-else-if="item.msgType == 5">
                        <chat-img :info="item"></chat-img>
                    </template>
                    <!--领取分享红包-->
                    <template v-else-if="item.msgType == 7">
                        <chat-red-share-tip :info="item"></chat-red-share-tip>
                    </template>
                    <!--口令红包-->
                    <template v-else-if="item.msgType == 8">
                        <chat-red-password :info="item"></chat-red-password>
                    </template>
                    <!--领取口令红包-->
                    <template v-else-if="item.msgType == 9">
                        <chat-red-password-tip :info="item"></chat-red-password-tip>
                    </template>
                    <!--领取竞答红包-->
                    <template v-else-if="item.msgType == 11">
                        <chat-red-answer-tip :info="item"></chat-red-answer-tip>
                    </template>
                    <!--领取商家红包-->
                    <template v-else-if="item.msgType == 13">
                        <chat-red-business-tip :info="item"></chat-red-business-tip>
                    </template>
                    <!--礼物打赏消息-->
                    <template v-else-if="item.msgType == 14">
                        <chat-reward-gift :info="item"></chat-reward-gift>
                    </template>
                </div>
            </div>
        </div>
         <transition name="move-bottom">
            <div class="chat-unread" v-show="unreadChatNum">
                <span @click="_toScrollBottom">{{unreadChatNum}}条消息未读</span>
            </div>
        </transition>
        <transition name="move-left">
            <div class="chat-reply" v-show="replyChatId">
                <span class="title" @click="_scrollReply">有人提到了我</span>
                <span class="close" @click="_closeReply">x</span>
            </div>
        </transition>
    </div>
</template>

<script>
    import {getChatList} from '@/plugins/API/apiAll'
    import {mapGetters} from 'vuex'
    import chatTime from './chatItem/chatTime'
    import chatText from './chatItem/chatText'
    import chatRewardCash from './chatItem/chatRewardCash'
    import chatRedDefault from './chatItem/chatRedDefault'
    import chatRedDefaultTip from './chatItem/chatRedDefaultTip'
    import chatImg from './chatItem/chatImg'
    import chatRedShareTip from './chatItem/chatRedShareTip'
    import chatRedPassword from './chatItem/chatRedPassword'
    import chatRedPasswordTip from './chatItem/chatRedPasswordTip'
    import chatRedAnswerTip from './chatItem/chatRedAnswerTip'
    import chatRedBusinessTip from './chatItem/chatRedBusinessTip'
    import chatRewardGift from './chatItem/chatRewardGift'
    export default {
        components: {
            chatTime,
            chatText,
            chatRewardCash,
            chatRedDefault,
            chatRedDefaultTip,
            chatImg,
            chatRedShareTip,
            chatRedPassword,
            chatRedPasswordTip,
            chatRedAnswerTip,
            chatRedBusinessTip,
            chatRewardGift,
        },
        data(){
            return {
                isAjax: true,
                loadingMsg: '',
                page: 1,
                num: 50,
                list: [],
                unreadChatNum: 0,
                replyChatId: '',
            }
        },
        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(){
                let boxHeight = this.$refs.chatListBox.clientHeight;
                let boxScrollTop = this.$refs.chatListBox.scrollTop;
                let listHeigth = this.$refs.chatList.clientHeight;
                if(boxScrollTop <= 100){
                    this.getChatList();
                }
                if(listHeigth - boxHeight - boxScrollTop < 250){
                    this.unreadChatNum = 0;
                }
            },
            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){
                    let list = res.data || [];
                    let firstLi = document.querySelector('#chatList').children[0];
                    list.forEach(item => {
                        this.addChatList(item)
                    })
                    this.$nextTick(() => {
                        if(this.page == 1){
                            this._toScrollBottom()
                        }else{
                            this.$refs.chatListBox.scrollTop = firstLi.offsetTop;
                        }
                        if(list.length < 50){
                            this.isAjax = false;
                            this.loadingMsg = '已加载所有评论';
                        }else{
                            this.page ++;
                            this.isAjax = true;
                            this.loadingMsg = '';
                        }
                    })                    
                    
                }else{
                    this.isAjax = true;
                    this.loadingMsg = '';
                }
            },
            addChatList(obj){
                this.list = this.list.filter((x) => {return x.id != obj.id;});
                if(this.list.length){
                    let newTime = obj.addTime;
                    let prevTime = this.list[0].addTime;
                    if(Math.abs(newTime - prevTime) > 600){
                        this.list.unshift({
                            id: Math.random(),
                            msgType: 0,
                            addTime: prevTime - 1
                        })
                    }
                }
                this.list.unshift(obj);
                if(this.list.length> 250){
                    this.list.splice(100,50);
                }
            },
            addChat(obj){
                this.list = this.list.filter((x) => {return x.id != obj.id;});
                if(this.list.length){
                    let newTime = obj.addTime;
                    let prevTime = this.list[this.list.length-1].addTime;
                    if(Math.abs(newTime - prevTime) > 600){
                        this.list.push({
                            id: Math.random(),
                            msgType: 0,
                            addTime: newTime - 1
                        })
                    }
                }
                this.list.push(obj);
                this._scrollTop();
                if(!this.replyChatId && obj.replyOpenUid && obj.replyOpenUid == this.userInfo.openUid){
                    this.replyChatId = obj.id;
                }
                if(this.list.length> 250){
                    this.list.splice(0,50);
                }
            },
            delChat(id){
                this.list = this.list.filter((x) => {return x.id != id;});
            },
            _scrollTop(){
                let boxHeight = this.$refs.chatListBox.clientHeight;
                let boxScrollTop = this.$refs.chatListBox.scrollTop;
                let listHeigth = this.$refs.chatList.clientHeight;
                if(boxHeight + boxScrollTop > listHeigth - 250){
                    this.$nextTick(() => {
                        this.$refs.chatListBox.scrollTop = this.$refs.chatList.clientHeight
                    })
                }else{
                    this.unreadChatNum ++;
                }
            },
            _toScrollBottom(){
                let listHeigth = this.$refs.chatList.clientHeight;
                this.$refs.chatListBox.scrollTop = listHeigth;
            },
            _scrollReply(){
                let id = this.replyChatId;
                let el = document.querySelectorAll(`[data-chatid="${id}"]`)[0];
                if(!el){
                    this._toScrollBottom();
                    return false;
                }
                let scrollTop = el.offsetTop;
                this.$refs.chatListBox.scrollTop = scrollTop;
                this._closeReply();
            },
            _closeReply(){
                this.replyChatId = '';
            },
        },
        beforeDestroy(){
            this.$Bus.$off('bus-addChat', this.addChat);
            this.$Bus.$off('bus-delChat', this.delChat)
        },
    }
</script>

<style lang="less" scoped>
    .wrapper{
        position: relative;
        text-align: center;
        height: 100%;
    }
    .list-box{
        height: 100%;
        width: 100%;
        overflow-y: auto;
        .loading{
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #858587;
            font-size: 14px;
        }
        .list{
            position: relative;
            .item{
                text-align: center;
                padding: 5px 10px;
            }
        }
    }
    .chat-unread{
        position: absolute;
        bottom: 10px;
        left: 0;
        z-index: 1;
        width: 100%;
        text-align: center;
        span{
            padding: 3px 10px;
            background-color: #008DF6;
            border-radius:30px;
            font-size: 12px;
            color: #fff;
        }
    }
    .chat-reply{
        position: absolute;
        bottom:10px;
        left: 10px;
        z-index: 1;
        padding:3px 5px;
        background-color: #008DF6;
        border-radius: 3px;
        .title{
            color: #fff;
            font-size: 14px;
        }
        .close{
            display: inline-block;
            vertical-align: top;
            margin-left: 3px;
            font-size: 16px;
            color: #333;
        }
    }
</style>