<template>
	<el-container class="mainNoBack userBox">
		<el-aside class="userAside" width="220px">
			<el-container>
				<el-main class="nopadding" v-loading="contactsLoading" element-loading-text="加载中...">
					<el-scrollbar>
						<div class="contacts">
							<div class="contactsTitle">联系人</div>
							<div class="bodyView">
								<div class="itemCol" :class="{'itemColActive':item.from_user && item.from_user.id === to_user_id}"  v-for="(item,index) in contactsList" :key="index" @click="contactsActive(item)">
									<div class="avatar">
										<el-avatar :size="36" :src="item.from_user && item.from_user.avatar" fit="contain">
											<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
										</el-avatar>
									</div>
									<div class="viewRight">
										<div class="title">{{item.from_user && item.from_user.name==""?'匿名':item.from_user && item.from_user.name}}</div>
										<div class="msg" v-if="item.to_message && item.to_message.send_message_type === 1">{{item.to_message.to_message}}</div>
										<div class="msg" v-if="item.to_message && item.to_message.send_message_type === 2">
											{{item.to_message_list[0].client_file_name?item.to_message_list[0].client_file_name:'未命名'}}
										</div>
									</div>
								</div>
							</div>
						</div>
					</el-scrollbar>
				</el-main>
			</el-container>
		</el-aside>
		<el-main class="userMain userMainPadding_0" style="border-top-right-radius: 0;border-bottom-right-radius: 0;padding: 0;">
			<div class="mainBody">
				<div class="mainTitle">{{contactsInfo.from_user && contactsInfo.from_user.name?contactsInfo.from_user.name:"匿名"}}</div>
				<div class="mainView" v-loading="msgDataLoading" element-loading-text="加载中...">
					<el-scrollbar ref="scrollbar" @scroll="handleScroll">
						<div class="msgList">
							<div class="msgItem" :class="user_id != item.to_user_id?'msgRightItem':''" v-for="(item,index) in msgList" :key="index">
								<div class="avatar" v-if="user_id === item.to_user_id">
									<el-avatar :size="36" :src="item.from_user.avatar" fit="contain">
										<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
									</el-avatar>
								</div>
								<div class="msgText">
									<div class="msgTitle">
										<span class="leftTime" v-if="user_id != item.to_user_id">{{item.created_at}}</span>
										{{item.from_user && item.from_user.name?item.from_user.name:'匿名'}}
										<span class="time" v-if="user_id === item.to_user_id">{{item.created_at}}</span>
									</div>
									<div class="textCom" v-if="item.send_message_type === 1">
										<div v-html="item.to_message"></div>
									</div>
									<div class="textCom textComNoneBack" v-if="item.send_message_type === 2">
										<div :class="user_id != item.to_user_id?'fileRightItem':''" v-for="(em,ind) in item.to_message_list" :key="ind">
											<span class="imgView" :class="user_id != item.to_user_id?'imgViewRight':''" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) !=-1">
												<el-icon class="loadingIcon" size="30" v-if="user_id != item.to_user_id && em.showLoading" style="color:#333;padding: 4px;"><el-icon-Loading/></el-icon>
												<el-image style="width: 240px;height: 200px;" fit="contain" lazy :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
												<el-icon class="loadingIcon" size="30" v-if="user_id === item.to_user_id && em.showLoading" style="color:#333;padding: 4px;"><el-icon-Loading/></el-icon>
											</span>
											<span class="fileView" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) ===-1" @click="linkFile(em)">
												<fileType size="26px" :fileType="em.extension || em.file_type" />
												<span class="fileName">{{em.client_file_name?em.client_file_name:'未命名'}}</span>
											</span>
											<span class="progressLine" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) ===-1 && em.showLoading">
												<el-progress class="exportPopover" :text-inside="true" :show-text="false" :stroke-width="4" :percentage="em.rate" />
											</span>
										</div>
									</div>
								</div>
								<div class="avatar" v-if="user_id != item.to_user_id">
									<el-avatar :size="36" :src="item.from_user.avatar" fit="contain">
										<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
									</el-avatar>
								</div>
							</div>
						</div>
					</el-scrollbar>
				</div>
				<div class="mainFooter">
					<div class="tagList">
						<div class="tagItem" @click="uploadFile">
							<uploadFile ref="uploadFile" @uploadFileSuccess="uploadFileSuccess" title="上传附件"></uploadFile>
						</div>
						<div class="tagItem" @click="recordsShow"><el-icon size="18"><sc-icon-Record/></el-icon></div>
						<el-dropdown trigger="click" ref="dropdownDown">
							<div class="tagItem"><el-icon size="18"><sc-icon-Expression/></el-icon></div>
							<template #dropdown>
								<ul class="emojiView">
									<li class="emojiCol" v-for="(item,index) in emojiJson" :key="index" @click.stop="emojiChange(item)">{{item}}</li>
								</ul>
							</template>
						</el-dropdown>
					</div>
					<div class="sendView">
						<el-input @keydown="handleKeydown" v-model="params.to_message" class="customTextarea" autofocus ref="messageInput" type="textarea" placeholder="Shift+Enter换行 请输入.." :rows="3" resize="none"></el-input>
						<div class="saveBtn" @click="sendCustomer" :class="params.to_message!=''?'saveActive':''">
							<el-icon size="22"><sc-icon-SendCustom /></el-icon>
						</div>
					</div>
				</div>
			</div>
		</el-main>
		<el-aside class="userAside" width="260px">
			<el-container>
				<el-main class="nopadding" style="border-left: 1px solid #f4f4f4;border-top-left-radius: 0;border-bottom-left-radius: 0;">
					<div class="contactsUserInfo">
						<div class="contactsTitle">
							<el-avatar :size="56" :src="contactsInfo.from_user && contactsInfo.from_user.avatar" fit="contain">
								<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
							</el-avatar>
						</div>
						<div class="bodyView">
							<div class="itemCol">
								<div class="name">昵称</div>
								<div class="text">{{contactsInfo.from_user && contactsInfo.from_user.name?contactsInfo.from_user.name:"匿名"}}</div>
							</div>
							<div class="itemCol">
								<div class="name">手机号</div>
								<div class="text">{{contactsInfo.from_user && contactsInfo.from_user.mobile}}</div>
							</div>
							<div class="itemCol">
								<div class="name">邮箱</div>
								<div class="text">{{ contactsInfo.from_user && contactsInfo.from_user.email }}</div>
							</div>
						</div>
					</div>
				</el-main>
			</el-container>
		</el-aside>
	</el-container>

	<customer-records-dialog v-if="dialog.show" ref="recordsMsgDialog" @closed="dialog.show=false"></customer-records-dialog>

