rt-sim-training-client/src/views/newMap/displayNew/scriptPreviewChat.vue

<template>
  <chat-box
    ref="chatbox"
    :group="group"
    :is-show="isShow"
    :tree-data="treeData"
    :conversition-id="conversitionId"
    :current-member-list="currentMemberList"
    :chat-content-list="chatContentList"
    :script-tip="scriptTip"
    :is-start-record="isStartRecord"
    :invite-user-name="inviteUserName"
    :is-quit-show="isQuitShow"
    @setScriptTip="setScriptTip"
    @resetCoversition="resetCoversition"
  />
</template>
<script>
import CMD from '@/scripts/cmdPlugin/CommandEnum';
import ChatBox from '../chatView/chatBox.vue';
export default {
    name:'ScriptPreviewChat',
    components:{
        ChatBox
    },
    props: {
        group: {
            type: String,
            required: true
        },
        userRole: {
            type: String,
            required: true
        },
        memberData:{
            type: Array,
            required: true
        },
        treeData:{
            type: Array,
            required: true
        }
    },
    data() {
        return {
            scriptTip:'',
            isHasCoversition:false,
            conversitionId:'',
            currentMemberList:[],
            chatContentList:[],
            isStartRecord:false,
            inviteUserName:'',
            createCoversition:false,
            inviteUser:{},
            isQuitShow:false
        };
    },
    computed:{
        isShow() {
            return this.userRole != '' &&
             this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE' &&
            !this.isHasCoversition && this.createCoversition;
        }
    },
    watch:{
        // 创建会话
        '$store.state.socket.createConversition':function(val) {
            this.scriptTip = '';
            if (this.memberData.length > 0) {
                const member = this.memberData.find(member=>{ return member.id == val.creatorId; });
                if (member && member.userId == this.$store.state.user.id) {
                    // 当前用户创建的会话
                    this.isHasCoversition = true;
                    this.isStartRecord = true;
                    this.isQuitShow = true;
                    this.conversitionId = val.id;
                    const memberList = [];
                    val.memberIds.forEach(id=>{
                        if (val.creatorId == id) {
                            member.connect = true;
                            memberList.push(member);
                        } else {
                            const member = this.memberData.find(member=>{ return member.id == id; });
                            member.connect = false;
                            member && memberList.push(member);
                        }
                    });
                    this.currentMemberList = memberList;
                } else {
                    // 如果是观众看所有人的会话
                    if (this.userRole == 'AUDIENCE') {
                        this.isHasCoversition = true;
                        this.currentMemberList = this.memberData;
                    }
                }
            }
        },
        // 用户接受会话
        '$store.state.socket.acceptConversionInvite':function(val) {
            let result = false;
            // 更改成员列表里面的成员状态
            const memberList = this.currentMemberList.map(member => {
                if (member.id == val.memberId) {
                    member.connect = true;
                    result = true;
                }
                return member;
            });
            // 如果该用户不在成员列表里面，就动态加进去（当前会话）
            if (!result && this.conversitionId) {
                const member = this.memberData.find(member=>{ return member.id == val.memberId; });
                if (member) {
                    member.connect = true;
                    memberList.push(member);
                    // 如果是当前的用户
                    if (member.userId == this.$store.state.user.id) {
                        memberList.push(this.inviteUser);
                        this.inviteUser = {};
                        this.isStartRecord = true;
                        this.isQuitShow = true;
                    }
                }
            }
            this.currentMemberList = memberList;
        },
        // 剧本提示
        '$store.state.socket.simulationScriptTip':function(val, old) {
            if (val) {
                if (val.type == 'Conversation') {
                    this.scriptTip = '请说：' + val.content;
                } else if (val.type == 'Command') {
                    const commandName = val.operationType;
                    let device = val.operationType.split('_')[0];
                    if (device == 'CM') {
                        device = 'ControlConvertMenu';
                    }
                    const operateName = Object.values(CMD[device]).find(res=>{ return res.value == commandName; });
                    this.$messageBox('请执行【' + operateName.label + '】操作');
                } else if (val.type == 'Over_Conversation') {
                    this.scriptTip = '请结束当前会话';
                } else if (val.type == 'Start_Conversation' ) {
                    const inviteMember = [];
                    this.createCoversition = true;
                    val.conversationMemberIds.forEach(id=>{
                        if (val.memberId != id) {
                            inviteMember.push((this.memberData.find(member=>{ return member.id == id; }) || {label:''}).label );
                        }
                    });
                    this.scriptTip = '请创建会话,选择' + inviteMember.toString();
                }
            }
        },
        // 会话聊天消息
        '$store.state.socket.conversationInfo':function (val, old) { //  仿真聊天
            const simulationText = this.$store.state.socket.conversationInfo;
            if (val.messageType == 'MESSAGE' && (this.conversitionId == val.id || this.userRole == 'AUDIENCE')) {
                this.chatContentList.push(this.addContent(simulationText.message));
            }
        },
        // 剧本执行完成消息
        '$store.state.socket.scriptFinish':function(val, old) {
            this.$message('剧本执行完成');
        },
        // 退出会话消息
        '$store.state.socket.overConversition': function (val) {
            if (val.id === this.conversitionId) {
                this.conversitionId = '';
                this.scriptTip = '';
                this.currentMemberList = [];
                this.chatContentList = [];
                this.isHasCoversition = false;
                this.isStartRecord = false;
            }
        },
        // 邀请会话的消息
        '$store.state.socket.inviteSimulationConversition':function(val) {
            const member = this.memberData.find(member=>{ return member.id == val.creatorId; });
            if (member) {
                this.inviteUserName = member.label;
                this.conversitionId = val.id;
                member.connect = true;
                this.inviteUser = member;
                this.$refs.chatbox.inviteMember();
            }
        }
    },
    methods:{
        setScriptTip(scriptTip) {
            this.scriptTip = scriptTip;
        },
        addContent(simulationText) {
            const text = {};
            const member = this.currentMemberList.find(member=>{
                return member.id == simulationText.memberId;
            });
            if (member) {
                text.self = (this.$store.state.user.id == member.userId);
                text.member = member;
                text.chatTime = simulationText.time;
                text.src = simulationText.audioPath;
                text.message = simulationText.content;
            }
            return text;
        },
        resetCoversition() {
            this.conversitionId = '';
            this.scriptTip = '';
            this.isHasCoversition = false;
            this.currentMemberList = [];
            this.chatContentList = [];
            this.isStartRecord = false;
            this.inviteUserName = '';
            this.createCoversition = false;
            this.inviteUser = {};
            this.isQuitShow = false;

        }
    }

};
</script>