
<template>
    <div style="height: calc(100% - 150px)">
        <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>
                            <div v-if="item.type==43" 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">
                                   <video width="300" height="300" controls>
                                      <source :src="item.videoUrl | videoUrl" type="video/mp4">
                                    </video>
                                </div>
                            </div>
                            <div v-if="item.type==42" 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">
                                    <a :href="item.cardUrl" target="_blank" >
                                        <h1 style="">
                                           <span style="font-size: 14px;color: black">{{item.cardTitle}}</span>
                                        </h1>
                                        <div style="width: 70%;height: 100%;float: left;">
                                           <span style="font-size: 12px;color: gray">{{item.cardDescription}}</span>
                                        </div>
                                        <div style="width: 30%;height: 100%;float: right;">
                                           <img  width=30% height=100% :src="item.cardImageUrl" alt="">
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div v-if="item.type==34" 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" @click="playMusic(item.id)">
                                    <audio :id="'audio'+item.id" class="audio-musc" controls>
                                      <source src="/i/horse.ogg" type="audio/ogg">
                                      <source :src="imgUrl + item.audioUrl" type="audio/mpeg">
                                      Your browser does not support the audio element.
                                    </audio>
                                    <img v-if="!item.isSend&&bufanClass!=item.id" src="static/icon-img/laba-right.png" width="20px" height="20px" style="margin-left: 50px;margin-top: 5px;" alt="">
                                    <img v-if="!item.isSend&&bufanClass==item.id" src="static/icon-img/1Rw0-Kq.gif" width="20px" height="20px" style="margin-left: 50px;margin-top: 5px;" alt="">
                                    <img v-if="item.isSend" src="static/icon-img/laba-left.png" width="20px" height="20px" style="margin-right: 50px;margin-top: 5px;" alt="">
                                    <!-- <a :href="item.cardUrl" target="_blank" >
                                        <h1 style="">
                                           <span style="font-size: 14px;color: black">{{item.cardTitle}}</span>
                                        </h1>
                                        <div style="width: 70%;height: 100%;float: left;">
                                           <span style="font-size: 12px;color: gray">{{item.cardDescription}}</span>
                                        </div>
                                        <div style="width: 30%;height: 100%;float: right;">
                                           <img  width=30% height=100% :src="item.cardImageUrl" alt="">
                                        </div>
                                    </a> -->
                                </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 {  emojis} from '@/utils/auth'
import Load from '../load/moreDot'
export default {
    data(){
        return {
            imgUrl:process.env.IMG_ADDRESS,
            headerId:0,
            bufanClass:'',
            changeFlag:true,
            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){
                if(temp.changeFlag){
                    temp.moreMessage()
                }
            }
            temp.changeFlag = true
        }
    },
    watch: {
        selectId(v) {
            this.changeFlag = false
        },
        messages(val, old){
            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)
            }else{
                 if(this.headerId == val[0].id){//
                    setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
                }else{
                    this.$refs.list.scrollTop= 50
                }
            }
            this.headerId = val[0].id
        }
    },
    methods: {
        playMusic(id){
            this.bufanClass = id
            let auto = window.document.getElementById('audio'+id); 
            // auto.duration
            auto.play()
            var   is_playFinish = setInterval(()=>{
            if(auto.ended){
                this.bufanClass = 0
                window.clearInterval(is_playFinish);
            }
           }, 10);
        },
        ...mapActions('user',[
             'moreMessage',
        ]),
        replaceFace (content) {
            let html = String(content).replace(/\n/g, "<br>")
             for(let item of emojis){
                let regex = new RegExp(`\\[${item.title}\\]`, 'g')
                html = html.replace(regex, `<img class='wx-emoji' width="30px" height="30px" src='static/emoji/${item.file}'/>`)
             }
              return html
        }
    },
    filters: {
            time (date) {
                date = new Date(parseInt(date+'') * 1000);
                return  moment(date).format('YYYY-MM-DD HH:mm:ss')
            },
            imgUrl(img){
                 if(!img){
                    return ''
                }
                 if(img.indexOf("http") >= 0){
                    return img
                 }else{
                    return process.env.IMG_ADDRESS + img
                 }
            },
            videoUrl(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: 100%
      .header
        height: 60px
        padding: 28px 0 0 30px
        box-sizing: border-box
        border-bottom: 1px solid #e7e7e7
        .friendname
            font-size: 18px
      .message-wrapper
        height:calc(100% - 60px)
        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: #fff
                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
.audio-musc{
    display:none;
}                    
                
</style>