</template>

<script>
import {eventBus} from "@/utils/eventBus";
import customerRecordsDialog from "@/views/service/components/customerRecords"
import uploadFile from "@/views/service/components/attachmentUpload";
import fileType from "@/views/docsManager/fileType"
const emoji = require("@/views/service/components/emoji.json");
export default {
	name: "",
	components:{
		customerRecordsDialog,
		uploadFile,
		fileType
	},
	data(){
		return{
			contactsList:[],
			contactsInfo:{},
			msgDataLoading:false,
			contactsLoading:false,
			msgList:[],
			emojiJson:[],
			user_id:0,
			to_user_id:0,
			page:1,

			params:{
				client:1,      // 1 管理后台 2 客服端
				to_user_id:"",
				to_message:"",
			},

			dialog:{
				show:false
			},
			mesList:true,
			user_chat_params:{},
		}
	},
	created() {

	},
	mounted() {
		const userInfo = this.$TOOL.data.get("USER_INFO");
		this.user_id = userInfo.id;

		setTimeout(()=>{
			this.getContactList();
		},1000)
		// 获取新消息
		eventBus.$on('sockBack', this.getWsResult);

		this.emojiJson = emoji.data.split(',');
		document.addEventListener('click', this.closeDropdown);

		// 获取路由参数
		let user_chat_info = this.$TOOL.data.get("CHAT_PARAMS");
		if(user_chat_info){
			this.user_chat_params =	JSON.parse(user_chat_info);
		}
	},
	unmounted() {
		document.removeEventListener('click', this.closeDropdown);
	},
	methods:{
		getWsResult(res){
			if(res.data && (res.data.type == 12 || res.data.type == 35 || res.data.type == 36 || res.data.type == 38)){
				switch(res.data.type) {
					case 12:
						this.msgList.forEach(item=>{
							if(item.to_message_list && item.to_message_list.length>0){
								item.to_message_list.forEach(em=>{
									if(em.uuid && em.uuid === res.data.file_unique_id){
										em.showLoading = res.data.rate !== 100;
										em.rate = res.data.rate;
									}
								})
							}
						})
						break;
					case 35:
						if(res.data.send_message_type === 2 && res.data.data.to_message){
							res.data.data.to_message_list = JSON.parse(res.data.data.to_message);
						}
						if(res.data.data){
							let obj = {
								created_at: res.data.from_time,
								send_message_type: res.data.send_message_type ? res.data.send_message_type : 1,
								to_user_id: res.data.to_user_id,
								to_message: res.data.data.to_message,
								to_message_list: res.data.data.to_message_list,
								from_user: {
									avatar: res.data.from_avatar,
									name: res.data.from_user,
								}
							};
							this.msgList.push(obj);
							setTimeout(()=>{
								this.scrollDown();
							},100);
						}
						break;
					case 36:
						res.data.rows.forEach((item)=>{
							if(item.send_message_type == 2){
								item.to_message_list = JSON.parse(item.to_message);
							}
						})
						this.msgList = res.data.rows.concat(this.msgList);
						this.page = res.data.page;
						setTimeout(()=>{
							if(res.data.page === res.data.pageSize){
								this.scrollDown();
							}
						},100);
						break;
					case 38:
						if(res.data.contact_list && res.data.contact_list.length>0){
							res.data.contact_list.forEach(item=>{
								if(item.to_message && item.to_message.send_message_type === 2){
									item.to_message_list = JSON.parse(item.to_message.to_message);
								}
							})
						}
						this.contactsList = res.data.contact_list;
						// 判断当前联系人列表是否存在了这个人不存在就插入进去
						if(this.user_chat_params && this.user_chat_params.id){
							let ids = this.contactsList.map(em=>em.from_user_id);
							if(ids.indexOf(this.user_chat_params.id)===-1){
								this.contactsList.unshift({
									created_at:this.$TOOL.dateFormat(new Date()),
									from_user:{
										avatar:this.user_chat_params.avatar,
										email:this.user_chat_params.email,
										id:this.user_chat_params.id,
										mobile:this.user_chat_params.mobile,
										name:this.user_chat_params.name
									},
									from_user_id:this.user_chat_params.id,
									id:0,
									to_message:{},
									to_user_id:""
								})
							}
						}
						if(this.contactsList.length>0){
							if(this.mesList){
								this.to_user_id = this.contactsList[0].from_user.id;
								this.params.to_user_id = this.contactsList[0].from_user.id;
								this.contactsInfo = this.contactsList[0];

								this.getCustomerMsgList();
								this.mesList = false;
							}
						}
						break;

					default:
						break;
				}
			}
		},
		async getContactList() {
			this.contactsLoading = true;
			await this.$API.customer.contactList.post();
			this.contactsLoading = false;
		},
		contactsActive(item){
			this.contactsInfo = item;
			this.to_user_id = item.from_user.id;
			this.params.to_user_id = item.from_user.id;
			this.msgList = [];
			this.getCustomerMsgList(false);
			this.$nextTick(()=>{
				this.$refs.messageInput.focus();
			})
		},
		async getCustomerMsgList(isPage=false) {
			let params = {}
			if(!isPage){
				this.msgDataLoading = true;
				params = {
					to_user_id:this.to_user_id,
					pageSize:30
				}
			}else{
				params = {
					to_user_id:this.to_user_id,
					page:this.page,
					pageSize:30
				}
			}
			await this.$API.customer.list.post(params);
			this.msgDataLoading = false;
		},
		handleKeydown(event){
			if(event.key === 'Enter' && !event.shiftKey){
				event.preventDefault(); // 阻止输入框的默认行为
				this.sendCustomer();
			}else if(event.key === 'Enter' && event.shiftKey){
				this.params.to_message += '';
			}
		},
		async sendCustomer() {
			if(this.params.to_message =="") return
			const res = await this.$API.customer.send.post(this.params);
			if(res.code == 200){
				const userInfo = this.$TOOL.data.get("USER_INFO");
				this.msgList.push({
					to_user_id:-1,
					send_message_type:1,
					created_at:this.$TOOL.dateFormat(new Date()),
					from_user:{
						name:userInfo.name,
						avatar:userInfo.avatar
					},
					to_message:this.params.to_message
				});
				this.params.to_message = "";
				this.scrollDown();
			}
		},
		emojiChange(item){
			let text = this.$TOOL.objCopy(this.params.to_message);
			this.params.to_message = text + item;
		},
		closeDropdown(event){
			if(this.$refs.dropdownDown && this.$refs.dropdownDown.$el){
				const dropdownElement = this.$refs.dropdownDown.$el;
				if (!dropdownElement.contains(event.target)) {
					this.$refs.dropdownDown.handleClose();
				}
			}

			setTimeout(()=>{
				this.$nextTick(()=>{
					if(this.$refs.messageInput){
						this.$refs.messageInput.focus();
					}
				})
			},10)
		},

		// 上传附件
		uploadFile(){
			this.$nextTick(()=>{
				this.$refs.uploadFile.importFile(this.params);
			})
		},
		uploadFileSuccess(data){
			const userInfo = this.$TOOL.data.get("USER_INFO");
			this.msgList.push({
				to_user_id:-1,
				send_message_type:2,
				created_at:this.$TOOL.dateFormat(new Date()),
				from_user:{
					name:userInfo.name,
					avatar:userInfo.avatar
				},
				to_message_list:data,
				to_message:''
			});

			setTimeout(()=>{
				this.scrollDown();
			},100)
		},

		recordsShow(){
			this.dialog.show = true;
			this.$nextTick(() => {
				this.$refs.recordsMsgDialog.open('show').setData(this.contactsInfo);
			})
		},
		linkFile(em){
			window.location.href = em.file;
		},
		handleScroll(event){
			const { scrollTop } = event;
			if(scrollTop === 0 && this.msgList.length>0 && this.page >1){
				this.page = this.page -1;
				this.getCustomerMsgList(true)
			}
		},
		scrollDown() {
			this.$nextTick(() => {
				const wrap = this.$refs.scrollbar;
				if(wrap){
					const e = wrap.$el.querySelector('.el-scrollbar__wrap');
					if(e){
						e.scrollTop = e.scrollHeight;
					}
				}
			})
		},
	}
}
</script>

