<template>
    <div class="c-h100">
        <div class="ui-col-1 c-app-drag">
            {{msgsTit}}
        </div>
        <div id="msgCon" :class='setChatroomStyle()' v-show='readJudge'>
    
            <!-- 
                if(msg.timestamp - preTime > 60 * 1000) {
                    preTime = msg.timestamp;
                    var date = new Date();
                    date.setTime(msg.timestamp);
                    var time = date.format('yyyy-MM-dd hh:mm:ss');
                    html += '<div class="time-tips"><span>' + time + '</span></div>';
                }
            -->
            <div style="text-align: center; color: #12B7f5; cursor: pointer;" v-show="msgMoreJudge"><span @click='addMoreMsg()'>加载更多</span></div>

            <!-- :chatMen判断消息位置左右 :chatJudge判断是否已读 :chatObj单条会话的信息 -->
            <ul>
                <li v-for='(chatMsg, index) in chatMsgInfo' v-if="chatMsg" :key="index">
                    <div class="time-tips">
                        <i class="zuoxianduan-icon"></i>
                        <span>{{chatMsg ? setDate(JSON.parse(chatMsg).timestamp) : ''}}</span>
                        <i class="youxianduan-icon"></i>
                    </div>
                    <!--<div v-if='JSON.parse(chatMsg).content_type == 0'>
                        <message-data-text :chatImg='JSON.parse(chatMsg).chatImg ? photoSrc(JSON.parse(chatMsg).chatImg) : ""' :contentType='JSON.parse(chatMsg).content_type' :chatMen='JSON.parse(chatMsg).sender_id === userId ? true : false' :chatObj='JSON.parse(chatMsg)'></message-data-text>
                    </div>-->
                    <!-- 文本消息 v-if="contentType === '7、10、13、14', '1、 6', '5','8'" -->
                    <div v-if='chatMsg && (JSON.parse(chatMsg).content_type == 0 
                        || JSON.parse(chatMsg).content_type == 1 
                        || JSON.parse(chatMsg).content_type == 5 
                        || JSON.parse(chatMsg).content_type == 6 
                        || JSON.parse(chatMsg).content_type == 7 
                        || JSON.parse(chatMsg).content_type == 8 
                        || JSON.parse(chatMsg).content_type == 10 
                        || JSON.parse(chatMsg).content_type == 13 
                        || JSON.parse(chatMsg).content_type == 14
                        || JSON.parse(chatMsg).content_type == 15
                        || JSON.parse(chatMsg).content_type == 16
                        || JSON.parse(chatMsg).content_type == 17
                        || JSON.parse(chatMsg).content_type == 18
                        || JSON.parse(chatMsg).content_type == 19)'>
                        <message-data-text :chatImg='JSON.parse(chatMsg).chatImg ? photoSrc(JSON.parse(chatMsg).chatImg) : ""' :contentType='JSON.parse(chatMsg).content_type' :chatMen='JSON.parse(chatMsg).sender_id === userId ? true : false' :chatJudge='lastFetchTime' :chatObj='JSON.parse(chatMsg)'></message-data-text>
                    </div>
                    <!-- 图片消息 2 -->
                    <div v-if='chatMsg && JSON.parse(chatMsg).content_type == 2'>
                        <message-data-photo :chatImg='JSON.parse(chatMsg).chatImg ? photoSrc(JSON.parse(chatMsg).chatImg) : ""' :chatMen='JSON.parse(chatMsg).sender_id === userId ? true : false' :chatJudge='lastFetchTime' :chatObj='JSON.parse(chatMsg)'></message-data-photo>
                    </div>
                    <!-- 语音消息 3 -->
                    <div v-if='chatMsg && JSON.parse(chatMsg).content_type == 3'>
                        <message-data-voice :chatImg='JSON.parse(chatMsg).chatImg ? photoSrc(JSON.parse(chatMsg).chatImg) : ""' :chatMen='JSON.parse(chatMsg).sender_id === userId ? true : false' :chatJudge='lastFetchTime' :chatObj='JSON.parse(chatMsg)'></message-data-voice>
                    </div>
                    <!-- 文章消息 4 -->
                    <div v-if='chatMsg && JSON.parse(chatMsg).content_type == 4'>
                        <message-data-article :chatImg='JSON.parse(chatMsg).chatImg ? photoSrc(JSON.parse(chatMsg).chatImg) : ""' :chatMen='JSON.parse(chatMsg).sender_id === userId ? true : false' :chatJudge='lastFetchTime' :chatObj='JSON.parse(chatMsg)'></message-data-article>
                    </div>
                    <!-- 视频消息 12 -->
                    <div v-if='chatMsg && JSON.parse(chatMsg).content_type == 12'>
                        <message-data-video :chatImg='JSON.parse(chatMsg).chatImg ? photoSrc(JSON.parse(chatMsg).chatImg) : ""' :chatMen='JSON.parse(chatMsg).sender_id === userId ? true : false' :chatJudge='lastFetchTime' :chatObj='JSON.parse(chatMsg)'></message-data-video>
                    </div>
                </li>
            </ul>
            <video v-show='judgeShow' id='video' controls="true" src="" @click='openOrCloseFn()'></video>
        </div>
        <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls c-hide">
            <div class="slides"></div>
            <h3 class="title"></h3>
            <a class="prev">‹</a>
            <a class="next">›</a>
            <a class="close">×</a>
        </div>
        <div class="div-textarea-content" v-show='!unSendMsg && readJudge'>
            <div class="div-img-group">
                <!-- <a type="file" class="imgIcon mr15 cur-pit"><input type="file" class="cur-pit" @change="submitImg()" ref="inputImg" accept="image/*"></a> -->
                <!-- <a class="wenJianIcon mr15"><input type="file" @change="submitVideo()" ref="inputFile" accept="video/*"></a> -->
                <!-- <a class="yuYinIcon mr15" @click="madeVoice()"></a> -->
                <a class="shiPingIcon mr15" @click="madeVideo()" title="发起群视频通话"></a>
                <!-- <a class="jieTuIcon mr15"></a> -->
            </div>
            <textarea v-model="txtVal" @keyup.13='submitMsg()'></textarea>
        </div>
        <button class="fasong-btn" v-show='!unSendMsg && readJudge' @click="submitMsg()">
            <i></i>
            <span>发送</span>
        </button>
    </div>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/sass/message-chat";
    .c-app-drag {
        border-bottom: 1px solid #dcdcdc;
        text-align: center;
        line-height: 40px;
        text-indent: 120px;
        font-size: 16px;
    }
    .addHeigh {
        height: calc(100% - 260px);
    }
    .hideSend {
        height: calc(100% - 61px);
    }
    .c-h100 {
        position: relative;
    }
    #video {
        position: absolute;
        top: 75px;
        left: calc((100% - 240px) / 2);
        width: 240px;
        z-index: 1000;
    }
    input {
        overflow: hidden;
        width: 16px;
        height: 30px;
        outline: none;
        border: 0;
        opacity: 0;
    }
