<template>
	<el-container class="mainNoBack userBox">
		<el-aside class="userAside" width="220px">
			<el-container>
				<el-main class="nopadding">
					<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.send_message_type === 1">{{item.to_message.to_message}}</div>
										<div class="msg" v-if="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">
					<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 v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) !=-1">
												<el-image style="max-width: 280px;max-height: 240px;" fit="cover" lazy :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
											</span>
											<span class="fileView" v-else @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>
										</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>
						<div class="tagItem"><el-icon size="18"><sc-icon-Expression/></el-icon></div>
					</div>
					<div class="sendView">
						<el-input @keydown="handleKeydown" v-model="params.to_message" class="customTextarea" 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"
export default {
	name: "",
	components:{
		customerRecordsDialog,
		uploadFile,
		fileType
	},
	data(){
		return{
			contactsList:[],
			contactsInfo:{},
			msgList:[],
			user_id:0,
			to_user_id:0,
			page:1,
			pageSize:1,

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

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

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



		setTimeout(()=>{
			this.getContactList();
		},1000)
		// 获取新消息
		eventBus.$on('sockBack', this.getWsResult);
	},
	methods:{
		getWsResult(res){
			if(res.data && (res.data.type == 36 || res.data.type == 38)){
				switch(res.data.type) {
					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;
						this.pageSize = res.data.pageSize;
						setTimeout(()=>{
							if(res.data.page === res.data.pageSize){
								this.scrollDown();
							}
						},500);
						break;
					case 38:
						if(res.data.contact_list && res.data.contact_list.length>0){
							res.data.contact_list.forEach(item=>{
								if(item.send_message_type ==2){
									item.to_message_list = JSON.parse(item.to_message);
								}
							})
						}
						this.contactsList = res.data.contact_list;
						if(res.data.contact_list.length>0){
							if(this.mesList){
								this.to_user_id = res.data.contact_list[0].from_user.id;
								this.params.to_user_id = res.data.contact_list[0].from_user.id;
								this.contactsInfo = res.data.contact_list[0];

								this.getCustomerMsgList();
								this.mesList = false;
							}
						}
						break;
					case 12:

						break;
					default:
						break;
				}
			}
		},
		async getContactList() {
			await this.$API.customer.contactList.post();
		},
		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);
		},
		async getCustomerMsgList(isPage=false) {
			let params = {}
			if(!isPage){
				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);
		},
		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();
			}
		},

		// 上传附件
		uploadFile(){
			this.$nextTick(()=>{
				this.$refs.uploadFile.importFile(this.params);
			})
		},
		uploadFileSuccess(data){
			console.log('接口上传成功',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:''
			});
		},

		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;
				console.log('执行接口数据获取')
				this.getCustomerMsgList(true)
			}
		},
		scrollDown() {
			this.$nextTick(() => {
				const wrap = this.$refs.scrollbar;
				if(wrap){
					const e = wrap.$el.querySelector('.el-scrollbar__wrap')
					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;
						.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);
		}
	}
}
</style>
