<template>
	<div class="pageCantainer">
		<div class="pageContent">
			<div class="chatSide">
				<div class="sideContent">
					<div plain="true" class="addBtn" @click="createNewChat">新建聊天</div>
					<div class="chatList">
						<div class="listItem" v-for="item in listData" :key="item.id" @click="listItemClick(item.id)">
							<div class="listItemTitle">{{ item.title }}</div>
							<el-icon :size="20"><el-icon-edit/><Edit/></el-icon>
							<el-icon :size="20"><el-icon-delete/></el-icon>
						</div>
					</div>
				</div>
			</div>
			<div class="mainChat">
				<el-container>
					<el-main class="chatItemContainer">
						<div v-for="item in chatData" :key="item.id">
							<div class="chatItem" :class="[item.chat_type=='myself'?'layout_right':'layout_left']">
								<div class="chatItem_text">
									<span class="datatime">{{ item.chat_time }}</span>
									<div class="chat_text">{{ item.chat_text }}</div>
								</div>
								<div class="user_icons"></div>
							</div>
						</div>
					</el-main>
					<el-footer style="padding: 1rem;height: 5rem;text-align: left;border-top: 1px solid rgb(229, 231, 235);">
						<div style="display: flex;align-items: center;justify-content: space-between;">
							<div style="width: 100%;height:100%;padding: 0 0.5rem;">
								<el-input class="search_input" placeholder="来说点什么吧..."></el-input>
							</div>
							<el-button icon="el-icon-promotion" size="success"></el-button>
						</div>
					</el-footer>
				</el-container>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: "testx",
	components: {},
	data() {
		return {
			userName: "",
			listData:[{id:1,title:'前端有哪些性能优化？',}],
			chatData: [
				{chat_text:'前端有哪些性能优化？',chat_time:'2022-08-18 10:00:00',chat_type:'myself'},
				{chat_text:'1. 图片优化使用适当格式（例如：JPEG, PNG, WebP）。压缩图片文件，减少文件大小。使用响应式图片（srcset）来适配不同分辨率的设备。2. 懒加载（Lazy Loading）对图片、视频和其他资源进行懒加载，仅在需要时才加载。使用 IntersectionObserver 或 loading="lazy" 属性来实现。3. 代码拆分（Code Splitting）将 JavaScript 拆分成更小的模块，按需加载，提高初始加载速度。使用 Webpack 或其他打包工具的代码分割功能。4. 资源缓存使用浏览器缓存（Cache-Control）来减少重复请求。使用 Service Workers 提供离线支持和缓存管理5. 减少 HTTP 请求合并 CSS 和 JavaScript 文件，减少请求次数。使用字体图标代替多个图片图标。',chat_time:'2022-08-18 10:00:00',chat_type:'serve'}
			],
		};
	},
	mounted() {
		var userInfo = this.$TOOL.data.get("USER_INFO");
		this.userName = userInfo.username;
		let items = document.querySelectorAll('.listItem');
		items.forEach(function(item) {
			item.addEventListener('click', function() {
				items.forEach(function(el) {
					el.classList.remove('active');
				});
				item.classList.add('active');
			});
		})
	},
	methods: {
		createNewChat(){
			this.listData.unshift({title:'New Chat'});
			this.$nextTick(()=>{
			    let items = document.querySelectorAll('.listItem');
				items.forEach(function(el) {
					el.classList.remove('active');
				});
				items[0].classList.add('active')
			})	
		},
		listItemClick(id){
			this.listData.forEach((item)=>{
				if(item.id == id){
					this.chatData = item.data
				}
			})
		},
	},
};
</script>
<style scoped>
.pageCantainer{
	padding:0;
	width: 99%;
	height: 99%;
	border-radius: 0.375rem;
	margin: 0.5vh auto 0;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0 ,.1), 0 2px 4px -2px rgba(0, 0, 0 ,.1);
}
.pageContent{
	width: 100%;
	height: 100%;
	position: relative;
	background: #fff;
	border-radius: 6px;
}
.chatSide{
	max-width: 260px;
	width: 260px;
	border-right: 1px solid rgb(229, 231, 235);
	box-sizing: border-box;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}
.sideContent{
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex:1 1 0%;
}
.addBtn{
	margin: 1rem;
    border: 1px dotted #dddddd;
    height: 35px;
    line-height: 35px;
    text-align: center;
	cursor: pointer;
}
.addBtn:hover{
	color: #18a058;
	border: 1px dotted #18a058;
}
.chatList{
	padding: 1rem;
	overflow: hidden;
	flex: 1 1 0%;
	min-height: 0px;
	box-sizing: border-box;
}
.listItem{
	overflow: hidden; 
	position: relative;
	z-index: auto;
	height: 45px;
	line-height: 45px;
	width: 100%;
	display :flex;
	padding: 0 1rem;
	border-radius: 6px;
	box-sizing: border-box;
	color :rgb(51, 54, 57);
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	border :1px solid rgb(229, 231, 235);
}
.listItem.active{
	color: rgb(75, 158, 95);
	border-color: rgb(75, 158, 95);
	background-color :rgb(245, 245, 245)
}
.listItemTitle{
	width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 500;
}
.mainChat{
	padding-left: 260px;height: 100%;box-sizing: border-box;position: relative;z-index: auto;
}

	.right_layout {
		flex: 6;
	}

	.icons {
		background-color: white;
		z-index: 99;
		position: absolute;
		font-size: 20px;
		border-radius: 50%;
		border: 1px solid lightgray;
		padding: 0px 5px;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
		color: gray;
	}

	.icons_display {
		top: 48vh;
		right: -15px;
	}

	.icons_hideen {
		top: 48vh;
		left: 10px;
		display: none;
	}
	.new_chat_text {
		border: 1px solid #4b9e5f;
		display: flex;
	}

	.user_icons {
		width: 50px;
		height: 50px;
		background: linear-gradient(-135deg, #0000cc, #009dff);
		border: 1px solid lightblue;
		border-radius: 50%;
	}

	.right_layout_flex{
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.right_layout_son{
		margin:0 auto 0 auto;
		width:100vh;
		height:98vh;
		/* border:1px solid gray; */
		position: relative;
	}
	.right_layout_son_ipt{
		position: absolute;
		bottom:0;
	}
	.btn{
		border:none;
		padding:10px 15px;
		background-color: #18a058;
		border-radius: 1px;
		color:white;
	}
	.search_input{
		width: 100%;
		padding:0.5rem 1rem;
		/* border:1px solid lightgray; */
	}
	.chatItemContainer{
		display: flex;
		flex-direction: column;
	}
	.chatItem{
		display: flex;
		justify-content: flex-end;  /* 对齐到容器的右侧 */
	}
	.chatItem.layout_left{
		flex-direction: row-reverse; /* 从右到左排列 */
	}
	
	.chatItem_text{
		display: flex;
		flex-direction: column;
		max-width: 80%;
	}
	.layout_right>.chat_img>.datatime{
		position: absolute;
		width: 170px;
		right: 0;
	}
	.layout_right>.chatItem_text>.chat_text{
		padding:10px 20px;
		border-radius: 10px;
		background-color: rgb(210, 249, 209);
		opacity: 0.8;
	}
	.layout_left>.chatItem_text>.chat_text{
		padding:10px 20px;
		border-radius: 10px;
		background-color: rgb(244, 246, 248);
		opacity: 0.8;
	}
	.user_icons{
		width:40px;height:40px;
	}
</style>