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-if="showHistoryList">
							<div v-for="(item,index) in historyList" :key="index">
								<!-- 客服消息 -->
								<div style="padding:0 10px;margin-top:20px;" class="rightAlignment" v-if="item.from_id.startsWith('KF')" >
									<div style="height:37px;font-size:12px;color:#bbb;" class="row item-center rightAlignment">
										{{item.time_line | formatDate}}
									</div>
									<div class="row item-center rightAlignment">
										<p v-if="item.content.text != ''" class="chatMsg message_box" v-html="item.content.text"></p>
										<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>

									</div>
								</div>

								<!-- 用户消息 -->
								<div style="padding:0 10px;margin-top:20px;" v-else>
									<div style="height:37px;font-size:.12px;color:#bbb;" class="row item-center">
										{{item.time_line | formatDate}}
									</div>
									<div class="row">
										<p v-if="item.content.text != ''" class="chatMsg user_box" v-html="item.content.text"></p>
										<div v-if="item.content.img != ''">
											<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>
									</div>
								</div>
							</div>
						</div>


						<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;"/> -->

								<el-popover id="pop" placement="top-start" width="400" trigger="hover">
									<ul>
										<li class="emoticon" v-for="(item,index) in frceArr" :key="item.id">
											<img class="pointer" :src="require(`@/assets/img/${index}.gif`)"
												 @click="frceCenterClick(item)" alt="">
										</li>
									</ul>
									<el-button class="expression" slot="reference"></el-button>
								</el-popover>
								<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>
					<!-- 发送消息音频提示 -->
					<!-- <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'">
							<el-tooltip class="title_span" effect="light" placement="bottom-start">
								<div slot="content">{{item.content}}</div>
								<span class="title_span" style=" width: 100%">#{{item.title}}</span>
							</el-tooltip>

							<!-- <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'">
							<el-tooltip class="title_span" effect="light" placement="bottom-start">
								<div slot="content">{{item.content}}</div>
								<span class="title_span" style=" width: 100%">#{{item.title}}</span>
							</el-tooltip>
							<!-- <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="terminal_IP.ip">
							IP地址：{{terminal_IP.ip}}</p>
						<p>来源终端：{{terminal_IP.system}}</p>
					</div>

					<div style="color:#666;font-weight:bold;font-size:14px; margin-top:30px;">用户信息</div>
					<div id="user_info_box" 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 style="width:70%;" 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 @blur='validation_user_info(1)' style="width:70%;"
									  v-model="session_user_info.account_phone"
									  placeholder="请输入内容"></el-input>
						</div>
						<div class="user_info_box">
							<span>邮箱：</span>
							<el-input @blur='validation_user_info(2)' 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>
						<div class="user_info_box">
							<span>备注：</span>
							<el-input style="width:70%;" v-model="session_user_info.remark"
									  placeholder="请输入内容"></el-input>
						</div>
					</div>
					<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: [], //表情包数组
				FastReply: "", //快捷回复
				FastReplySwitch: "one", //快捷回复开关
				user_info: '',//用户信息
				token: "",
				time: "",
				transferList: [],//转接列表
				lineUp: [],//排队列表
				conversationId: '',//会话工单
				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: '',//截屏图片
				userSwitching: true,//是否切换完成
				terminal_IP: {},//访客设备信息

				showHistoryList: false,
				historyList: [],
				historyTime:'',
			}
		},
		filters: {
			/**
			 * 时间戳转日期自定义时间格式
			 * timeStamp:时间戳
			 * custom:转换日期时定义年月日用是什么符号隔开
			 * isDtae:0=月份、1=日期、3=时间
			 */

			formatDate: function (value, custom = '', isDtae = 3) {
				let timeStamp = value;
				var date = new Date();
				date.setTime(timeStamp * 1000);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				var second = date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute;
				second = second < 10 ? ('0' + second) : second;
				if (isDtae == 0) {
					return y + custom + m //+'student';
				} else if (isDtae == 1) {
					return y + custom + m + custom + d;
				} else if (isDtae == 3) {
					return h + ':' + minute;
				} else {
					return y + '-' + m + '-' + d + ' ' + h + ':' + minute //+ ':' + second;
				}
			}
		},
		methods: {
			/****************************/
			validation_user_info(type) {
				if (type == 1 && this.session_user_info.account_phone) {
					if (!/^1[34578]\d{9}$/.test(this.session_user_info.account_phone)) {
						this.session_user_info.account_phone = '';
						this.$message({
							message: '这不是一个手机号哦!...',
							type: 'warning'
						});
					}
				} else if (type == 2 && this.session_user_info.account_email) {
					if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.session_user_info.account_email)) {
						this.session_user_info.account_email = ''
						this.$message({
							message: '这不是一个邮箱哦!...',
							type: 'warning'
						});
					}
				}


			},
			/***************图片放大*************** */
			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) {
				console.log(this.historyList,'historyList');
				//console.log(this.data,'data');

				//用户离线后会话窗口切换
				if (redata.message_type == "userClose") {
					console.log(redata)
					return false
				}

				// //用户会话结束窗口切换
				if (redata.message_type == "delUser") {
					redata.data;
					console.log(redata.data, this.session_user_info)
					if (redata.data.id == this.session_user_info.id) {
						this.session_user_info = {};
						this.value = '请选择';
					}
					return false
				}


				//获取标签数据信息
				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;
					}
					return false
				}


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

				//接收会话时间
				if (redata.message_type == "webTime") {
					let data = this.data;
					// console.log(data, '接收会话时间');
					data[data.length - 1].time = redata.data.webTime
					this.$store.dispatch("SET_CURRENT", data);
					if(this.historyList.length > 0){
						let historyTime = this.historyTime;

						this.$set(this.historyList[this.historyTime], 'time', redata.data.webTime);
					}
					return false
				}

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

					} else {
						// this.data = [];
						this.$store.dispatch("SET_CURRENT", []);//当前会话数据
						this.$store.dispatch("SET_SESSION_NAME", '');
					}
					return false
				}
				if (redata.message_type == 'chatMessage') {
					this.automaticRolling();
				}
				// 转接历史信息
				if (redata.message_type == "connect") {
					if (redata.data.history.length > 0) {
						console.log(redata, '转接历史消息');
						this.showHistoryList = true;
						redata.data.history.forEach(res => {
							let content = JSON.parse(res.content)
							res.content = content;
							if (content.text) {
								content.text = this.$public.turnFace(content.text,this.$frce)
								res.content = content
							}
							this.historyList.push(res)
						})
					}
				}
			},


			/*********************图片发送*********************/
			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];
						// console.log(self.webTime);
						//本地存储
						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) {
				console.log(this.sessionList);
				if (this.userSwitching) {
					let data = [];
					let order_id = '';
					this.$store.dispatch("SET_TYPE", type);
					this.$store.dispatch("SET_NUM", index);
					if (type == 1) {
						data = this.sessionList[index].data;
						order_id = this.sessionList[index].id;
						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);
						order_id = this.offlineList[index].id;
					}
					this.$store.dispatch("SET_CURRENT", data);//当前会话数据
					this.userSwitching = false;
					this.get_user(order_id)
				} else {
					this.$message({
						message: '警告!，操作太频繁',
						type: 'warning'
					});
				}
			},

			/***************关闭当前和用户聊天对话***************/
			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) {
						let sessionList = this.sessionList;
						sessionList.splice(this.dataIndex, 1);
						if (sessionList.length > 0) {
							this.$store.dispatch("SET_CURRENT", sessionList[0]);//当前会话数据
							this.$store.dispatch("SET_SESSION_NAME", sessionList[0].name);
						} else {
							this.$store.dispatch("SET_CURRENT", []);//当前会话数据
							this.$store.dispatch("SET_SESSION_NAME", '');
						}
					} else {
						let offlineList = this.offlineList;
						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;
						}
					}
				}
				this.historyTime = this.historyList.length - 1;
				//检测发送信息是否含有敏感词
				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.sessionList[this.dataIndex].isEva = 10;
					this.$store.dispatch("SET_SESSION", this.sessionList);
					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" + "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(id) {
				let obj = {
					headers: {
						"apiToken": this.$md5('accountInfo' + "customer-service" + 'service' + 'service'),
						'userToken': this.token
					},
					account_id: id
				};

				this.post('api' + this.$ports.userInfo.accountInfo, obj).then(res => {
					if (res.data.code == 1) {
						this.session_user_info = res.data.data;
						this.value = res.data.data.label
						this.userSwitching = true;
					}
				})
			},

			/********************获取配置信息********************/
			get_config_info() {
				let obj = {
					headers: {
						apiToken: this.$md5("minround" + "customer-service" + "evaluate" + "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' + '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;//用户消息
				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' + '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()
				})
			},
			/****************访问信息和评价状态***************/
			accessTerminal(data) {
				if (this.sessionType == 1) {
					let List = this.sessionList[this.dataIndex];
					if (data == 'eva') {
						if (!List) return false
						// console.log(List,'对话信息');
						if (List.isEva == 10) {
							this.is_eva_btn = true;
						} else if (List.isEva != 10) {
							if (this.data.length > this.trigger_condition) {
								List.isEva = 100;
								this.is_eva_btn = false;
							} else {
								this.is_eva_btn = true;
							}
						}
						this.sessionList[this.dataIndex] = List
						this.$store.dispatch("SET_SESSION", this.sessionList)
					} else {
						if (List) {
							this.terminal_IP = {
								system: List.system + '-' + List.browse,
								ip: List.ip
							}
						} else {
							this.terminal_IP = {}
						}
					}
				} else if (this.sessionType == 2) {
					let List = this.offlineList[this.dataIndex];
					// if(data == 'eva'){
					// 	if (this.data.length > this.trigger_condition){
					// 		List.isEva = 100;
					// 	}
					// }else{
					if (List) {
						this.terminal_IP = {
							system: List.system + '-' + List.browse,
							ip: List.ip
						}
					} else {
						this.terminal_IP = {}
					}
					// }
				}
			}

		},
		/**
		 * 挂载前执行
		 */
		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();
			//
			this.accessTerminal();

			//
			if (this.sessionList.length > 0) {
				if (this.sessionList[this.dataIndex].isEva == 100 && this.sessionList[this.dataIndex]) {
					this.is_eva_btn = false;
				}
			}

		},
		beforeDestroy() {
			document.getElementById('input').removeEventListener('paste', this.getClipboardData)
		},

		/**
		 * 事件监听
		 */
		watch: {
			get_session_message(e) {
				this.chatMessage(e)
			},

			sessionList(e) {
				this.accessTerminal(e)
			},
			offlineList(e) {
				this.accessTerminal(e)
			},

			/*****************评价按钮显示隐藏处理*****************/
			get_is_eva_btn(data) {
				this.accessTerminal('eva')
			}
		},
		/**
		 * 计算属性
		 */
		computed: {
			...mapGetters({
				data: 'get_current',
				sessionName: 'get_session_name',
				sessionList: 'get_session',
				offlineList: 'get_offline',
				dataIndex: 'get_num',
				sessionType: 'get_type',
				get_user_info: 'get_session_user',
				// is_eva_btn:'get_is_eva_btn',
			}),

			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;
	}

	.emoticon {
		width: 30px;
		height: 30px;
		display: inline-block;
	}

	#pop .expression {
		display: inline-block;
		width: 20px;
		height: 20px;
		background: url("./../assets/img/frce.png") no-repeat;
		background-size: 100% 100%;
		cursor: pointer;
		margin-right: 10px;
	}

	#pop .expression:hover {
		background: url("./../assets/img/frcea.png") no-repeat;
		background-size: 100% 100%;
	}

	.session_choose {
		background: #F6F8FF;
	}

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

	.sessionList {
		width: 16vw;
		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: 40vw;
		height: 93vh;
		border: 1px solid #d5e5ff;
		border-top: none;
		background: #fff;
	}

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

	.user_text:focus {
		outline: none;
	}

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

	}

	.chat-box {
		height: 62vh;
		/* background: red; */
		/* padding: 40px 0; */
		padding-bottom: 10px;
		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 {
		/* width: 100%; */
		margin: 4px 2px;
		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: 18vw;
		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: 16vw;
		padding: 20px;
		background: #ECF4FF;
	}

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

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

	.user_box {
		background: #F5F5F5;
		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;
	}

	#pop .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;
	}

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

	.el-tooltip__popper {
		max-width: 15vw;
		/* line-height: 180%; */
	}

	.rightAlignment .el-button {
		border: none;
	}
</style>