<template>
	<el-container class="mainNoBack userBox">
		<el-aside class="userAside" width="220px">
			<el-container>
				<el-main class="nopadding">
					<div class="contacts">
						<div class="contactsTitle">联系人</div>
						<div class="bodyView">
							<div class="itemCol" v-for="(item,index) in contactsList" :key="index">
								<div class="avatar">
									<el-avatar :size="36" src="https://fsd/ad/png" fit="contain">
										<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
									</el-avatar>
								</div>
								<div class="viewRight">
									<div class="title">{{item.name==""?'匿名':item.name}}</div>
									<div class="msg">{{item.msg}}</div>
								</div>
							</div>
						</div>
					</div>
				</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">龙隆</div>
				<div class="mainView">
					<el-scrollbar ref="scrollbar">
						<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.avatar" fit="contain">
										<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
									</el-avatar>
								</div>
								<div class="msgText">
									<div class="msgTitle">{{item.from_user && item.from_user.name?item.from_user.name:'匿名'}}</div>
									<div class="textCom">
										<div v-html="item.to_message"></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"><el-icon size="18"><sc-icon-Attachment/></el-icon></div>
						<div class="tagItem"><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 v-model="params.to_message" class="customTextarea" type="textarea" placeholder="请输入.." :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="https://fsd/ad/png" 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">龙隆</div>
							</div>
							<div class="itemCol">
								<div class="name">手机号</div>
								<div class="text">18998321489</div>
							</div>
							<div class="itemCol">
								<div class="name">邮箱</div>
								<div class="text">263489003@qq.com</div>
							</div>
						</div>
					</div>
				</el-main>
			</el-container>
		</el-aside>
	</el-container>
</template>

<script>
import {eventBus} from "@/utils/eventBus";

export default {
	name: "faq",
	data(){
		return{
			contactsList:[
				{name:"龙隆",msg:"嘻嘻"},
				{name:"骁骁",msg:"测试信息"},
				{name:"管理员",msg:"怎么能快速挣够一百万"},
				{name:"",msg:"真机运行不需要检查更新，真机运行时appid固定为'HBuilder'"},
				{name:"",msg:"真机运行不需要检查更新，真机运行时appid固定为'HBuilder'"},
			],
			msgList:[],
			user_id:0,

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

		// 获取新消息
		eventBus.$on('sockBack', this.getWsResult);
	},
	methods:{
		getWsResult(res){
			if(res.data && (res.data.type == 36 || res.data.type == 37)){
				switch(res.data.type) {
					case 36:
						this.msgList = res.data.rows;
						this.scrollDown();
						break;
					case 37:
						this.params.to_user_id = res.data.user.uid;
						break;
					default:
						break;
				}
			}
		},

		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:userInfo.id,
					from_user:{
						name:userInfo.name,
						avatar:userInfo.avatar
					},
					to_message:this.params.to_message
				});
				this.params.to_message = "";
				this.scrollDown();
			}
		},

		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: 14px;
						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;
			}
		}
	}
	.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: 8px;
					.avatar{
						padding-right: 10px;
					}
					.msgText{
						.msgTitle{
							padding:0 0 8px 0;
							color: #555;
						}
						.textCom{
							background: #f5f5f5;
							border-radius: 4px;
							padding: 10px;
						}
					}
				}
				.msgRightItem{
					justify-content: flex-end;
					.avatar{
						padding-left: 10px;
						padding-right: 0;
					}
					.msgText{
						.msgTitle{
							text-align: right;
						}
						.textCom{
							background: var(--el-color-primary);
							color: var(--el-color-white);
						}
					}
				}
			}
		}
		.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;
				}
			}
			.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>
