
<template>
    <div>
        <div class="message" v-if="user.whichPane==panelStatus.CHART">
            <header class="header">
                <div class="friendname">{{selectedChat&&selectedChat.user.name}}</div>
            </header>
            <div class="message-wrapper" ref="list">
                <ul v-if="selectedChat">
                    <li v-for="item in messages" class="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" />
                            <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==3" class="main" :class="{ self: item.isSend }">
                            <img class="avatar" width="36" height="36" :src="item.isSend ? user.img : selectedChat.user.img" />
                            <div class="time"><span>{{item.createTime | time}}</span></div>
                            <div class="content">
                                <div class="img"><img style="width:300px;
                        height:300px;" :src="imgUrl+item.imageUrl" alt=""></div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="message" v-if="user.whichPane==panelStatus.SEARCH">
            <header class="header">
                <div class="friendname">{{selectedSearchChat&&selectedSearchChat.user.name}}</div>
            </header>
            <div class="message-wrapper" ref="list">
                <ul v-if="selectedSearchChat">
                    <li v-for="item in messages" class="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 : selectedSearchChat.user.img" />
                            <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==3" class="main" :class="{ self: item.isSend }">
                            <img class="avatar" width="36" height="36" :src="item.isSend ? user.img : selectedSearchChat.user.img" />
                            <div class="time"><span>{{item.createTime | time}}</span></div>
                            <div class="content">
                                <div class="img"><img style="width:300px;
                        height:300px;" :src="imgUrl+item.imageUrl" alt=""></div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
	
</template>

<script>
import moment from 'moment'
import { panelStatus } from '@/utils/common'
import { mapGetters, mapState } from 'vuex'
export default {
    data(){
        return {
            imgUrl:process.env.IMG_ADDRESS
        }
    },
    computed: {
        panelStatus(){
            return panelStatus
        },
        ...mapGetters([
            'selectedChat',
            'selectedSearchChat',
            'messages'
        ]),
        ...mapState([
            'user'
        ])
    },
    mounted() {
        // console.log(this.$refs)
        // setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
    },
    watch: {
        messages() {
            console.log(44444444)
          setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
        }
    },
    methods: {
        //  在发送信息之后，将输入的内容中属于表情的部分替换成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();
                // }
            }
    }
}
</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>
