rt-sim-training-client/src/views/newMap/chatView/chatBox.vue

<template>
  <div class="chatBox" :class="{'active': drawer}" :style="{'bottom':bottom+'px'}">
    <div class="menuTrainListBtn" @click="clickBtn">
      <template v-if="userRole == 'DISPATCHER'">
        <p style="margin: 0;">调</p>
        <p style="margin: 0;">度</p>
        <p style="margin: 0;">电</p>
        <p style="margin: 0;">话</p>
      </template>
      <template v-if="userRole != 'AUDIENCE' && userRole != 'DISPATCHER'">
        <p style="margin: 0;">电</p>
        <p style="margin: 0;">话</p>
      </template>
      <template v-if="userRole == 'AUDIENCE'">
        <p style="margin: 0;">通</p>
        <p style="margin: 0;">话</p>
        <p style="margin: 0;">记</p>
        <p style="margin: 0;">录</p>
      </template>
    </div>
    <div class="chat-box-main">
      <!-- v-if="!conversitionId && userRole !== 'AUDIENCE' && !commonConversation" -->
      <template v-if="userRole != 'AUDIENCE'">
        <div class="chat-box-header">
          <!-- <div class="chat-box-header-title">
            <el-input v-model="queryMember" size="small" placeholder="请输入搜索人员">
              <el-button slot="append" icon="el-icon-search" />
            </el-input>
          </div> -->
          <div class="chat-setting" @click="handleSetting()">
            <i class="el-icon-s-tools" />
          </div>
          <!-- <div v-if="!commonConversation" class="chat-setting" @click="goCommonConversation">
            <el-tooltip effect="dark" content="公共会话" placement="top-start">
              <i class="el-icon-chat-line-round" />
            </el-tooltip>
          </div>
          <div v-if="conversitionId && commonConversation" class="chat-setting" @click="cancelCommonConversation">
            <el-tooltip effect="dark" content="私有会话" placement="top-start">
              <i class="el-icon-chat-round" />
            </el-tooltip>
          </div> -->
        </div>
        <div class="chat-box-content">
          <div v-for="(item, index) in treeData" :key="index" class="proper_box">
            <div class="proper_title">{{ item.label }}</div>
            <div v-for="(data, i) in item.children" :key="i" style="position: relative; width: 73px; heigth: 73px; margin-left: 5px; float: left;">
              <div v-if="data.show && item.id == 'driver'" class="proper_content_box" :class="{'active': data.active}" @click="handleCheckChange(data)">{{ data.label + (data.userId? '(' + (simulationUsers[data.userId]||{}).nickName + ')': '') }}</div>
              <div v-if="item.id != 'driver'" class="proper_content_box" :class="{'active':data.active}" @click="handleCheckChange(data)">{{ data.label + (data.userId? '(' + (simulationUsers[data.userId]||{}).nickName + ')': '') }}</div>
              <div v-if="data.loading" class="mask_loading">
                <i class="el-icon-loading" style="margin-bottom: 4px;" />
                <span>呼叫中</span>
              </div>
            </div>
          </div>
        </div>
        <div class="chat-box-content1">
          <chat-content
            ref="chatContent"
            :project="project"
            :is-answering="IsAnswering"
            :conversition-id="conversitionId"
            :conversition-member-list="conversitionMemberList"
            :message-list="messageList"
            :my-member-id="myMemberId"
            :simulation-users="simulationUsers"
            :common-conversation="commonConversation"
            :user-role="userRole"
            @changeMessageList="changeMessageList"
          />
        </div>
        <div class="chat-box-footer">
          <div v-if="!conversitionId">
            <div style="width: 400px;font-size: 14px;line-height: 38px; padding-left: 10px;">{{ userString }}</div>
            <el-button size="mini" type="primary" class="chat-box-footer-create" :loading="createLoading" @click="createCoversition()">
              <i class="el-icon-phone" />
            </el-button>
          </div>
          <div v-else>
            <el-button v-if="isButtonShow && !commonConversation" size="mini" type="danger" class="chat-box-footer-create chat-box-footer-quit" :loading="quitLoading" @click="quitConversition()">
              <i class="el-icon-phone" />
            </el-button>
            <el-button v-if="isButtonShow && !commonConversation" class="chat-box-footer-create chat-box-footer-send" :class="{'active': recordSending}" size="mini" type="primary" @click="startRecording()">
              <el-progress id="record_progress_bar" type="circle" :show-text="false" :percentage="100/60*seconds" :width="40" :stroke-width="2" status="success" />
              <i v-if="recordSending" class="el-icon-close close_icon" @click.stop="cancleRecording()" />
              <span class="iconfont icon-yuyin">&#xe62b;</span>
            </el-button>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="chat-box-header">
          <div class="chat-setting" @click="handleSetting()">
            <i class="el-icon-s-tools" />
          </div>
          <!-- <div v-if="!conversitionId && userRole !== 'AUDIENCE'" class="chat-setting" @click="cancelCommonConversation">
            <el-tooltip effect="dark" content="成员列表" placement="top-start">
              <i class="el-icon-s-custom" />
            </el-tooltip>
          </div> -->
          <!-- <div v-if="!commonConversation" class="chat-setting" @click="goCommonConversation">
            <el-tooltip effect="dark" content="公共会话" placement="top-start">
              <i class="el-icon-chat-line-round" />
            </el-tooltip>
          </div>
          <div v-if="conversitionId && commonConversation" class="chat-setting" @click="cancelCommonConversation">
            <el-tooltip effect="dark" content="私有会话" placement="top-start">
              <i class="el-icon-chat-round" />
            </el-tooltip>
          </div> -->
        </div>
        <div class="chat-box-content chat-box-content_audience">
          <chat-content
            ref="chatContent"
            :project="project"
            :is-answering="IsAnswering"
            :conversition-id="conversitionId"
            :conversition-member-list="conversitionMemberList"
            :message-list="messageList"
            :my-member-id="myMemberId"
            :simulation-users="simulationUsers"
            :common-conversation="commonConversation"
            :user-role="userRole"
            width="360px"
            @changeMessageList="changeMessageList"
          />
          <chat-member-list ref="chatMemberList" :conversition-member-list="conversitionMemberList" :simulation-users="simulationUsers" />
        </div>
      </template>
    </div>
    <chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" />
    <chat-tooltip ref="chatToolTip" :group="group" :conversition-id="conversitionId" :invite-user-name="inviteUserName" @acceptUser="acceptUser" />

  </div>
