Customer-Service-Web/service/src/pages/TheCurrentSession.vue

<template>
	<div class="row allAlignment">
		<leftNav/>
		<div>
			<hader/>
			<messageCenter></messageCenter>
			<div class="row">
				<!-- 聊天列表模块 -->
				<div class="sessionList">
					<el-collapse>
						<el-collapse-item>
							<template slot="title">
								<span>会话中 <span>({{sessionList.length }})</span></span>
								<!-- <span class="sessionList_span">排队人数(10)</span> -->
							</template>
							<div :class="{session_choose:dataIndex ==index &&  sessionType ==1}"
								 class="user session_style" @click="chooseDialogue(1,index)"
								 v-for="(item,index) in sessionList">
								<div class="row allAlignment item-center">
									<span style="font-weight:bold;color:#666;font-size:14px;">{{item.name}}</span>
									<span style="color:#999;font-size:.12px;">{{item.intime}}</span>
								</div>
								<div class="row allAlignment item-center">
									<div style="width:90%;font-size:.12px;" class="ellipsis">
										<span v-html="item.text"></span>
									</div>
									<span v-if="item.num > 0" class="markNumber">{{item.num}}</span>
								</div>
							</div>
						</el-collapse-item>
						<el-collapse-item>
							<template slot="title">
								<span>已离线<span>({{offlineList.length }})</span></span>
							</template>
							<div :class="{session_choose:dataIndex ==index &&  sessionType ==2}"
								 class="user session_style" @click="chooseDialogue(2,index)"
								 v-for="(item,index) in offlineList">
								<div class="row allAlignment item-center">
									<span style="font-weight:bold;color:#999;font-size:14px;">{{item.name}}</span>
									<span style="color:#999;font-size:12px;">{{item.intime}}</span>
								</div>
								<div class="row allAlignment item-center">
									<div style="width:90%;color:#999;font-size:12px;" class="ellipsis">
										<span v-html="item.text"></span>
									</div>
								</div>
							</div>
						</el-collapse-item>
						<el-collapse-item>
							<template slot="title">
								<span>排队中<span>({{lineUp.length}})</span></span>
							</template>
							<div class="user" v-for="item in lineUp">
								<div class="row allAlignment item-center">
									<span style="font-weight:bold;color:#666;font-size:14px;">{{item}}</span>
									<span style="color:#999;font-size:12px;">{{item}}</span>
								</div>
							</div>
						</el-collapse-item>
					</el-collapse>
				</div>

				<!-- 聊天模块 -->
				<div class="chat">
					<div class="chatTop row item-center allAlignment" style="padding:0 10px;">
						<p class="ellipsis"
						   style="width:40%;font-size:14px;font-weight:bold;color:#666;"
						>{{sessionName}}</p>
						<div class="row item-center rightAlignment"
							 style="width:50%;height:100%;color:#999;font-size:12px;">
							<p class="row item-center" @click="getServiceList()">
								<!-- 转接 -->
								<el-popover placement="right" width="400" trigger="click">
									<el-table :data="transferList">
										<el-table-column width="150" property="groupname" label="组名"></el-table-column>
										<el-table-column width="100" property="kfname" label="姓名"></el-table-column>
										<el-table-column label="操作">
											<template slot-scope="scope">
												<el-button size="mini" @click="transfer(scope.$index, scope.row)">转入
												</el-button>
											</template>
										</el-table-column>
									</el-table>
									<el-button slot="reference"><i style="font-size:14px" class="el-icon-refresh"></i>
										转接
									</el-button>
								</el-popover>
							</p>
							<p class="row item-center" style="margin-left:10px;">
								<el-button size="mini" type="text" @click="open">
									<i style="font-size:15px" class="el-icon-close"></i>结束服务
								</el-button>
							</p>
						</div>
					</div>

					<div class="chat-box scroll" id='chat_box'>
						<div v-for="(item,index) in data" :key="index">
							<!-- 系统转接 -->
							<!-- <div class="row center" v-if="item.type == 'system'">
							  <p style="font-size:12px;color:#bbb;">09.30.45 由问答机器人转接</p>
							</div> -->

							<!-- 用户消息 -->
							<div style="padding:0 10px;margin-top:20px;" v-if="item.type == 'user'">
								<div style="height:37px;font-size:.12px;color:#bbb;"
									class="row item-center"
								>{{item.time}}
								</div>
								<div class="row">
									<div v-if="item.content.img != ''">
										<!-- :fit="contain "  style="width: 100%; height: 100px"-->
										<el-image style="width: 200px; height: 100px"
												  @click="handlePictureCardPreview(img_http+item.content.img)"
												  :src="img_http + item.content.img" :fit="fit"></el-image>
									</div>
									<p v-else class="chatMsg user_box" v-html="item.content.text"></p>
								</div>
							</div>

							<!-- 客服消息 -->
							<div style="padding:0 10px;margin-top:20px;" class="rightAlignment"
								 v-if="item.type == 'service'">
								<div style="height:37px;font-size:12px;color:#bbb;"
									 class="row item-center rightAlignment">{{item.time}}
								</div>
								<div class="row item-center rightAlignment">
									<div v-if="item.content.img !=''">
										<!-- :fit="contain"  style="background:#F5F5F5; border-radius: 10px 0 10px 10px;"-->
										<el-image style="width: 200px; height: 100px"
												  @click="handlePictureCardPreview(img_http+item.content.img)"
												  :src="img_http + item.content.img" :fit="fit"></el-image>
									</div>
									<p v-else class="chatMsg message_box" v-html="item.content.text"></p>
								</div>
							</div>

							<!-- 点击图片放大 -->
							<el-dialog :visible.sync="dialogVisible">
								<img width="100%" :src="dialogImageUrl" alt="">
							</el-dialog>
						</div>
					</div>
					<div class="key column allAlignment">
						<div class="frce row item-center allAlignment">
							<div class="row ">
								<img class="hover"
									 :src="isFrce?require('@/assets/img/frcea.png'):require('@/assets/img/frce.png')"
									 @click="frceClick" style="margin-right:16px;"/>
								<input type="file" id="file" style="display:none;" @change="uploadIMG"/>
								<label for="file" class="row item-center" style="height:100%">
									<img class="hover" src="@/assets/img/img.png"/>
								</label>
							</div>
							<div>
								<i :class="{disable : is_eva_btn }" @click="evaluation()"
								   class="el-icon-postcard hover evaluation"></i>
							</div>
						</div>
						<textarea draggable="false" class="input scroll" id="input" v-model="inputValue"
								  @keyup.enter="listenEnter($event)" @keyup.ctrl.enter="lineFeed()"></textarea>
						<div class="row rightAlignment" style="width: 100%;">
							<div @click="sendMessage()" class="msgInputBtn row center">发送</div>
						</div>
						<div class="frceBox scroll" v-if="isFrce">
							<div class="row wrap average">
								<p class="row center" v-for="(item,index) in frceArr" :key="item.id">
									<img class="hover" @click="frceCenterClick(item)"
										 :src="require(`@/assets/img/${index}.gif`)"/>
								</p>
							</div>
						</div>
					</div>
					<!-- 发送消息音频提示 -->
					<!-- <audio id="send" src="@/assets/audio/send.wav"></audio> -->
				</div>

				<!-- 快捷回复模块 -->
				<div class="FastReply">
					<div class="FastReplyHader row item-center">快捷回复</div>
					<div class="FastReplySwitch row item-center average">
						<p :class="FastReplySwitch=='one'?'active':''" class="hover"
						   @click="FastReplySwitchClick('one')">公有库</p>
						<span style="width:1px;height:18px;background:#ccc;display: block;"></span>
						<p :class="FastReplySwitch=='tow'?'active':''"
						   class="hover"
						   @click="FastReplySwitchClick('tow')"
						>私有库</p>
					</div>
					<!-- <div class="serch row center">
					  <div class="serchBox">
						<input placeholder="搜索快捷回复" v-model="serch" type="text" />
						<img src="@/assets/img/serch.png" />
					  </div>
					</div> -->
					<!-- <div> -->
					<!-- <el-collapse>
					  <el-collapse-item>
						<template slot="title" name="el-icon-caret-bottom">
						  <span>常用语</span>
						</template> -->
					<div class="FastReplyBox">
						<!-- <ul class="FastReplyList"> -->
						<!-- <li @click="getLanguage(item.content)" class="row cursor_text" v-for="item in FastReply.sysWords" :key="item.id"> -->
						<div @click="getLanguage(item.content)" class="row cursor_text item-center"
							 v-for="item in FastReply.sysWords" :key="item.id" v-if="FastReplySwitch == 'one'">
							<span class="title_span" style=" width: 100%">#{{item.title}}</span>
							<!-- <div class="ellipsis" style=" width: 70%">

								<span class="content_span">{{item.content}}</span>
							</div> -->
						</div>

						<!-- </li> -->

						<div @click="getLanguage(item.content)" class="row cursor_text item-center"
							 v-for="item in FastReply.userWords" :key="item.id" v-if="FastReplySwitch == 'tow'">
							<span class="title_span" style=" width: 100%">#{{item.title}}</span>
							<!-- <div class="ellipsis" style=" width: 70%">

								<span class="content_span">{{item.content}}</span>
							</div> -->
						</div>
						<!-- <li class="row cursor_text" v-for="item in FastReply.userWords" :key="item.id">
						  <div v-if="FastReplySwitch == 'tow'" class="row item-center">
						  <p style="margin-right:10px;color:#666;font-size:14px;font-weight: bold;"
						  >#{{item.title}}</p>
						  <p class="ellipsis" style="width: 60%; color:#999;font-size:14px;">{{item.content}}</p>
							</div>
						</li> -->
						<!-- </ul> -->
					</div>
					<!-- </el-collapse-item>
				  </el-collapse> -->
					<!-- </div> -->
				</div>

				<!-- 用户信息模块 -->
				<div class="userinfo">
					<div style="color:#666;font-weight:bold;font-size:14px;">访问信息</div>
					<div style="margin-top:10px;color:#999;font-size:14px;" class="userData wrap">
						<!-- <p>来源：{{session_user_info.website}}</p>  -->
						<p @dblclick="get_ip_Info" class="get_ip" :data-clipboard-text="session_user_info.ip" >IP地址：{{session_user_info.ip}}</p>
						<p>来源终端：{{session_user_info.system}}-{{session_user_info.browse}}</p>
					</div>

					<div style="color:#666;font-weight:bold;font-size:14px; margin-top:30px;">用户信息</div>
					<div style="margin-top:10px;color:#999;font-size:14px;" class="userData wrap">
						<div class="user_info_box">
							<span>账号：</span>
							<input class="user_text" style="background: #ECF4FF;"
								v-model="session_user_info.account_name" readonly type="text">
						</div>
						<div class="user_info_box">
							<span>标签：</span>
							<el-select v-model="value" @focus='focusFun' @change='labelChange' placeholder="请选择">
								<el-option
										v-for="item in options"
										:key="item.id"
										:label="item.name"
										:value="item.id">
								</el-option>
							</el-select>
						</div>
						<div class="user_info_box">
							<span>昵称：</span>
							<el-input style="width:70%" v-model="session_user_info.nick_name"
									  placeholder="请输入内容"></el-input>
						</div>
						<div class="user_info_box">
							<span>手机：</span>
							<el-input style="width:70%" v-model="session_user_info.account_phone"
									  placeholder="请输入内容"></el-input>
						</div>
						<div class="user_info_box">
							<span>邮箱：</span>
							<el-input style="width:70%" v-model="session_user_info.account_email"
									  placeholder="请输入内容"></el-input>
						</div>
						<div class="user_info_box">
							<span>地址：</span>
							<el-input style="width:70%" v-model="session_user_info.address"
									  placeholder="请输入内容"></el-input>
						</div>
						<p>访客备注：</p>
					</div>
					<textarea draggable="false" class="userDataInput" v-model="session_user_info.remark"
							  style="margin-top:10px;color:#999;"></textarea>
					<div class=" row rightAlignment">
						<div class="userBtn row center" @click="bt_update()">保存</div>
					</div>
				</div>
			</div>
			<el-dialog
			:close-on-click-modal="true"
			:close-on-press-escape ="true"
			title="是否发送图片"
			:visible.sync="dialogPaste"
			width="35%">
			<!-- :before-close="handleClose" -->
			
			<!-- <span>这是一段信息</span> -->
			<el-image 
                :src="pasteUrl" :fit="fit"></el-image>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogPaste = false">取 消</el-button>
				<el-button type="primary" @click="handleClose()">确 定</el-button>
			</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import "@/css/index.css";
	import Clipboard from 'clipboard';
	import {mapState, mapGetters} from 'vuex'; //先要引入
	import leftNav from "@/components/leftNav";
	import hader from "@/components/hader";
	import messageCenter from "@/components/messageCenter";

	export default {
		name: "TheCurrentSession",
		data() {
			return {
				/***********************************/
				inputValue: "", //输入框内容
				isFrce: false, //表情包开关
				frceArr: [], //表情包数组
				// data: [], //当前对话数据
				// dataIndex:0,//定位当前会话，默认是0
				FastReply: "", //快捷回复
				FastReplySwitch: "one", //快捷回复开关
				user_info: '',//用户信息
				token: "",
				time: "",
				sessionList: [],//会话列表
				offlineList: [],//离线列表
				transferList: [],//转接列表
				// sessionType:1,//选择列表状态默认未1(1是会话中，2是离线)
				lineUp: [],//排队列表
				conversationId: '',//会话工单
				// sessionName:'',//当前会话用户名字
				session_user_info: {},//当前会话用户信息
				img_http:'http://kfadmin.bocai186.com',//图片路径域
				// img_http: 'http://192.168.2.187:8090',//图片路径域
				fit: 'scale-down',//图片渲染样式
				is_eva_btn: true,//
				trigger_condition: 0,//评价触发条件
				webTime: '',//客服会话时间
				session_marked: '',//客服当前会话标记
				sensitive: [],//客服敏感词数据
				userSensitiveWords: [],//用户敏感词
				sensitiveNumber: 0,//关键词次数
				isTrue: true,//编辑用户信息按钮开关
				options: [],
				label_id: '',
				value: '请选择',
				dialogPaste: false,
				dialogVisible: false, //图片放大
				dialogImageUrl: '', // 放大的图片
				dialogUrl: false,
				pasteUrl:'',//截屏图片
				// fit:'contain',//
			}
		},
		/**
		 *
		 */
		methods: {
			/***************图片放大*************** */
			handlePictureCardPreview(url) {
				this.dialogImageUrl = url;
				this.dialogVisible = true;
			},


			/************回车提交************/
			listenEnter(event) {
				if (event.keyCode === 13) {
					this.inputValue = this.inputValue.replace(/\s/g, '')
					// this.inputValue = this.inputValue.replace(/\n /g,'')
					this.sendMessage(); // 发送文本
				}
			},

			/************ctrl+center 换行***********/
			lineFeed() {
				this.inputValue = this.inputValue + '\n'
			},

			/********************发送获取标签数据指令*******************/
			focusFun() {
				// console.log('haha');
				this.$websocket.send(JSON.stringify({type: 'userlabeall'}));
			},

			/**************************获取选择标签ID****************/
			labelChange(e) {
				this.label_id = e;
			},

			/******************消息数据接收********************/
			chatMessage(redata) {
				// 用户接入数据
				if (redata.message_type == "connect") {
					let _this = this;

					this.webTime = redata.data.user_info.intime;
					let arr = [
						redata.data,
						this.offlineList,
						this.sessionList,
						this.sessionType,
						this.dataIndex,
						this.data,
						this.sessionName
					]
					_this.$public.visitorsConnect(arr, function (data) {
						//离线匹配列表访客链接回调
						_this.$store.dispatch("SET_OFFLINE", data);
					}, function (data, list, offline, type, num, dataList, name) {
						// console.log(name)
						//新访客链接回调
						_this.sessionType = type;
						_this.dataIndex = num;
						//将用户添加到会话列表中
						_this.sessionList.push(data.user_info);
						//获取接入的用户信息
						_this.get_user_info(list);
						//获取接入的用户信息写入vuex
						_this.$store.dispatch("SET_SESSION", list);
						_this.$store.dispatch("SET_OFFLINE", offline);
						_this.$store.dispatch("SET_TYPE", type);//选择类型(会话/离线)
						_this.$store.dispatch("SET_NUM", num);//列表下标
						_this.$store.dispatch("SET_CURRENT", dataList);//当前会话数据
						if (name) {
							_this.$store.dispatch("SET_SESSION_NAME", name);//当前会话对象名
						}
					})
				}


				//用户离线后会话窗口切换
				if (redata.message_type == "userClose") {
					let _this = this;
					let arr = [
						redata.data,
						this.sessionList,
						this.offlineList,
						this.sessionType,
						this.dataIndex,
						this.sessionName,
						this.data
					]
					_this.$public.userOffline(arr, function (session, offline, type, index, name, list, userInfo) {
						_this.sessionList = [];
						_this.sessionList = session;
						_this.offlineList = [];
						_this.offlineList = offline;
						_this.sessionType = type;
						_this.dataIndex = index;
						this.$store.dispatch("SET_CURRENT", list);//当前会话数据
						_this.$store.dispatch("SET_NUM", index);
						_this.$store.dispatch("SET_TYPE", type);
						_this.$store.dispatch("SET_SESSION", session);
						_this.$store.dispatch("SET_OFFLINE", offline);
						_this.get_user_info(userInfo);
					})
				}

				//用户会话结束窗口切换
				if (redata.message_type == "delUser") {
					let _this = this;
					let arr = [
						redata.data,
						this.sessionList,
						this.offlineList,
						this.sessionType,
						this.dataIndex,
						this.sessionName,
						this.data
					]
					_this.$public.sessionEnd(arr, function (session, offline, type, index, name, list, userInfo) {
						_this.sessionList = [];
						_this.sessionList = session;
						_this.offlineList = [];
						_this.offlineList = offline;
						_this.sessionType = type;
						_this.dataIndex = index;
						_this.$store.dispatch("SET_CURRENT", list);//当前会话数据
						_this.$store.dispatch("SET_NUM", index);
						_this.$store.dispatch("SET_TYPE", type);
						_this.$store.dispatch("SET_SESSION", session);
						_this.$store.dispatch("SET_OFFLINE", offline);
						_this.get_user_info(userInfo);
					})
				}


				//获取标签数据信息
				if (redata.message_type == "userlabeall") {
					if (Object.values(redata.data).length > 0) {
						this.options = [];
						this.options = Object.values(redata.data);
						this.value = this.options[0].name;
					}

				}


				//接收系统操作信息状态在线客服列表
				if (redata.message_type == "onlinekfs") {
					this.transferList = [];
					this.transferList = this.transferList.concat(redata.data);
				}

				//接收会话时间
				if (redata.message_type == "webTime") {
					// console.log(this.data);
					this.$set(this.data[this.session_marked], 'time', redata.data.webTime);
				}

				//客服手动转接用户成功
				if (redata.message_type == "trunconnect") {
					this.sessionList.splice(this.dataIndex, 1);
					this.$message({
						message: '转接用户成功...',
						type: 'success'
					});
					if (this.sessionList.length > 1) {
						this.dataIndex = 0;
						this.$store.dispatch("SET_NUM", 0);
						// this.data = []

					} else {
						// this.data = [];
						this.$store.dispatch("SET_CURRENT", []);//当前会话数据
						this.$store.dispatch("SET_SESSION_NAME", '');
					}
				}
				this.automaticRolling();
			},


			/*********************图片发送*********************/
			uploadIMG(e) {
				//console.log(e);
				let self = this;
				let files = e.target.files || e.dataTransfer.files;
				if (!files.length) return;
				const isJPG = files.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG) {
					this.$message.error('上传只能是图片格式!');
					return false;
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
					 return false;
				}

				let picavalue = files[0];
				//console.log(picavalue);
				if (picavalue.size / 1000 > 20000) {
					this.$message({
						message: "图片过大不支持上传",
						type: "warning"
					});
				} else {
					this.$public.imgPreview(picavalue, function (imgSrc, formData) {
						self.upImg(formData)
					});
				}
			},

			/****/
			upImg(formData){
				let self = this;
				// 数据结构请求
				self.post('api/' + self.$ports.uploadImg, formData).then(res => {
					//console.log(res.data.data.src)
					if (res.data.code == 1) {
						let isFirst = true;
						//判断客服是否发送的第一句话
						if (self.data.length > 0) {
							for (let i = 0; i < self.data.length; i++) {
								if (self.data[i].type == 'service') {
									isFirst = false;
									break;
								}
							}
						}
						let obj = {
							text: '',
							img: res.data.data.src,
							type: false,
						};
						let chatList = self.sessionList[self.dataIndex];
						chatList.data.push({type: 'service', content: obj, time:self.webTime});
						// self.data = [];
						// self.data = chatList.data;
						// self.$store.dispatch("SET_CURRENT", []);
						self.$store.dispatch("SET_CURRENT", chatList.data);
						let type = 'chatMessage';
						let data = {
							from_name: self.user_info.user_name,//发送者
							from_avatar: self.user_info.avatar,//发送者头像
							from_id: "KF" + self.user_info.id,//发送者id
							content: JSON.stringify(obj),
							to_id: self.sessionList[self.dataIndex].id,
							to_name: self.sessionList[self.dataIndex].name,
							conversationId: self.sessionList[self.dataIndex].conversationId,
							isFirst: isFirst,//是否是第一句话
							sensitiveNumber: 0,//敏感词次数
						}
						self.websocketsend(JSON.stringify({type, data}))


					}
				})
			},

			/*****************转接会话用户确认******************/
			transfer(e) {

				if (this.sessionList.length > 0) {
					this.$confirm('此操作将当前用户转出, 是否继续?', '温馨提示！', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						let type = "changeOtherhKeFu";
						let data = {
							conversationId: this.sessionType == 1 ? this.sessionList[this.dataIndex].conversationId : this.offlineList[this.dataIndex].conversationId,
							togroup: this.transferList[e].groupid,
							fromgroup: this.user_info.group_id,
							toukfuid: this.transferList[e].kfuid,
							fromkfuid: "KF" + this.user_info.id,
							uid: this.sessionType == 1 ? this.sessionList[this.dataIndex].id : this.offlineList[this.dataIndex].id,
							word: '',
						}
						//console.log({type,data});
						this.websocketsend(JSON.stringify({type, data}))
					}).catch(() => {

					})
				} else {
					this.$message({
						message: '亲！您没有和用户会话怎么能转接呢。',
						type: 'warning'
					});
				}

			},

			/******************获取客服人员列表*****************/
			getServiceList() {
				//console.log(12313);
				this.websocketsend(JSON.stringify({"type": "getkfonlines"}))
			},

			/*****************切换用户会话对象******************/
			chooseDialogue(type, index) {
				let data = [];
				this.sessionType = type;
				this.$store.dispatch("SET_TYPE", type);
				this.dataIndex = index;
				this.$store.dispatch("SET_NUM", index);
				if (type == 1) {
					data = this.sessionList[index].data;
					this.session_user_info = this.sessionList[index];
					this.$set(this.sessionList[index], 'num', 0);
					this.$store.dispatch("SET_SESSION_NAME", this.sessionList[index].name);
				} else if (type == 2) {
					data = this.offlineList[index].data;
					this.$store.dispatch("SET_SESSION_NAME", this.offlineList[index].name);
					this.session_user_info = this.offlineList[index];
				}
				//this.data = data;
				this.$store.dispatch("SET_CURRENT", data);//当前会话数据
			},

			/***************关闭当前和用户聊天对话***************/
			open() {
				let _this = this;
				if (this.sessionType == 1) {
					if (this.sessionList.length < 1) return
				} else {
					if (this.offlineList.length < 1) return
				}
				this.$confirm('此操作将关闭和当前用户通话, 是否继续?', '温馨提示！', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let to_id = this.sessionType == 1 ? this.sessionList[this.dataIndex].id : this.offlineList[this.dataIndex].id;
					let conversationId = this.sessionType == 1 ? this.sessionList[this.dataIndex].conversationId : this.offlineList[this.dataIndex].conversationId;
					let data = {
						"type": "kfCloseUser",
						data: {
							to_id,
							kf_id: "KF" + _this.user_info.id,
							group_id: _this.user_info.group_id,
							conversationId: conversationId,
							type:3,
						}
					}
					if (this.sessionType == 1) {
						this.sessionList.splice(this.dataIndex, 1);
						if (this.sessionList.length > 0) {
							this.$store.dispatch("SET_CURRENT", this.sessionList[0]);//当前会话数据
							this.$store.dispatch("SET_SESSION_NAME", this.sessionList[0].name);
						} else {
							this.$store.dispatch("SET_CURRENT", []);//当前会话数据
							this.$store.dispatch("SET_SESSION_NAME", '');
						}
					} else {
						this.offlineList.splice(this.dataIndex, 1);
						this.$store.dispatch("SET_CURRENT", []);//当前会话数据
						this.$store.dispatch("SET_SESSION_NAME", '');
					}

					this.websocketsend(JSON.stringify(data))
				}).catch(() => {
					// this.$message({
					//   type: 'info',
					//   message: '已取消删除'
					// });
				});
			},

			/*****************数据发送方法调用******************/
			websocketsend(Data) {
				this.$websocket.send(Data);
				this.automaticRolling();
			},

			// 消息发送声音提示
			sendAudio() {
				let send = new Audio()
				send.src = "../../static/audio/send.wav"
				send.play()
			},

			/*********************发送消息*********************/
			sendMessage() {
				if (!this.inputValue) return;
				if (this.sessionType == 2) {
					this.$message({
						message: '只能给在线用户发送消息哦...',
						type: 'warning'
					});
					return false;
				}
				// if(this.offlineList.length <= 0 ) return
				let isFirst = true, sensitiveNumber = 0;
				this.isFrce = false;
				//判断客服是否发送的第一句话
				if (this.data.length > 0) {
					for (let i = 0; i < this.data.length; i++) {
						if (this.data[i].type == 'service') {
							isFirst = false;
							break;
						}
					}
				}
				//检测发送信息是否含有敏感词
				let sensitive_data = this.$public.shieldingKeyword(this.$public.turnFace(this.inputValue, this.$frce), this.sensitive);
				//组合发送数据
				let data = {
					from_name: this.user_info.user_name,//发送者
					from_avatar: this.user_info.avatar,//发送者头像
					from_id: "KF" + this.user_info.id,//发送者id
					content: JSON.stringify({
						text: this.inputValue,
						img: '',
					}),
					to_id: this.sessionList[this.dataIndex].id,
					to_name: this.sessionList[this.dataIndex].name,
					conversationId: this.sessionList[this.dataIndex].conversationId,
					isFirst: isFirst,//是否是第一句话
					sensitiveNumber: this.sensitiveNumber,//敏感词次数
				}
				let chatList = this.sessionList[this.dataIndex];


				//有敏感词提示并且禁止发送
				if (sensitive_data.num == 0) {
					// 本地储存
					chatList.data.push({
						type: 'service', content: {
							text: this.$public.turnFace(this.inputValue, this.$frce),
							img: '',
						}, time: this.time[1]
					});
					//this.data = [];
					//标记当前会话位置
					this.session_marked = chatList.data.length - 1;
					//this.data = chatList.data;
					this.$store.dispatch("SET_CURRENT", chatList.data);//当前会话数据
					this.websocketsend(JSON.stringify({type: 'chatMessage', data}))
					this.sendAudio();
					this.inputValue = '';
					this.sensitiveNumber = 0;
				} else {
					this.$message({
						message: '敏感词' + sensitive_data.text,
						type: 'warning'
					});
					//计算关键词次数
					this.sensitiveNumber = this.sensitiveNumber + sensitive_data.num;
				}


			},

			/******************开启或关闭表情包******************/
			frceClick() {
				this.isFrce = !this.isFrce;
			},

			/*******************发送评价指令*******************/
			evaluation() {
				if (!this.is_eva_btn && this.sessionType == 1) {
					this.$message({
						message: '评价指令已发送',
						type: 'success'
					});
					let type = 'getEvaluate';
					let data = {
						conversationId: this.sessionList[this.dataIndex].conversationId,
						to_id: this.sessionList[this.dataIndex].id,
					}
					this.websocketsend(JSON.stringify({type, data}));
					this.is_eva_btn = true;
				} else if (this.sessionType == 2) {
					this.$message.error('用户已离线指令无法发送');
				} else {
					this.$message.error('评价指令无法发送');
				}
			},

			/******************查询快捷数据信息*****************/
			quickReplyInfo() {
				let obj = {
					headers: {
						apiToken: this.$md5("userwords" + "customer-service" + "index" + this.time[0] + "service"),
						userToken: this.token
					}
				};
				this.get("api" + this.$ports.FastReply.userWords, obj).then(res => {
					if (res.data.code == 1) {
						this.FastReply = res.data.data;
					}
				});
			},

			/******************获取快捷语文字******************/
			getLanguage(e) {
				// console.log(e, "公有库");
				this.inputValue = this.inputValue + e;
			},

			/*****************表情包输入框赋值******************/
			frceCenterClick(text) {
				this.inputValue = this.inputValue + "#" + text + "/";
				//console.log(this.inputValue);
			},

			/******************* 快捷语库开关 ******************/
			FastReplySwitchClick(num) {
				this.FastReplySwitch = num;

			},

			/*****************获取当前聊天用户信息****************/
			get_user_info(type) {
				if (type.length > 0) {
					this.session_user_info = {};
					if (this.dataIndex <= type.length) {

						let obj = {
							headers: {
								"apiToken": this.$md5('accountInfo' + "customer-service" + 'service' + this.time[0] + 'service'),
								'userToken': this.token
							},
							account_id: type[this.dataIndex].id
						};

						this.post('api' + this.$ports.userInfo.accountInfo, obj).then(res => {
							if (res.data.code == 1) {
								// console.log(res.data.data);
								this.session_user_info = res.data.data;
								console.log(this.options);
								for (let i = 0; this.options.length > i; i++) {
									if (this.options[i].id == res.data.data.label_id) {
										this.value = this.options[i].name;
									}
									break;
								}
								//this.value = res.data.data.label_id
							}
						})


						// this.session_user_info = type[this.dataIndex].id;
						// console.log(type[this.dataIndex].id);
						// this.value = this.session_user_info.label;
					}
				} else {
					this.session_user_info = {};
				}
			},

			/********************获取配置信息********************/
			get_config_info() {
				let obj = {
					headers: {
						apiToken: this.$md5("minround" + "customer-service" + "evaluate" + this.time[0] + "index"),
						userToken: this.token
					}
				};
				this.get("api/" + this.$ports.minRound, obj).then(res => {
					if (res.data.code == 1) {
						this.trigger_condition = res.data.data.systemconfig_data;
					}
				});
			},

			/***********发送消息或接收消息后自动滚动高度*************/
			automaticRolling() {
				this.$nextTick(() => {
					let msg = document.getElementById('chat_box') // 获取对象
					msg.scrollTop = msg.scrollHeight // 滚动高度

				})
			},

			/**************获取敏感词*****************/
			getSensitive() {
				let obj = {
					headers: {
						"apiToken": this.$md5('sensitivewords' + "customer-service" + 'index' + this.time[0] + 'index'),
						'userToken': this.token
					}
				};
				this.post('api' + this.$ports.sensitiveWords, '', obj).then(res => {
					if (res.data.code == 1) {
						res.data.data.serverSensitive.forEach(res => {
							this.sensitive.push(res.sensitivewords_word)
						})
						res.data.data.userSensitive.forEach(res => {
							this.userSensitiveWords.push(res.sensitivewords_word)
						})
					}
				})
			},

			/********************获取vuex数据***********************/
			get_vuex_info() {
				let getters = this.$store.getters
				this.token = getters.get_user_info.token;//token
				this.user_info = getters.get_user_info;//用户消息
				console.log(this.user_info,'用户信息');
				this.sessionList = getters.get_session;//会话
				this.offlineList = getters.get_offline;//离线
				this.dataIndex = getters.get_num; //getters.get_num;列表下标
				this.sessionType = getters.get_type;//选择类型
				// this.data = getters.get_current;//当前会话数据
				// this.sessionName = getters.get_session_name;//会话对象名字
				this.time = JSON.parse(sessionStorage.getItem("time"));
			},

			/**********************编辑用户信息**********************/
			bt_update() {

				if (!this.isTrue) return false;
				this.isTrue = false;
				let obj = {
					headers: {
						"apiToken": this.$md5('update' + "customer-service" + 'service' + this.time[0] + 'service'),
						'userToken': this.token
					},
					account_id: this.session_user_info.id,
					nick_name: this.session_user_info.nick_name,
					account_email: this.session_user_info.account_email,
					phone: this.session_user_info.account_phone,
					address: this.session_user_info.address,
					remark: this.session_user_info.remark,
					label_id: this.label_id

				};

				this.post('api' + this.$ports.userInfo.update, obj).then(res => {
					if (res.data.code == 1) {
						this.$message({
							showClose: true,
							message: `恭喜你，${res.data.msg}`,
							type: 'success'
						});
					}
					this.isTrue = true;
				})

			},

			/******************qq截图粘贴---获取剪切板数据*****************/
			getClipboardData( e ){
				// 添加到事件对象中的访问系统剪贴板的接口
				let clipboardData = e.clipboardData,
					i = 0,
					items, item, types;
			
				if( clipboardData ){
					items = clipboardData.items;
					if( !items ){
						return;
					}
					item = items[0];
					// 保存在剪贴板中的数据类型
					types = clipboardData.types || [];
					for( ; i < types.length; i++ ){
						if( types[i] === 'Files' ){
							item = items[i];
							break;
						}
					}
					// 判断是否为图片数据
					if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
						this.imgReader( item );
					}
				}
			},

			/**********qq截图粘贴---获取剪切板图片信息进行转换blob***********/
			imgReader( item ){
				let _this = this;
				var blob = item.getAsFile(),reader = new FileReader();
				// 读取文件后将其显示在网页中
				reader.onload = function( e ){
					var img = new Image();
					img.src = e.target.result;
					_this.dialogPaste =true;
					_this.pasteUrl = e.target.result;
					// console.log(img.src)
					//document.body.appendChild( img );
				};
				// 读取文件
				reader.readAsDataURL( blob );
			},

			/*******************qq截图粘贴---监听时间捆绑*****************/
			paste(){
				document.getElementById( 'input' ).addEventListener( 'paste',this.getClipboardData);
			},

			/**********************qq截图粘贴---发送截图*****************/
			handleClose(done) {
				this.dialogPaste = false; 
				let blob = this.$public.dataURItoBlob(this.pasteUrl)
				let self = this;
				var formData = new FormData();
                    formData.append("file", blob);
				self.upImg(formData);
			},

			/****************双击获取ip*******************/
			get_ip_Info(){
				var clipboard = new Clipboard(".get_ip")
				clipboard.on('success', e => {
					// console.log('复制成功')
					this.$message({
						message: '复制成功',
						type: 'success'
					});
				// 释放内存
				clipboard.destroy()
				})
				clipboard.on('error', e => {
				// 不支持复制
					this.$message({
				    	message: '该浏览器不支持自动复制',
						type: 'warning'
					});
				// 释放内存
				clipboard.destroy()
				})
			}
		},
		/**
		 * 挂载前执行
		 */
		mounted() {
			//获取vuex里面数据
			this.get_vuex_info();
			let _this = this;
			this.get_config_info();

			//客服人员登陆会话
			if (this.$store.getters.get_is_init) {
				// this.$websocket.onmessage = this.;
				_this.websocketsend(JSON.stringify({
					type: 'init',
					data: {
						uid: 'KF' + _this.user_info.id,
						group: _this.user_info.group_id,
						token: this.token,
						name: _this.user_info.user_name,
						avatar: _this.user_info.user_avatar,
					}
				}));
				this.$store.dispatch("SET_IS_INIT", false);
			}
			//获取客服快捷语
			this.quickReplyInfo();
			//获取敏感词
			this.getSensitive();
			//获取
			this.frceArr = this.$frce;
			//调用截图粘贴捆绑方法
			this.paste();
			
		},
		beforeDestroy(){
			document.getElementById( 'input' ).removeEventListener('paste',this.getClipboardData)
		},

		/**
		 * 事件监听
		 */
		watch: {
			get_session_message(e) {
				this.chatMessage(e)
			},
			/*****************评价按钮显示隐藏处理*****************/
			get_is_eva_btn(data) {
				if (this.sessionType != 2) {
					if (this.data.length > this.trigger_condition) {
						if (!this.data[this.dataIndex].isEva) {
							//   this.is_eva_btn = true;
							// }else{
							this.data[this.dataIndex].isEva = true;
							this.is_eva_btn = false;
						}
					} else {
						this.is_eva_btn = true;
					}
				} else {
					this.is_eva_btn = true;
				}
			}
		},

		/**
		 * 计算属性
		 */
		computed: {
			...mapGetters({
				data: 'get_current',
				sessionName: 'get_session_name',
			}),

			get_session_message() {
				return this.$store.getters.get_session_message;
			},


			/****************判断是否可以点击评价*****************/
			get_is_eva_btn() {
				return this.data;
			}
		},

		components: {
			leftNav,
			hader,
			messageCenter
		}
	};