<style scoped lang="scss">
::v-deep .noBorderRadius{border-radius: 0;}
.contacts{
	height: 100%;
	display: flex;
	flex-direction: column;
	.contactsTitle{
		padding: 5px 10px;
		font-size: 14px;
	}
	.bodyView{
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 0 5px;
		.itemCol{
			padding: 10px 8px;
			display: flex;
			align-items: flex-start;
			.viewRight{
				margin-left: 10px;
				flex: 1;
				overflow: hidden;
				.title{
					font-size: 13px;
					font-weight: 500;
					margin-bottom: 4px;
				}
				.msg{
					width: 100%;
					color: #888888;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
		.itemCol:hover{
			background: #F6FBFF;
			border-radius: 4px;
			cursor: pointer;
		}
		.itemColActive{
			background: #F6FBFF;
			border-radius: 4px;
		}
	}
}
.contactsUserInfo{
	display: flex;
	flex-direction: column;
	padding: 0 10px;
	.contactsTitle{
		padding: 20px 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #F6F6F6;
	}
	.bodyView{
		flex:1;
		display: flex;
		flex-direction: column;
		padding: 10px 5px;
		.itemCol{
			display: flex;
			justify-content: space-between;
			margin-bottom: 15px;
			.name{
				color: #888;
			}
		}
	}
}

.mainBody{
	height: 100%;
	padding: 15px 0;
	display: flex;
	flex-direction: column;
	.mainTitle{
		border-bottom: 1px solid #F6F6F6;
		padding-bottom: 10px;
		margin: 0 10px;
		font-weight: 500;
		font-size: 14px;
	}
	.mainView{
		flex: 1;
		overflow: hidden;
		padding-bottom: 10px;
		.msgList{
			padding: 10px;
			.msgItem{
				display: flex;
				margin-bottom: 12px;
				padding-right: 40px;
				.avatar{
					padding-right: 10px;
				}
				.msgText{
					.msgTitle{
						padding:0 0 8px 0;
						color: #555;
						.time{
							margin-left: 8px;
							font-size: 12px;
							color: #888;
						}
						.leftTime{
							margin-right: 8px;
							font-size: 12px;
							color: #888;
						}
					}
					.textCom{
						background: #f5f5f5;
						border-radius: 4px;
						padding: 10px;
						display: inline-block;
						text-align: left;
						.imgView{
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							margin-bottom: 5px;
							.loadingIcon{
								animation: rotate 1s linear infinite;
							}
							@keyframes rotate {
								0% {
									transform: rotate(0deg);
								}
								100% {
									transform: rotate(360deg);
								}
							}
						}
						.imgViewRight{
							justify-content: flex-end;
						}
						.fileView{
							cursor: pointer;
							color: var(--el-color-primary);
							display: flex;
							align-items: center;
							border: 1px solid #f4f4f4;
							padding: 10px;
							border-radius: 4px;
							background: #f8f6f6;
							margin-bottom: 5px;
						}
					}
					.el-image{
						border-radius: 4px;
					}
					.textComNoneBack{
						background: none;
						padding: 10px 0;
						.fileRightItem{
							text-align: right;
						}
					}
				}
			}
			.msgRightItem{
				justify-content: flex-end;
				padding:0 0 0 40px;
				.avatar{
					padding-left: 10px;
					padding-right: 0;
				}
				.msgText{
					text-align: right;
					.msgTitle{
						text-align: right;
					}
					.textCom{
						background: var(--el-color-primary);
						color: var(--el-color-white);
						text-align: left;
					}
					.textComNoneBack{
						background: none;
						.el-image{
							border-radius: 4px;
						}
					}
				}
			}
		}
	}
	.mainFooter{
		margin: 0 10px 5px 10px;
		padding: 10px 0;
		border: 1px solid #F6F6F6;
		border-radius: 4px;
		position: relative;
		.tagList{
			display: flex;
			align-items: center;
			border-bottom: 1px solid #F6F6F6;
			padding-bottom: 10px;
			.tagItem{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 15px;
				cursor: pointer;
			}
		}
		.customTextarea{
			font-size:13px;
			::v-deep .el-textarea__inner{
				box-shadow: none;
				border: 0;
				padding:10px 35px 10px 10px;
			}
			::v-deep .el-textarea__inner::-webkit-scrollbar{
				width: 0;
			}
		}
		.saveBtn{
			position: absolute;
			bottom:20px;
			right: 10px;
			z-index: 10;
			color: #A8ABB2;
			border-radius: 3px;
			cursor: not-allowed;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.saveActive{
			cursor: pointer;
			color: var(--el-color-primary);
		}
	}
}

.emojiView{
	width: 650px;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	.emojiCol{
		padding: 5px;
		cursor: pointer;
		font-size: 16px;
		list-style: none;
	}
}

.exportPopover{
	margin-bottom: 8px;
}
.exportPopover ::v-deep .el-progress-bar__innerText{
	height: 100%;
	display: flex;align-items: center;justify-content: flex-end;
	font-size: 10px;
}
</style>