</template>
<script>
import ChatTooltip from './chatTooltip';
import ChatSetting from './chatSetting';
import ChatContent from './chatContent';
import ChatMemberList from './chatMemberList';
import RecordRTC from 'recordrtc';
import {sendSimulationConversition, startConversition, overSimulationConversition, getAllConversition} from '@/api/chat';
import { getSessionStorage } from '@/utils/auth';
export default {
    name: 'ChatBox',
    components:{
        ChatSetting,
        ChatContent,
        ChatMemberList,
        ChatTooltip
    },
    props: {
        group: {
            type: String,
            required: true
        },
        userRole: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            drawer: false,
            bottom:15,
            recordSending:false,
            commonConversation: false,
            seconds:0,
            inter:null,
            recorders: null,
            microphone:null,
            createLoading:false,
            inviteUserName:'',
            form:{
                language:'zh',
                sex:'1'
            },
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            // queryMember: '',
            activeTrains: [],
            firstClick: true,
            memberData: {},
            simulationUsers: {},
            userString: '',
            memberIdList: [],
            memberObject: '',
            quitLoading: false,
            conversitionMemberList: [],
            commonMemberList: [],
            messageList: [], // 消息列表
            commonMessageList: [],
            temData: [],
            conversitionStateMap:{},
            myMemberId: ''
        };
    },
    computed:{
        isButtonShow() {
            return this.userRole != 'AUDIENCE';
        },
        project() {
            return getSessionStorage('project');
        },
        IsAnswering() {
            return !(this.$route.path.includes('refereeJsxtDisplay'));
        },
        userId() {
            return this.$store.state.user.id;
        },
        conversitionId() {
            return (this.conversitionStateMap[this.myMemberId] || {conversitionId:''}).conversitionId;
        },
        privateMemberList() {
            return (this.conversitionStateMap[this.myMemberId] || {privateMemberList: []}).privateMemberList;
        },
        privateMessageList() {
            return (this.conversitionStateMap[this.myMemberId] || {privateMessageList: []}).privateMessageList;
        }
    },
    watch:{
        // queryMember(val) {
        //     if (this.$refs.tree) {
        //         this.$refs.tree.filter(val);
        //     }
        // },
        conversitionId(val) {
            if (val) {
                this.conversitionMemberList = this.privateMemberList;
                this.messageList = [...this.privateMessageList];
            }
        },
        userRole(val) {
            if (val === 'AUDIENCE') {
                this.goCommonConversation();
                this.myMemberId = '';
            } else {
                this.myMemberId = (this.simulationUsers[this.userId] || {}).memberId;
            }
        },
        '$store.state.map.mapViewLoadedCount':function(val) {
            const object = document.querySelector('.menuButton');
            if (object) {
                const objectBottom = object.offsetHeight || 0;
                this.bottom = objectBottom + 15;
            } else {
                this.bottom = 15;
            }
            this.isAudienceInitData();
        },
        '$store.state.training.prdType': function(val) {
            this.$nextTick(() => {
                const object = document.querySelector('.menuButton');
                if (object) {
                    const objectBottom = object.offsetHeight || 0;
                    this.bottom = objectBottom + 15;
                } else {
                    this.bottom = 15;
                }
            });
        },
        '$store.state.socket.createConversition':function(val) {
            val.memberList.forEach(member => {
                this.$set(this.conversitionStateMap, member.memberId, {conversitionId: val.id, privateMemberList: val.memberList, privateMessageList: []});
            });
        },
        '$store.state.socket.inviteSimulationConversition':function(val) {
            const inviteUser = this.memberData[val.creatorId];
            this.inviteUserName = inviteUser.label;
            this.$refs.chatToolTip.doShow();
        },
        '$store.state.map.activeTrainListChange': function (val) { // 按计划行车的列车列表更新标识
            this.activeTrains = [];
            const activeTrainList = this.$store.state.map.activeTrainList;
            if (activeTrainList && activeTrainList.length) {
                activeTrainList.forEach(groupNumber => {
                    this.activeTrains.push(groupNumber);
                });
            }
            this.filterNode();
            // if (this.$refs.tree) {
            //     this.$refs.tree.filter(this.queryMember);
            // }
        },
        '$store.state.training.simulationUserList': {
            handler(val, o) {
                this.simulationUsers = {};
                if (val && val.length) {
                    val.forEach(user => {
                        this.simulationUsers[user.userId] = user;
                    });
                    this.myMemberId = this.simulationUsers[this.userId].memberId;
                }
            },
            deep: true
        },
        '$store.state.socket.exitConversition': function (val) {
            for (const memberId in this.conversitionStateMap) {
                if (memberId == val.memberId) {
                    this.conversitionStateMap[memberId].conversitionId = '';
                    this.conversitionStateMap[memberId].privateMemberList = [];
                    this.conversitionStateMap[memberId].privateMessageList = [];
                } else if ( this.conversitionStateMap[memberId].conversitionId == val.id ) {
                    const mList = [];
                    this.conversitionStateMap[memberId].privateMemberList.forEach(member => {
                        if (member.memberId != val.memberId) {
                            mList.push(member);
                        }
                    });
                    this.conversitionStateMap[memberId].privateMemberList = mList;
                }
            }
            // 有人退出会话更新人员列表
            this.treeData.forEach(item => {
                if (item.children && item.children.length) {
                    item.children.forEach(data =>{
                        if (data.id == val.memberId) {
                            data.active = false;
                        }
                    });
                }
            });
        },
        '$store.state.training.memberList': function (val) {
            if (val && val.length) {
                this.memberData = this.$store.state.training.memberData;
                const dispatcherList = [];
                const electricDispatcherList = [];
                const depotDispatcherList = [];
                const stationSupervisorList = [];
                const driverList = [];
                const maintainerList = [];
                val.forEach(item => {
                    const device = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
                    this.memberData[item.id]['active'] = false;
                    this.memberData[item.id]['loading'] = false;
                    switch (item.type) {
                    case 'DISPATCHER':
                        this.memberData[item.id].label = '行调' + (item.name || '');
                        dispatcherList.push(this.memberData[item.id]);
                        break;
                    case 'ELECTRIC_DISPATCHER':
                        electricDispatcherList.push(this.memberData[item.id]);
                        break;
                    case 'DEPOT_DISPATCHER':
                        this.memberData[item.id].label = '车辆段';
                        depotDispatcherList.push(this.memberData[item.id]);
                        break;
                    case 'STATION_SUPERVISOR':
                        this.memberData[item.id].label = device.name;
                        // this.memberData[item.id].label = '值班员-' + device.name;
                        stationSupervisorList.push(this.memberData[item.id]);
                        break;
                    case 'DRIVER':
                        // this.memberData[item.id].label = '司机-列车' + item.deviceCode;
                        this.memberData[item.id]['show'] = false;
                        this.memberData[item.id].label = item.deviceCode;
                        driverList.push(this.memberData[item.id]);
                        break;
                    case 'MAINTAINER':
                        this.memberData[item.id].label = '通号' + (item.name || '');
                        // this.memberData[item.id].label = item.name || '';
                        maintainerList.push(this.memberData[item.id]);
                        break;
                    }
                });
                // { label: '全部集中站', value: 'allConcentrateStation', active: false, sign: 'DEVICE_STATION' },
                stationSupervisorList.push({ label: '全部车站', value: 'allStation', active: false, sign: 'ALL_STATION' });
                driverList.push({ label: '所有列车', value: 'allTrain', show: false, active: false, sign: 'ALL_TRAIN' });
                this.treeData = [{
                    label: '行调',
                    id: 'dispatcher',
                    type: 'role',
                    children: dispatcherList
                }, {
                    label: '车站值班员',
                    id: 'stationSupervisor',
                    type: 'role',
                    children: stationSupervisorList
                }, {
                    label: '司机',
                    id: 'driver',
                    type: 'role',
                    children: driverList
                }, {
                    label: '通号',
                    id: 'maintainer',
                    type: 'role',
                    children: maintainerList
                }, {
                    label: '车辆段',
                    id: 'depotDispatcher',
                    type: 'role',
                    children: depotDispatcherList
                }];
                this.temData = [...dispatcherList, ...stationSupervisorList, ...driverList, ...maintainerList, ...depotDispatcherList];
                this.initCommonMemberList();
                // this.$nextTick(() => {
                //     if (this.$refs.tree) {
                //         this.$refs.tree.filter(this.queryMember);
                //     }
                // });
            }
        },
        '$store.state.socket.simulationReset': function () {
            this.conversitionStateMap = {};
        },
        '$store.state.socket.acceptConversionInvite':function(val) {
            this.treeData.forEach(data => {
                data.children && data.children.forEach(item => {
                    if (val.memberId == item.id && val.memberId != this.myMemberId) {
                        if (item.active) {
                            item.loading = false;
                        } else {
                            item.active = true;
                        }
                    }
                });
            });
        }
    },
    mounted() {
        this.firstClick = true;
        this.$nextTick(() => {
            this.filterNode();
        });
    },
    methods:{
        clickBtn() {
            if (this.drawer) {
                this.drawer = false;
            } else {
                this.drawer = true;
                // this.$nextTick(() => {
                //     if (this.$refs.tree) {
                //         this.$refs.tree.filter(this.queryMember);
                //     }
                // });
            }
        },
        acceptUser(memberId) {
            this.treeData.forEach(data => {
                data.children && data.children.forEach(item => {
                    if (memberId == item.id) {
                        item.active = true;
                    }
                });
            });
        },
        setSetting(data) {
            this.form = data;
        },
        // 创建会话 拨打电话
        createCoversition() {
            if (this.memberIdList.length) {
                this.createLoading = true;
                this.treeData.forEach(data => {
                    data.children && data.children.forEach(item => {
                        if (item.active) {
                            item.loading = true;
                        }
                    });
                });
                startConversition(this.group, this.memberIdList, this.memberObject).then(resp => {
                    this.messageList = [];
                    this.memberIdList = [];
                    this.memberObject = '';
                    // this.$message.success('创建会话成功！');
                    this.createLoading = false;
                }).catch((error) => {
                    this.$message.error(error.code == '3005' ? '创建会话失败:仿真会话成员忙线中！' : '创建仿真失败！');
                    this.createLoading = false;
                });
            } else {
                this.userString = '请选择人员';
            }
        },
        coverName(inviteUser) {
            const member = this.$store.state.training.memberData[inviteUser.creatorId];
            if (member.userId) {
                const user = this.simulationUsers[member.userId];
                return member.label + '(' + user.nickName + ')';
            } else {
                return member.label;
            }
        },
        // 语音录制开始
        startRecording() {
            const that = this;
            if (!this.recordSending) {
                if (!this.recordSending && !this.recorders && !this.microphone) {
                    this.$refs.chatSetting.doClose();
                    const StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
                    navigator.getUserMedia(
                        { audio: true } // 只启用音频
                        , function (stream) {
                            that.microphone = stream;
                            that.recorders = new RecordRTC(that.microphone, {
                                type: 'audio',
                                recorderType: StereoAudioRecorder,
                                numberOfAudioChannels: 1,
                                bitsPerSecond:256000,
                                desiredSampRate: 16000
                            });
                            that.recorders.startRecording();
                            that.recordSending = true;
                            that.inter = setInterval(() => {
                                if (that.seconds < 60) {
                                    that.seconds++;
                                } else {
                                    clearInterval(that.inter);
                                }
                            }, 1000);
                        }, function (error) {
                            switch (error.code || error.name) {
                            case 'PERMISSION_DENIED':
                            case 'PermissionDeniedError':
                                that.$message({
                                    showClose: true,
                                    message: '用户拒绝提供信息',
                                    type: 'error'
                                });
                                break;
                            case 'NOT_SUPPORTED_ERROR':
                            case 'NotSupportedError':
                                that.$message({
                                    showClose: true,
                                    message: '浏览器不支持硬件设备',
                                    type: 'error'
                                });
                                break;
                            case 'MANDATORY_UNSATISFIED_ERROR':
                            case 'MandatoryUnsatisfiedError':
                                that.$message({
                                    showClose: true,
                                    message: '无法发现指定的硬件设备',
                                    type: 'error'
                                });
                                break;
                            default:
                                that.$message({
                                    showClose: true,
                                    message: '无法打开麦克风',
                                    type: 'error'
                                });
                                break;
                            }
                        }
                    );
                }
            } else {
                this.stopRecording(); // 发送语音
            }
        },
        cancleRecording() {
            if (this.microphone) {
                clearInterval(this.inter);
                this.seconds = 0;
                this.microphone.stop();
                this.microphone = null;
                this.recordSending = false;
                this.recorders = null;
            }
        },
        // 停止录制 发送语音
        stopRecording() {
            const that = this;
            this.recorders.stopRecording(function(blobURL) {
                clearInterval(that.inter);
                that.seconds = 0;
                const blob = that.recorders.getBlob();
                const fd = new FormData();
                fd.append('file', blob);
                sendSimulationConversition(that.group, that.conversitionId, fd)
                    .then((data) => {
                    })
                    .catch(error => {
                        console.log(error);
                    });
                if (that.microphone) {
                    that.microphone.stop();
                    that.microphone = null;
                    that.recordSending = false;
                    that.recorders = null;
                }
            });
        },
        handleSetting() {
            this.$refs.chatSetting.doShow();
        },
        // 点击按钮事件
        handleCheckChange(data, jude = false) {
            if (data.userId && data.userId == this.$store.state.user.id) {
                return;
            }
            if (data.value == 'allConcentrateStation' || data.value == 'allStation' || data.value == 'allTrain') {
                data.active = !data.active;
                this.memberObject = data.sign;
            } else {
                if (!jude) {
                    data.active = !data.active;
                }
                const member = data;
                if (data.active) {
                    if (member && member.type === 'DRIVER' && !this.activeTrains.includes(member.deviceCode)) {
                        return;
                    }
                    if (member && member.userId) {
                        this.memberIdList.push(member.id);
                    } else if (member) {
                        this.memberIdList.push(member.id);
                    }
                } else {
                    this.memberIdList.forEach((id, index) => {
                        if (id == member.id) {
                            this.memberIdList.splice(index, 1);
                        }
                    });
                }
            }
        },
        // 过滤全部列车 显示正在运行的列车
        filterNode() {
            this.treeData[2] && this.treeData[2]['children'].forEach(train => {
                train.show = false;
                if (this.activeTrains.includes(train.deviceCode)) {
                    train.show = true;
                }
                if (train.value == 'allTrain') {
                    train.show = true;
                }
            });
        },
        // 退出会话
        quitConversition() {
            this.quitLoading = true;
            overSimulationConversition(this.group, this.conversitionId).then(resp => {
                this.conversitionMemberList = [];
                this.messageList = [];
                this.quitLoading = false;
                // this.$nextTick(() => {
                //     this.$refs.tree && this.$refs.tree.filter(this.queryMember);
                // });
                this.treeData.forEach(item => {
                    if (item.children && item.children.length) {
                        item.children.forEach(data =>{
                            data.active = false;
                            data.loading = false;
                        });
                    }
                });
            }).catch(() => {
                this.$message.error('退出会话失败！');
                this.quitLoading = false;
            });
        },
        sortByMessageTime(message1, message2) {
            const time1 = new Date(message1.time).valueOf();
            const time2 = new Date(message2.time).valueOf();
            return time1 - time2;
        },
        // 获取历史消息
        isAudienceInitData() {
            getAllConversition(this.group).then(resp => {
                const messages = [];
                if (resp.data && resp.data.length) {
                    resp.data.forEach(conversation => {
                        (conversation.messageList || []).forEach(message => {
                            const member = this.memberData[message.memberId];
                            message.src = `/audio/${message.audioPath}`;
                            message.members = conversation.memberList;
                            if (member) {
                                message.self = this.$store.state.userId == member.userId;
                            }
                            messages.push(message);
                        });
                        const tempMessageList = [];
                        !conversation.over && conversation.messageList.forEach(message => {
                            message.src = `/audio/${message.audioPath}`;
                            tempMessageList.push(message);
                        });
                        !conversation.over && conversation.memberList.forEach(member => {
                            this.conversitionStateMap[member.memberId] = {
                                conversationId: conversation.id,
                                privateMemberList: conversation.memberList,
                                privateMessageList: tempMessageList
                            };
                        });
                    });
                }
                this.commonMessageList = messages.sort(this.sortByMessageTime);
                this.initCommonMemberList();
            });
        },
        // 初始化人员列表
        initCommonMemberList() {
            const temDispatcherList = [];
            const temStationSupervisorList = [];
            const temMaintainerList = [];
            const temDriverList = [];
            const temDepotDispatcherList = [];
            this.$store.state.training.memberList.forEach(item =>{
                switch (item.type) {
                case 'DISPATCHER':
                    temDispatcherList.push({memberId: item.id, connect:true });
                    break;
                case 'STATION_SUPERVISOR':
                    temStationSupervisorList.push({memberId: item.id, connect:true });
                    break;
                case 'MAINTAINER':
                    temMaintainerList.push({memberId: item.id, connect:true });
                    break;
                case 'DRIVER':
                    temDriverList.push({memberId: item.id, connect:true });
                    break;
                case 'DEPOT_DISPATCHER':
                    temDepotDispatcherList.push({memberId: item.id, connect:true });
                    break;
                }
            });
            this.commonMemberList = [...temDispatcherList, ...temStationSupervisorList, ...temMaintainerList, ...temDriverList, ...temDepotDispatcherList];
            if (this.userRole == 'AUDIENCE' || this.commonConversation) {
                this.conversitionMemberList = [];
                this.messageList = [...this.commonMessageList];
                this.conversitionMemberList = this.commonMemberList;
            }
        },
        changeMessageList(data) {
            this.commonMessageList.push(data.message);
            // if (this.conversitionStateMap[data.message.memberId]) {
            //     this.conversitionStateMap[data.message.memberId].privateMessageList.push(data.message);
            // }
            if (this.conversitionStateMap[data.message.memberId]) {
                (this.conversitionStateMap[data.message.memberId].privateMemberList || []).forEach(member => {
                    this.conversitionStateMap[member.memberId] && this.conversitionStateMap[member.memberId].privateMessageList.push(data.message);
                });
            }
            if (this.commonConversation) {
                this.messageList.push(data.message);
            } else if (!this.commonConversation && this.conversitionId === data.id) {
                this.messageList.push(data.message);
            }
        },
        goCommonConversation() {
            !this.commonConversation && this.$refs.chatContent && this.$refs.chatContent.conversationChange();
            this.commonConversation = true;
            this.conversitionMemberList = this.commonMemberList;
            this.messageList = [...this.commonMessageList];
        },
        cancelCommonConversation() {
            this.commonConversation && this.$refs.chatContent && this.$refs.chatContent.conversationChange();
            this.commonConversation = false;
            this.conversitionMemberList = this.privateMemberList;
            this.messageList = [...this.privateMessageList];
            // this.$nextTick(() => {
            //     this.$refs.tree && this.$refs.tree.filter(this.queryMember);
            // });
        },
        clearAllData() {
            this.recordSending = false;
            this.inter = null;
            this.recorders = null;
            this.microphone = null;
            this.treeData = [];
            this.conversitionMemberList = [];
            this.messageList = [];
        },
        // 剧本重置清空公有会话
        resetCoversition() {
            this.commonMessageList = [];
            this.conversitionStateMap = {};
        }
    }
};
</script>
<style lang="scss" scoped>
.chatBox {
	position: absolute;
    left: 0;
	top: calc((100% - 600px) / 2);
    height: 600px;
	width: 503px;
	transform: translateX(-503px);
	transition: all 0.4s;
	z-index: 9;
	&.active{
		transform: translateX(0px);
	}
}
.proper_box{
	overflow: hidden;
	.proper_title{
		width: 100%;
		text-align: center;
		height: 30px;
		font-size: 14px;
		background: #F27867;
		line-height: 30px;
		margin-bottom: 5px;
	}
	.proper_content_box{
		float: left;
		width: 73px;
		height: 73px;
		font-size: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #676688;
		border-radius: 4px;
		margin-left: 5px;
		margin-bottom: 5px;
		padding: 0 3px;
		text-align: center;
		cursor: pointer;
		color: #fff;
		position: relative;
		&.active{
			background: #6BBE16;
		}
	}
	.mask_loading{
		position: absolute;
        width: 73px;
        height: 73px;
        left: 5px;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0,0,0,0.4);
		flex-direction: column;
        border-radius:4px;
        font-size: 14px;
	}
}
.menuTrainListBtn {
    background: #fff;
    text-align: center;
    border-radius: 0px 6px 6px 0px;
    position: absolute;
    top: 40%;
    z-index: 2;
	transform: translateX(502px);
    cursor: pointer;
	z-index: 9;
	display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
	padding: 7px 4px;
	.el-icon-more{
		font-size: 20px;
		margin-top: 9px;
		transform-origin: 50% 50%;
		transform: rotate(90deg);
		margin-left:0px;
	}
}
.chat-box-header{
    width: 100%;
    height: 40px;
    border-bottom: 1px #dedede solid;
	.chat-box-header-title{
		font-size: 15px;
		margin-left: 15px;
		display: inline-block;
		margin-top: 5px;
		width: 70%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

.chat-box-content{
    width: 100%;
    height: 300px;
    position: relative;
	overflow: auto;
}
.chat-box-content_audience{
	height: calc(100% - 40px);
}
.chat-box-content1{
	height: 200px;
	position: relative;
	border-top: 1px #9a9a9a solid;
	margin-top: 8px;
}

.chat-box-footer{
    display: inline-block;
    width: 100%;
	height: 55px;
	position: relative;
	border-top: 1px solid #afafaf;
}
.chat-setting{
    float: right;
    line-height: 40px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 16px;
}
.chat-createGroup{
    float: right;
    line-height: 40px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 16px;
    position: relative;
}
.chat-box-footer-tool{
    width: 100%;
    height: 17px;
}
.minimality {
    float: right;
    line-height: 40px;
    margin-right: 10px;
    cursor: pointer;
    font-size:16px;
}
.chat-box-main{
    position: absolute;
    width: 100%;
    left: 0;
    height: 100%;
    top: 0;
    border-right: 1px #dedede solid;
    z-index: 4;
    background: #fff;
    border-radius: 5px;
    left: 0;
    // font-size:0;
}
.chat-box-footer-create{
    font-size: 16px;
    text-align: center;
    color: #fff;
    position: absolute;
	right: 5px;
	top: 6px;
	line-height: 30px;
    cursor: pointer;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: green;
	border: none;
	display: flex;
    justify-content: center;
    align-items: center;
}
.chat-box-footer-quit{
	background: red;
}
.chat-box-footer-send{
    background: #F2F2F2;
    right: 55px;
	cursor: pointer;
	.icon-yuyin{
		color: #333;
		font-size: 24px;
		margin: 0;
	}
	&.active{
		.icon-yuyin{
			color: green;
		}
	}
	.close_icon{
		position: absolute;
		top: -15px;
		left: 11px;
		font-size: 16px;
		color: #333;
		font-weight: 600;
	}
}
.showMembers{
    float: right;
    line-height: 40px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 17px;
}
#record_progress_bar{
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
}
.chat_record_tip{
    height: 28px;
    display: inline-block;
    background: #dfe6ee;
    width: 370px;
    font-size: 13px;
    border-top: 1px #d8dce5 solid;
    position: absolute;
    bottom: 0;
    left: 0;
}
.chat-box-footer-send.disbled{
    cursor: no-drop;
}

</style>