</script>

<style>
	.el-icon-arrow-right:before {
		content: "\E791";
		color: #ccc;
	}

	.session_choose {
		background: #F6F8FF;
	}

	.session_style:hover {
		/* background:#F6F8FF; */
		background: #ECF4FF;
		cursor: pointer;
	}

	.sessionList {
		width: 21vw;
		background: #fff;
	}

	.markNumber {
		display: inline-block;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #f60;
		font-size: 12px;
		color: #fff;
		text-align: center;
		line-height: 20px;
	}

	.el-collapse-item__header {
		position: relative;
		font-size: 14px;
		font-weight: bold;
		color: #666;
		font-family: PingFang SC;
		padding-left: 32px;
		height: 49px;
		justify-content: space-between;
		padding-right: 10px;
	}

	.el-collapse-item__header.is-active {
		border-bottom: 1px solid #d5e5ff;
	}

	.el-collapse-item__header {
		border-bottom: 1px solid #d5e5ff;
	}

	.el-icon-arrow-right {
		position: absolute;
		left: 10px;
		top: auto;
	}

	.sessionList_span {
		color: #999;
	}

	.user {
		padding: 10px;
	}

	.evaluation {
		font-size: 24px;
		color: #969696;
	}

	.el-collapse-item__content {
		padding-bottom: 0;
	}

	.chat {
		width: 29vw;
		height: 93vh;
		border: 1px solid #d5e5ff;
		border-top: none;
		background: #fff;
	}

	.user_text {
		border: 1px solid #ECF4FF;
		color: #999;
		line-height: 30px;
		width: 80%;
	}

	.user_text:focus {
		outline: none;
	}

	.chatTop {
		height: 50px;
		border-bottom: 1px solid #d5e5ff;
	}

	.chat-box {
		height: 62vh;
		/* background: red; */
		/* padding: 40px 0; */
		border-bottom: 1px solid #d5e5ff;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.chatMsg {
		display: inline-block;
		padding: 10px;
		font-size: 14px;
		max-width: 85%;
		word-wrap: break-word;
	}

	p {
		margin-block-start: 0em;
		margin-block-end: 0em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
	}

	.frce {
		height: 0.38rem;
		width: 100%;
		padding: 16px 10px;
	}

	.input {
		height: 100px;
		background: #fff;
		resize: none;
		font-size: 14px;
		margin: 0 10px;
		border: none;
		/* border: 1px solid #d5e5ff; */
	}

	.input:focus {
		outline: none;
		border: none;
	}

	.user_info_box {
		margin: 10px 0;
	}

	.title_span {
		color: #666;
		font-size: 14px;
		font-weight: bold;
	}

	.content_span {
		color: #999;
		font-size: 14px;
	}

	.key {
		/* width: 27.8vw; */
		/* position: absolute; */
		bottom: 22px;
		height: 23vh;
		/* background: #409EFF; */
	}

	.msgInputBtn {
		right: 10px;
		bottom: 10px;
		width: 60px;
		height: 30px;
		/* background:#ECF4FF; */
		background: #5399f5;
		margin-right: 10px;
		border-radius: 5px;
		font-size: 14px;
		color: #fff;
		cursor: pointer;
	}

	/* .msgInputBtn:hover{
	  background:#5399f5;
	} */
	.frceBox {
		position: absolute;
		/* top: 25vw; */
		bottom: 25vh;
		left: 31.5vw;
		width: 28vw;
		height: 25vh;
		background: #fff;
		border: 1px solid #d5e5ff;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 999999;
	}

	.frceBox p {
		width: 50px;
		height: 50px;
	}

	.FastReply {
		width: 19vw;
		height: 92vh;
		border-right: 1px solid #d5e5ff;
		background: #fff;

	}

	.FastReplyBox {
		padding: 0.4rem 0;
		height: 80vh;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.FastReplyHader {
		height: 50px;
		border-bottom: 1px solid #d5e5ff;
		padding: 0 10px;
		font-size: 14px;
		color: #666;
		font-weight: bold;
	}

	.FastReplySwitch {
		height: 50px;
		border-bottom: 1px solid #d5e5ff;
		color: #666;
		font-size: 14px;
		padding: 0 40px;
	}

	.FastReplySwitch p.active {
		position: relative;
		color: #5399f5;
	}

	.FastReplySwitch p.active::after {
		content: "";
		display: inline-block;
		position: absolute;
		width: 42px;
		height: 2px;
		left: 1px;
		bottom: -15px;
		background: #5399f5;
	}

	ul {
		margin-block-start: 0.4em;
		margin-block-end: 0.4em;
	}

	.cursor_text {
		cursor: pointer;
		margin: 10px 20px;
	}

	.cursor_text:hover {
		color: #d5e5ff;
		background: #f6f8ff;
	}

	.serch {
		padding: 20px 10px;
	}

	.disable {
		color: #f0f0f0 !important;
	}

	.serchBox {
		width: 200px;
		height: 40px;
		border: 1px solid #eee;
		position: relative;
	}

	.serchBox img {
		position: absolute;
		right: 10px;
		top: 12px;
	}

	.serchBox input {
		width: 100%;
		height: 100%;
		background: #f5f5f5;
		border: none;
		color: #999;
		padding: 0 10px;
	}

	.serchBox input:focus {
		outline: none;
		color: #666;
	}

	.FastReplyList {
		width: 100%;
	}

	.userinfo {
		width: 21vw;
		padding: 20px;
		background: #ECF4FF;
	}

	.userData p {
		line-height: 30px;
		display: block;
		width: 100%;
	}

	.message_box {
		background: #F5F5F5;
		border-radius: 10px 0 10px 10px;
	}

	.user_box {
		background: #DFF0FF;
		border-radius: 0 10px 10px 10px;
	}

	.userDataInput {
		width: 80%;
		padding: 10px;
		height: 80px;
		resize: none;
		border: 1px solid #d5e5ff;
		background: #fff;
	}

	.userDataInput:focus {
		outline: none;
	}

	.userBtn {
		width: 60px;
		height: 34px;
		border: 1px solid rgba(221, 221, 221, 1);
		background: linear-gradient(
				180deg,
				rgba(245, 245, 245, 1) 0%,
				rgba(238, 238, 238, 1) 100%
		);
		border-radius: 5px;
		color: #888;
		font-size: 14px;
		margin-top: 10px;

	}

	.userBtn:hover {
		background: #5399f5;
		color: #f0f0f0;
		cursor: pointer;
	}

	.chatmin {
		height: 46.5vh;
	}

	.el-button--primary {
		background: #409EFF !important;
		/* color:#fff  !important; */
		border: 1px solid #DCDFE6;
		line-height: 1;
		padding: 4px 8px;
	}

	.cell button {
		line-height: 1;
		-webkit-transition: .1s;
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		padding: 4px 8px;
	}

	.el-button {
		line-height: 0;
		/* width: 0; */
		border: none;
		padding: 0;
		color: #999;
		font-size: 12px;
		font-weight: 400;
	}
</style>