<template>
  <div>
    <chat-box
      ref="chatbox"
      :group="group"
      :user-role="userRole"
    />
    <script-tip ref="scriptTip" :offset="offset" @allowCreatCoversition="allowCreatCoversition" />
  </div>
</template>
<script>
import ChatBox from '../jointTrainingNew/chatView/chatBox.vue';
import ScriptTip from '@/views/newMap/displayNew/scriptDisplay/component/scriptTip';
// import {getAllConversition} from '@/api/chat';
export default {
    name:'DemonChat',
    components:{
        ChatBox,
        ScriptTip
    },
    props: {
        group: {
            type: String,
            required: true
        },
        userRole: {
            type: String,
            required: true
        },
        offset: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            isHasCoversition:false,
            conversitionId:'',
            currentMemberList:[],
            chatContentList:[],
            activeTrainList:[],
            isStartRecord:false,
            inviteUserName:'',
            createCoversition:true,
            inviteUser:{},
            isQuitShow:false,
            treeData:[],
            driverList:[],
            simulationUsers:{}
        };
    },
    computed:{
        isShow() {
            return this.userRole != '' &&
             this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE' &&
            !this.isHasCoversition && this.createCoversition;
        }
    },
    watch:{
        // '$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始获取仿真成员
        //     getSimulationMemberList(this.group).then(resp => {
        //         this.driverList = [];
        //         this.treeData = [];
        //         const result = covertMemberData(this.activeTrainList, resp.data);
        //         this.driverList = result.driverList;
        //         this.treeData = [{
        //             label: '行调',
        //             id: 'dispatcher',
        //             type: 'role',
        //             children: result.deviceListData[0]
        //         }, {
        //             label: '车站值班员',
        //             id: 'stationSupervisor',
        //             type: 'role',
        //             children: result.deviceListData[2]
        //         }, {
        //             label: '司机',
        //             id: 'driver',
        //             type: 'role',
        //             children: result.deviceListData[3]
        //         }, {
        //             label: '通号',
        //             id: 'maintainer',
        //             type: 'role',
        //             children: result.deviceListData[1]
        //         }, {
        //             label: '车辆段',
        //             id: 'depotDispatcher',
        //             type: 'role',
        //             children: result.deviceListData[4]
        //         }];
        //         this.memberData = result.lastMemberList;
        //     }).catch(() => {
        //         this.$messageBox('获取仿真成员列表失败！');
        //     });
        // },
        // 创建会话
        // '$store.state.socket.createConversition':function(val) {
        //     if (this.memberData.length > 0) {
        //         const conversitionMember = this.memberData.find(member=>{ return member.userId == this.$store.state.user.id; });
        //         if (conversitionMember && val.memberIds.includes(conversitionMember.id)) {
        //             // 当前用户创建的会话
        //             if (val.creatorId !== conversitionMember.id) {
        //                 this.$message.success(this.coverName(val) + '与你开启会话');
        //             }
        //             this.isHasCoversition = true;
        //             this.isStartRecord = true;
        //             this.isQuitShow = true;
        //             this.conversitionId = val.id;
        //             const memberList = [];
        //             val.memberIds.forEach(id=>{
        //                 if (val.creatorId == id) {
        //                     const member = this.memberData.find(member=>{ return member.id == id; });
        //                     member.connect = true;
        //                     memberList.push(member);
        //                 } else {
        //                     const member = this.memberData.find(member=>{ return member.id == id; });
        //                     // member.connect = false;
        //                     member.connect = true;
        //                     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) {
        //     this.conversitionId = val.id;
        //     if (this.conversitionId) {
        //         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.isStartRecord = true;
        //                     this.isQuitShow = true;
        //                     this.inviteUser = {};
        //                     this.isHasCoversition = true;
        //                 }
        //             }
        //         }
        //         this.currentMemberList = memberList;
        //     }
        // },
        // 会话聊天消息
        // '$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')) {
        //         const content = this.addContent(simulationText.message);
        //         this.chatContentList.push(content);
        //         if (!content.self) {
        //             this.$refs.chatbox.addAudioList(content);
        //         }
        //     }
        // },
        // 按计划行车的列车列表更新(更新司机列表)
        // '$store.state.map.activeTrainListChange': function (val) {
        //     const activeTrainList = this.$store.state.map.activeTrainList;
        //     activeTrainList.sort((a, b) => {
        //         return parseInt(a) - parseInt(b);
        //     });
        //     if (this.driverList.length > 0) {
        //         const driverList = [];
        //         if (activeTrainList && activeTrainList.length) {
        //             activeTrainList.forEach(groupNumber => {
        //                 const drivers = this.driverList.find(driver=>{
        //                     return driver.deviceCode == groupNumber;
        //                 });
        //                 if (drivers) {
        //                     driverList.push(drivers);
        //                 }
        //             });
        //         }
        //         this.treeData[2].children = driverList;
        //         this.memberData = [...this.treeData[0].children, ...this.treeData[1].children, ...this.treeData[2].children, ...this.treeData[3].children, ...this.treeData[4].children];
        //     } else {
        //         this.activeTrainList = activeTrainList;
        //     }
        // },
        // 剧本执行完成消息
        '$store.state.socket.scriptFinish':function(val, old) {
            this.$message('剧本演出完毕');
            this.$refs.scriptTip.resetScriptTip();
        },
        // 退出会话消息
        // '$store.state.socket.overConversition': function (val) {
        //     if (val.id === this.conversitionId) {
        //         this.conversitionId = '';
        //         this.currentMemberList = [];
        //         this.chatContentList = [];
        //         this.isHasCoversition = false;
        //         this.isStartRecord = false;
        //     }
        // },
        // '$store.state.socket.exitConversition': function (val) {
        //     const member = this.memberData.find(member=>{ return member.memberId == val.member; });
        //     if (val.id === this.conversitionId && member.userId == this.$store.state.user.id) {
        //         this.conversitionId = '';
        //         this.currentMemberList = [];
        //         this.chatContentList = [];
        //         this.isHasCoversition = false;
        //         this.isStartRecord = false;
        //     } else if (val.id === this.conversitionId) {
        //         const mList = [];
        //         this.currentMemberList.forEach(member => {
        //             if (member.memberId != val.memberId) {
        //                 mList.push(member);
        //             }
        //         });
        //         this.currentMemberList = mList;
        //     }
        // },
        // 邀请会话的消息
        '$store.state.socket.inviteSimulationConversition':function(val) {
            // const conversitionMember = this.memberData.find(member=>{ return member.id == val.creatorId; });
            // if (conversitionMember) {
            //     this.inviteUserName = conversitionMember.label;
            //     this.conversitionId = val.id;
            //     conversitionMember.connect = true;
            //     conversitionMember.online = true;
            //     this.inviteUser = conversitionMember;
            //
            //     this.currentMemberList.push(conversitionMember);
            //     const member = this.memberData.find(member=>{ return member.id == val.memberId; });
            //     member.connect = true;
            //     this.currentMemberList.push(member);
            //     this.isStartRecord = true;
            //     this.isHasCoversition = true;
            //     // this.$refs.chatbox.inviteMember();
            //     this.$message.success(this.inviteUserName + '与你开启会话');
            // }
        }

    },
    mounted() {
    },
    methods:{
        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;
        },
        coverName(inviteUser) {
            const member = this.memberData.find(member=>{ return member.id == inviteUser.creatorId; });
            return member.label;
        },
        clearAllData() {
            this.resetCoversition();
            this.createCoversition = true;
            this.$refs.scriptTip.resetScriptTip();
        },
        setMembers(roleId) {
            this.memberData.map(member=>{
                if (member.id == roleId) {
                    member.userId = this.$store.state.user.id;
                    member.userName = this.$store.state.user.nickname;
                    member.disabled = true;
                } else {
                    member.userId = '';
                    member.userName = '';
                    member.disabled = false;
                }
                const userName = member.userName ? '-' + member.userName : '';
                const name = member.name == undefined ? '' : '-' + member.name;
                member.label = member.type + member.deviceName + name + userName;
            });
        },
        resetCoversition() {
            this.conversitionId = '';
            this.isHasCoversition = false;
            this.currentMemberList = [];
            this.chatContentList = [];
            this.isStartRecord = false;
            this.inviteUserName = '';
            this.inviteUser = {};
            this.isQuitShow = false;
        },
        allowCreatCoversition() {
            this.createCoversition = true;
        },
        resetScriptTip() {
            this.$refs.scriptTip.resetScriptTip();
        }
        // isAudienceInitData() {
        //     getAllConversition(this.group).then(resp => {
        //         const messages = [];
        //         if (resp.data && resp.data.length) {
        //             debugger;
        //             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);
        //                 });
        //                 if (this.userRole !== 'AUDIENCE') {
        //                     const user = this.simulationUsers[this.$store.state.user.id];
        //                     this.isConversitionCreator = conversation.creatorId == user.memberId;
        //                     !conversation.over && conversation.memberList.forEach(member =>{
        //                         if (member.memberId == user.memberId && member.connect) {
        //                             this.conversitionMemberList = conversation.memberList;
        //                             this.conversitionId = conversation.id;
        //                             this.messageList = [];
        //                             conversation.messageList.forEach(message => {
        //                                 const member = this.memberData[message.memberId];
        //                                 message.src = `/audio/${message.audioPath}`;
        //                                 if (member) {
        //                                     message.self = this.$store.state.userId == member.userId;
        //                                 }
        //                                 this.privateMessageList.push(message);
        //                                 this.messageList.push(message);
        //                             });
        //                         }
        //                     });
        //                 }
        //             });
        //         }
        //         this.commonMessageList = messages.sort(this.sortByMessageTime);
        //         // this.initCommonMemberList();
        //     });
        // }
    }
};
</script>
