
<template>
    <div>
        <div class="message">
            <header class="header">
                <div class="friendname">{{selectedChat&&(selectedChat.user.conRemark?selectedChat.user.remark+'---'+selectedChat.user.conRemark:selectedChat.user.remark+'---'+selectedChat.user.name)}}</div>
            </header>
            <div class="message-wrapper" ref="list">
                <ul v-if="selectedChat">
                    <Load v-if="isSelectMore"/>
                    <template v-for="item in messages">
                        <li   :class="['dnf'+item.id, 'message-item']">
                            <div v-if="item.type==1" class="main" :class="{ self: item.isSend }">
                                <img class="avatar" width="36" height="36" :src="item.isSend ? user.img : selectedChat.user.img||'static/images/weixin.jpg'" />
                                <div class="time"><span>{{item.createTime | time}}</span></div>
                                <div class="content">
                                    <div class="text" v-html="replaceFace(item.content)"></div>
                                </div>
                            </div>
                            <div v-if="item.type==10000" class="main" :class="{ self: item.isSend }">
                                <div class="time" style="text-align: center"><span>{{item.createTime | time}}</span></div>
                                <div  style="text-align: center">
                                    <div  style="font-size: 12px;color: #26c8e2;text-align: center;">
                                       系统消息：{{item.content}}
                                    </div>
                                </div>
                            </div>
                            <div v-if="item.type==3" class="main" :class="{ self: item.isSend }">
                                <img class="avatar" width="36" height="36" :src="item.isSend ? user.img : selectedChat.user.img||'static/images/weixin.jpg'" />
                                <div class="time"><span>{{item.createTime | time}}</span></div>
                                <div class="content">
                                    <div class="img"><img style="width:300px;
                            height:300px;" :src="item.imageUrl | imgUrl" alt=""></div>
                                </div>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
import { panelStatus } from '@/utils/common'
import { mapGetters, mapState, mapActions } from 'vuex'
import Load from '../load/moreDot'
export default {
    data(){
        return {
            imgUrl:process.env.IMG_ADDRESS,
            headerId:0,
            loadStatus:false,
        }
    },
    components: {
         Load
    },
    computed: {
        selectId(){
            return  this.$store.state.user.selectId
        },
        panelStatus(){
            return panelStatus
        },
        ...mapGetters([
            'selectedChat',
            'messages',
            'isSelectMore'
        ]),
        ...mapState([
            'user'
        ])
    },
    mounted() {
        let temp = this
        this.$refs.list.scrollTop = this.$refs.list.scrollHeight
        this.$refs.list.onscroll = function () {
            if(this.scrollTop ==0){
                temp.moreMessage()
            }
        }
    },
    watch: {
        selectId() {
        },
        messages(val, old){
            console.log(433333333)
            if(!val||val.length==0){
                return
            }
            if(!old||old.length==0){//初始化
                setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
            }else if(val[0].conversationId!=old[0].conversationId){//切换tab
                setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
            }
            if(this.headerId == val[0].id){//
                setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
            }else{
                this.$refs.list.scrollTop= 50
                // }
                // let liArray = this.$refs.list.children[0].children
                // let index = val.length - old.length
                // console.log('------------------------=======================')
                // console.log(index)
                // for(let li of liArray){
                //     if(li.className.split(' ')[0] == 'dnf'+val[index].id){
                //         this.$refs.list.scrollTop = li.scrollHeight*9
                //     }
                // }
            }
            this.headerId = val[0].id
            
            // console.log(66666666666666666666666)
            // if(old.length+1==val.length){
            //     setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
            // }
            // if((val.length-old.length)>5){
            //     setTimeout(() => this.$refs.list.scrollTop = ~~this.$refs.list.scrollHeight-2000, 0)
            // }
        }
    },
    methods: {
        ...mapActions('user',[
             'moreMessage',
        ]),
        //  在发送信息之后，将输入的内容中属于表情的部分替换成emoji图片标签
        //  再经过v-html 渲染成真正的图片
        replaceFace (con) {
            if(con&&con.includes('/:')) {
                var emojis=this.user.emojis;
                for(var i=0;i<emojis.length;i++){
                    con = con.replace(emojis[i].reg, '<img src="static/emoji/' + emojis[i].file +'"  alt="" style="vertical-align: middle; width: 24px; height: 24px" />');
                }   
                return con;
            }
            return con;
        }
    },
    filters: {
            // 将日期过滤为 hour:minutes
            time (date) {

                date = new Date(parseInt(date+'') * 1000);
                return  moment(date).format('YYYY-MM-DD HH:mm:ss')
                // if(date.getMinutes()<10){
                //   return date.getHours() + ':0' +date.getMinutes();
                // }else{
                //   return date.getHours() + ':' + date.getMinutes();
                // }
            },
            imgUrl(img){
                if(!img){
                    return ''
                }
                 if(img.indexOf("http") >= 0){
                    return img
                 }else{
                    return process.env.IMG_ADDRESS + img
                 }
            }
    }
}
</script>

<style lang="stylus" scoped>
   .message
      width: 100%
      height: 650px
      .header
        height: 60px
        padding: 28px 0 0 30px
        box-sizing: border-box
        border-bottom: 1px solid #e7e7e7
        .friendname
            font-size: 18px
      .message-wrapper
        min-height: 590px
        max-height: 590px
        padding: 10px 15px
        box-sizing: border-box
        overflow-y: auto
        border-bottom: 1px solid #e7e7e7
        .message
            margin-bottom: 15px
        .time
            width: 100%
            font-size: 12px
            margin: 7px auto
            span
                display: inline-block
                padding: 4px 6px
                color: #797979
                border-radius: 3px
        .main
            .avatar 
                float: left
                margin-left: 15px
                border-radius: 3px
            .content
                display: inline-block
                margin-left: 10px
                position: relative
                padding: 6px 10px
                max-width: 330px
                min-height: 36px
                line-height: 24px
                box-sizing: border-box
                font-size: 14px
                text-align: left
                word-break: break-all
                background-color: #fafafa
                border-radius: 4px
                &:before
                    content: " "
                    position: absolute
                    top: 12px
                    right: 100%
                    border: 6px solid transparent
                    border-right-color: #fafafa
        .self
            text-align: right
            .avatar
                float: right
                margin:0 15px
            .content 
                background-color: #b2e281
                &:before 
                    right: -12px
                    vertical-align: middle
                    border-right-color: transparent
                    border-left-color: #b2e281
                
</style>
