<template>
	<view>
		<!-- 索引栏 -->
		<view class="heads">
			<!--  -->
			<view class="container">
				<view class="searchs">
					<view class="search">
						<image src="../../../static/img/ammsHome/search.png" class="pic"></image>
						<view class="content">
							<input class="uni-input" v-model="searchText" @confirm="searchConfirm"
								placeholder="请输入姓名、员工编号或域账号" />
						</view>
					</view>
					<button v-if="searchText != ''" @tap="searchConfirm" class="searchBtn">搜索</button>
				</view>
			</view>
			<scroll-view scroll-x="true" class="nav" :scroll-left="scrollLeft">
				<view v-for="(item, index) in departNav" :key="index" class="nav_item"
					:class="{'active': index == departNav.length -1}" @click="list_activeClick1(item, index)">
					{{ item.name }}
					<image src="../../../static/img/ammsHome/icon1.png" class="pic" v-if="item.children.length > 0">
					</image>
				</view>
			</scroll-view>
		</view>

		<scroll-view scroll-y="true" class="details_list" :scroll-top="scrollTop" @scroll="detailsScroll">
			<view class="nav_list" v-show="list_active_show">
				<view class="list_item" :class="{'active':list_active == index}" @tap="change1(item)"
					v-for="(item,index) in range" :key="index">
					{{ item.name }}
				</view>
			</view>
			<view class="container">
				<view class="ul">
					<view class="li"  v-for="(item,index) in detList" :key="index">
						<view class="left">
							<view class="picimg">
								<image :src="item.imgs" class="pic"></image>
							</view>
							<view class="content">
								<view class="title">{{ item.name }}</view>
								<view class="cont">
									<text class="tit">职位：</text>
									<text class="cnt">{{ item.content1 }}</text>
								</view>
								<view class="cont">
									<text class="tit">部门：</text>
									<text class="cnt">{{ item.content2 }}</text>
								</view>
								<view class="cont_active_no" :class="{'cont_active':item.states}">
									<view class="cont">
										<text class="tit">手机：</text>
										<text class="cnt">{{ item.content3 }}</text>
										 -
										<view v-if="item.content3">
											<uni-icons @tap="phoneClick(item.content3, item.name)" type="phone-filled" color="#0E57FF" size="16"></uni-icons>
										</view>
									</view>
									<view class="cont">
										<text class="tit">电话：</text>
										<text class="cnt">{{ item.content5 }}</text>
										 -
										<view v-if="item.content5">
											<uni-icons @tap="phoneClick(item.content5, item.name)" type="phone-filled" color="#0E57FF" size="16"></uni-icons>
										</view>
									</view>
									<view class="cont">
										<text class="tit">邮箱：</text>
										<text class="cnt">{{ item.content4 }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="img" @tap.stop="detClick(item,index)">
							<view class="icon">
								<image src="../../../static/img/ammsHome/icon2.png" class="pic"
									:class="{'rotate180': item.states}"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="isOver" v-show="isOver">------ 暂无数据 ------</view>
			</view>
		</scroll-view>
		<q-loading mask="true" click="true" ref="loading"></q-loading>
	</view>
</template>

<script setup lang="ts">
	// import { uuid } from '../../../utils';
	import { ref, reactive, nextTick, getCurrentInstance, onMounted } from 'vue';
	import { request } from '@/utils/request';
	
	const { proxy } = getCurrentInstance();

	const isOver = ref(false);
	const searchText = ref('');
	const list_active = ref(-1);
	const list_active_show = ref(false);
	const scrollLeft = ref(0)
	const scrollTop = ref(0)

	const range = ref([]);
	const detList = ref([]);
	const departList = ref([]);
	const departObj = ref(null);
	const departNav = ref([]);

	onMounted(() => {
		// 列表
		// init();
	});

	function detailsScroll(e : any) {
		scrollTop.value = e.detail.scrollTop;
	}

	function list_activeClick1(item : any, index : number) {
		let arr : any = [];
		departNav.value.map((ele : any, idx : Number) => {
			if (idx < index + 1) {
				arr.push(ele)
			}
		})
		departNav.value = arr;
		if (item.children.length > 0) {
			range.value = item.children;
			list_active_show.value = true;
		}
		nextTick(() => {
			scrollTop.value = 0;
			console.log(scrollTop.value)
		})
	}

	function phoneClick(_val: any, _name: any) {
		if (_val) {
			// 拨打电话
			uni.showModal({
				title: '提示',
				content: `确定给${_name}拨打电话？`,
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: _val
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}

	}

	function change1(_val : any, index : number) {
		departNav.value.push(_val);
		list_active.value = index;
		nextTick(() => {
			computeScrollLeft();
		});
		if (_val.children.length > 0) {
			range.value = _val.children;
		} else {
			range.value = []
			list_active_show.value = false;
		}
		detList.value = [];
		change1Init(_val.id)
	}
	// 计算部门nav左右滑动距离
	function computeScrollLeft() {
		scrollLeft.value = 0;
		nextTick(() => {
			let _scrollLeft : number = 0;
			departNav.value.forEach((ele : any, index : number) => {
				_scrollLeft += 14 * ele.name.length + (index == departNav.value.length - 1 ? 0 : 10)
			})
			scrollLeft.value = _scrollLeft;
		})
	}

	function searchConfirm() {
		if (searchText.value) {
			proxy.$emit('recall', 'open');
			request({
				method: 'get',
				url: 'tecstaff-staffByKey',
				data: {
					key: searchText.value
				}
			}).then((res : any) => {
				if (res.code == 0) {
					let arr = res.data;
					departNav.value = [departNav.value[0]];
					list_active_show.value = false;
					dataProcessing(arr);
				}
				proxy.$emit('recall', 'close');
			}).catch((err : any) => {
				proxy.$emit('recall', 'close');
				uni.showToast({
					title: err.msg,
					icon: 'none'
				});
			})
		}
	}

	function change1Init(id : String) {
		proxy.$emit('recall', 'open');
		request({
			method: 'get',
			url: 'tecstaff-staff',
			data: {
				orgId: id
			}
		}).then((res : any) => {
			proxy.$emit('recall', 'close');
			if (res.code == 0) {
				let arr = res.data;
				dataProcessing(arr);
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
		}).catch((err : any) => {
			proxy.$emit('recall', 'close');
			uni.showToast({
				title: err.msg,
				icon: 'none'
			});
		})
	}

	function dataProcessing(arr : any) {
		detList.value = [];
		if (arr.length > 0) {
			let initData : any = [];
			arr?.map((item : any) => {
				initData.push({
					name: item.cname,
					content1: item.vcpostname,
					content2: item.vcfullname,
					content3: item.mobile,
					content4: item.email,
					content5: item.tel,
					id: item.id,
					imgs: `https://amms.hnatechnic.com/hnahr/image/headimage/emp/${item.employeeid.substring(0, 6)}0000/${item.employeeid}.jpg`,
					states: false
				})
				isOver.value = false;
				detList.value = initData;
			});
		} else {
			isOver.value = true;
			detList.value = [];
		}
	}

	function init() {
		searchText.value = '';
		if (departNav.value.length == 0) {
			getDepartment();
		}
	}

	function getDepartment() {
		proxy.$emit('recall', 'open');
		request({
			method: 'get',
			url: 'tdmsorg-getDescendantList'
		}).then((res : any) => {
			proxy.$emit('recall', 'close');
			if (res.code == 0) {
				if (res.data.length > 0) {
					let initData : any = [];
					let deptObj : any = {};
					function inner(data : any) {
						data?.map((ele : any) => {
							initData.push(ele)
							deptObj[ele.id] = ele.name;
							if (ele.children.length > 0) {
								inner(ele.children)
							}
						})
					}
					inner(res.data);
					departNav.value = [{
						name: '海航航空技术有限公司',
						id: '0-1-3-847038-12387-',
						children: res.data,
						parentId: '0-1-3-847038-'
					}]
					departList.value = initData;
					departObj.value = deptObj;
					list_activeClick1(departNav.value[0], 0);
				}
			}
		}).catch((err : any) => {
			proxy.$emit('recall', 'close');
			uni.showToast({
				title: err.msg,
				icon: 'none'
			});
		})
	}

	function detClick(item : any, index : any) {
		detList.value[index].states = !item.states
	}

	defineExpose({ init })
</script>

<style lang="less" scoped>
	.amms-page {
		background-color: #F2F6F9;
		height: 100%;
		width: 100%;

		.container {
			padding: 0rpx 32rpx;
		}

		.head {
			.container {
				display: flex;
				justify-content: space-between;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				padding: 10rpx 32rpx;
				background: linear-gradient(226deg, #168AFF 0%, #0E57FF 100%);

				.pic {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}


		.searchs {
			padding: 24rpx 0rpx;
			display: flex;
			align-items: center;
			.search {
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				padding: 20rpx 32rpx;
				width: 100%;
				.content {
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					width: 100%;
					
					input {
						font-size: 28rpx;
					}

					.uni-input-placeholder {
						font-size: 28rpx;
					}
				}
				

				.pic {
					margin-right: 16rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
			.searchBtn {
				height: 70rpx;
				line-height: 70rpx;
				margin-left: 20rpx;
				text-align: center;
				border-radius: 16rpx;
				font-size: 24rpx;
				flex-shrink: 0;
				color: #fff;
				padding: 0 20rpx;
				box-sizing: border-box;
				background-color: #166ce5;
			}
		}

		.nav {
			background-color: #ffffff;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #444D54;
			padding: 0rpx 32rpx;
			padding-top: 25rpx;
			padding-bottom: 25rpx;
			border-bottom: 1rpx solid #DDDDDD;
			display: flex;
			align-items: center;
			overflow-x: scroll;
			width: 100%;

			.nav_item {
				display: inline-block;
				height: 40rpx;
				line-height: 40rpx;
				transition: all .3s linear;

				// margin-bottom: 20rpx;
				.pic {
					width: 20rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}

				&:last-child {
					.pic {
						display: none;
					}
				}

				.rotate90 {
					transform: rotate(90deg);
				}
			}

			.active {
				font-weight: 500;
				color: #0E57FF;
			}
		}

		.details_list {
			background: #ffffff;
			padding: 20rpx 0rpx;
			height: calc(100vh - 480rpx);
			-webkit-overflow-scrolling:touch;

			.container {
				margin-top: 32rpx;
				padding: 0rpx 32rpx;
				width: 100%;
				height: 100%;

				.ul {
					.li {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1rpx solid #DDDDDD;
						padding-bottom: 32rpx;
						margin-bottom: 31rpx;

						&:last-child {
							border-bottom: 0rpx;
							padding-bottom: 0rpx;
							margin-bottom: 0rpx;
						}

						.left {
							display: flex;
							align-items: flex-start;
						}

						.picimg {
							margin-right: 24rpx;

							.pic {
								width: 112rpx;
								height: 112rpx;
								border-radius: 50%;
							}
						}

						.content {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #808080;

							.cont_active_no {
								display: none;
							}

							.cont_active {
								display: block;
								transition: all 2s;
							}

							.title,
							.titles {
								font-size: 30rpx;
								font-weight: 500;
								color: #444D54;
								margin-bottom: 8rpx;
							}

							.titles {
								display: -webkit-box;
								overflow: hidden;
								text-overflow: ellipsis;
								word-wrap: break-word;
								white-space: normal !important;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.cont {
								margin-bottom: 8rpx;
								display: flex;
								align-items: center;
								.tit {
									color: #808080;
									font-size: 24rpx;
									flex-shrink: 0;
								}
								.cnt {
									color: #444D54;
									font-size: 24rpx;
								}
							}
						}

						.icon {
							margin-left: 66rpx;

							.pic {
								width: 40rpx;
								height: 40rpx;
								transition: all .2s linear;
							}

							.rotate180 {
								transform: rotate(180deg);
							}
						}
					}
				}
			}
		}

		.scroll-Y {
			height: 100%;
		}

		.isOver {
			margin-top: 20rpx;
			text-align: center;
		}

		.heads {
			width: 100%;
			background: #F2F6F9;

			.container {
				width: 100%;
				padding: 0rpx 32rpx;
				box-sizing: border-box;
			}
		}

		.nav_list {
			background: #fff;
			padding: 0rpx 32rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #dddddd;

			.list_item {
				margin-bottom: 10rpx;
			}

			.active {
				color: #0E57FF !important;
			}
		}
	}
</style>