</style>

<script>
import winCtrlBar from '@/components/common/winCtrlBar'
import path from '@/assets/images/bofang_icon.png'
import messageDataText from '@/components/messagePage/message-data-text.vue'
import messageDataPhoto from '@/components/messagePage/message-data-photo.vue'
import messageDataVoice from '@/components/messagePage/message-data-voice.vue'
import messageDataArticle from '@/components/messagePage/message-data-article.vue'
import messageDataVideo from '@/components/messagePage/message-data-video.vue'
import common from '../../assets/js/common'
import getSessionsService from '../../assets/js/apis/api-im'
import consultService from '../../assets/js/apis/api-doctor-consult'
import Gallery from '../../assets/js/vendor/gallery/blueimp-gallery'
import $ from 'jquery'

let video = null

export default {
    props: ['chatMsgInfo', 'msgsTit', 'userId', 'lastFetchTime', 'readJudge', 'msgMoreJudge', 'unSendMsg', 'sessionId'],
    components: {
        winCtrlBar,
        messageDataText,
        messageDataPhoto,
        messageDataVoice,
        messageDataArticle,
        messageDataVideo
    },
    mounted() {
        $(document.body).on('click', '#msgCon a.img-link', function(event) {
            event = event || window.event
            var target = event.target || event.srcElement,
                link = target.src ? target.parentNode : target,
                options = { index: link, event: event },
                links = $('#msgCon a.img-link')
            Gallery(links, options)
        })
        // this.getParticipants();
    },
    // 监听事件
    created() {
        this.$root.bus.$on('scrollCon', value => {
            // this.print(value)
            var _this = this
            setTimeout(function() { _this.print(value) }, 200)
        })
        this.$root.bus.$on('msgConTxtJudge', value => {
            this.msgConTxtJudge = (Number(value) === 8 ? 1 : 0)
        })
        this.$root.bus.$on('openOrCloseVideo', value => {
            this.showVideo(value)
        })
        this.$root.bus.$on('scrollConVal', value => {
            this.scrollConPos(value)
        })
    },
    watch: {
    },
    data() {
        return {
            bofangIconPath: path,
            activeMode: '',
            txtVal: '',
            txtArr: [],
            judgeShow: false,
            msgConTxtJudge: null,
            memberList: []
        }
    },
    methods: {
        photoSrc(str) {
            return common.setImgUrl(str)
        },
        // 前缀'0'
        addStr0(num) {
            if (num < 10) {
                return '0' + num
            } else {
                return num
            }
        },
        // 时间格式化
        setDate(strTime) {
            let time = new Date(strTime),
                str = time.getFullYear() + '-' + this.addStr0(time.getMonth() + 1) + '-' + this.addStr0(time.getDate()) + ' ' + this.addStr0(time.getHours()) + ':' + this.addStr0(time.getMinutes()) + ':' + this.addStr0(time.getSeconds())
            return str
        },
        // 加载更多消息
        addMoreMsg() {
            this.$emit('getMoreMsg')
        },
        // 聊天框样式设置
        setChatroomStyle() {
            if (this.unSendMsg) {
                return 'div-msg-content hideSend bgc-fff'
            } else {
                return 'div-msg-content addHeigh bgc-fff'
            }
        },
        // 提交文本消息
        submitMsg() {
            let txt = this.txtVal.trim()
            if (txt === '') {
                this.$toast('请输入内容')
            } else {
                this.txtArr[0] = txt
                this.txtArr[1] = 1
                this.$emit('submitMsg', this.txtArr)
            }
            this.txtVal = ''
        },
        // 消息滚轮设置为底部
        print(value) {
            if (value && document.getElementById('msgCon').scrollTop) {
                document.getElementById('msgCon').scrollTop = document.getElementById('msgCon').scrollHeight
            }
        },
        // 消息滚轮随消息增多而变化
        scrollConPos(value) {
            document.getElementById('msgCon').scrollTop = value * document.getElementById('msgCon').scrollHeight / 100
        },
        // 视频播放
        showVideo(value) {
            this.judgeShow = value[0]
            video = document.getElementById('video')
            video.src = value[1]
            video.play()
            video.onended = () => {
                this.openOrCloseFn()
            }
        },
        // 视频关闭
        openOrCloseFn() {
            this.judgeShow = false
            video.pause()
        },
        // 发送图片
        submitImg($event) {
            let file = this.$refs.inputImg.files[0]
            if (!file) {
                return false
            }
            this.txtArr[0] = file
            this.txtArr[1] = 2
            // 回传message页发送消息
            this.$emit('submitMsg', this.txtArr)
            this.$refs.inputImg.files = null
        },
        // 发送文件
        submitVideo($event) {
            let file = this.$refs.inputImg.files[0]
            this.txtArr[0] = file
            this.txtArr[1] = 2
            // 回传message页发送消息
            this.$emit('submitMsg', this.txtArr)
            this.$refs.inputImg.files = null
        },
        // 调用录像接口
        madeVideo() {
            this.memberList = _.map(this.memberList, function(o){
                if(!o.code){
                    o.code = o.id;
                }
                return o;
            })
            console.log(this.memberList);
            this.$root.bus.$emit('showChatWindow', {chatMembers: this.memberList, sessionId: this.sessionId, createChat: true})
            // this.$root.bus.$emit('showChatWindow', { sessionId: this.sessionId})
        },
        
        //获取群聊成员
        async getParticipants(){
            let result = await getSessionsService.Sessions.getParticipants(this.sessionId),
                res = result.data
            console.log(res);
            this.memberList = res;
            console.log(this.memberList);
        }
    }
}
</script>
