<template>
	<view class="container">
		<!-- <headersVue :titles="titles"><u-icon name="arrow-left" color="#fff" size="18"></u-icon></headersVue> -->
		<view class="header">
			<view class="page-top" :style='{ justifyContent: "center" }'>

				<!-- 返回上一级页面信息 -->
				<view class='go-back-page' @click='pageBack'>返回</view>

				<!-- 人员/车辆/我的组件显示的表头信息 -->
				<view class="other-title-class">
					学员管理
				</view>
			</view>
		</view>
		<view class="content">
			<view class="top_">
				<view class="search_box">
					<u-search placeholder="请输入学员姓名进行搜索" @search="getindex" :showAction="false" searchIconColor="#427FFE"
						v-model="workName"></u-search>
				</view>

			</view>
			<scroll-view scroll-y="true" class="tap_box" style="height: calc(100vh - 205px)"
				@scrolltolower="loadMoreData" @refresherrefresh="refreshList" :refresher-triggered="refresherTriggered"
				refresher-enabled>
				<view class="lsit_">

					<view class="list_box" v-for="(item, index) in goodsList" :key="index">
						<!-- <view class="checkbox_" @click="setIndex(item.id)">
							<u-icon name="checkmark" color="#2979ff" size="18"
								v-if="workids.includes(item.id)"></u-icon>
						</view> -->
						<view class="checkbox_">

						</view>
						<view class="right_box">
							<view class="d_s" @click="toInfo(item)">
								<view class="user_">
									<image :src="item.avatar" mode="" v-if="item.avatar"></image>
									<image src="/static/imgs/yh.png" v-else mode=""></image>
								</view>
								<view class="name_">{{ item.name }}</view>
								<!-- <view class="icon_"><u-text :lines="1" :text="item.roleNames" /></view> -->
							</view>
							<view class="d_b">
								<view class="">
									<text style="color: #8D90A6;">电话：</text>
									<text>{{ item.phone }}</text>
								</view>
								<view class="tel_" @click="gettel(item)">
									<image src="/static/imgs/tel.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>

				</view>
			</scroll-view>
			<!-- <view style="width: 100%; height: 12rpx; "></view> -->
		</view>
		<!-- <view class="bottom_">
			<view class="bottom_left" @click="getdelete()">删除员工</view>
			<view class="bottom_right" @click="goAdd()">添加员工</view>
		</view> -->
	</view>
</template>

<script>
	import request from "@/utils/request";
	import config from "@/config";

	export default {
		data() {
			return {
				titles: "员工管理",
				keyword: '',
				List: [],
				listIndex: [],
				tapIndex: 0,
				tapList: [],
				show: false,
				status: 'loading',
				msg: '3',
				goodsList: [],
				tabList: [],
				renList: [],
				// baseUrl: "http://192.168.1.4:8080/lanan",
				baseUrl: "http://192.168.1.4:8080/lanan",
				partnerId: '',
				isListing: 1,
				goodsTitle: "",
				taplist: [{
						Text: '已发布',
						id: 1
					},
					{
						Text: '待上架',
						id: 0
					},
				],
				pageNum: 1, //第几页
				pageSize: 10, //一页多少张
				totalPages: 0, //总数
				isLoading: false,
				refresherTriggered: false,

				realName: "",
				phoneNum: "",
				workName: "",
				workids: [],
				postid: '',
				gwindex: 0,
				gwid: 0,
				roleId: undefined,
				addRoleId: undefined,
				education: null,
				educationText: null,
				idCard: null,
				joinDate: null,
				probationPeriod: null,
				socialSecurityBuyDate: null,
				educations: [],
				showEducation: false,
				showJoinedDate: false,
				showFormalDate: false,
				showSafeDate: false,
				files: [],
				showDriveType: false,
				driverLicenseType: [],
				driverLicenseTypeArr: [],
				driverLicenseTypeArrStr: null,
			}
		},
		components: {
			// headersVue
		},
		onLoad() {
			this.getDriveType()
			this.getindex();
			// this.gettab()
		},
		onShow() {
			// 页面显示就自动刷新（包括进入页面或从其他页面返回）
			this.pageNum = 1
			this.goodsList = []
			this.getindex()
		},
		onReachBottom() {
			if (this.pageNum >= this.totalPages) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				});
				return;
			}
			this.pageNum++;
			this.getindex();
		},
		methods: {
			gettap(index, id) {
				this.tapIndex = index
				this.roleId = id
				this.goodsList = []
				this.pageNum = 1
				this.getindex()
			},
			setIndex(num) {
				const index = this.workids.indexOf(num); // 查找是否包含此数字
				if (index === -1) {
					this.workids.push(num); // 若不存在，
				} else {
					this.workids.splice(index, 1); // 存在的话，则删除这个数
				}
				console.log(this.workids);
			},

			gettel(num) {
				const value = num.mobile || num.username
				uni.makePhoneCall({
					phoneNumber: value //仅为示例
				});
			},
			toInfo(data) {
				console.log('data', data)
				uni.navigateTo({
					url: '/pages/internalManagement/studentManagement/addStudent?id=' + data.userId
				})
			},
			async getdelete() {
				if (this.workids == '') {
					uni.showToast({
						title: '请至少选择一名要删除的员工！',
						icon: 'none'
					})
					return
				} else {
					// this.workids = this.workids.join(",")
				}
				let res = await request({
					url: '/admin-api/system/user/deleteUserByIds',
					method: 'delete',
					data: this.workids

				})
				if (res.code == 200) {
					uni.showToast({
						title: "操作成功",

					})
					this.pageNum = 1
					this.goodsList = []
					this.getindex()
				}
			},
			// 驾照类型
			getDriveType() {
				return request({
					url: '/admin-api/common/down/getDriverLicenseType',
					method: 'get'
				}).then(res => {
					//提取出数组中的id属性
					this.driverLicenseType = res.data
				})
			},
			goAdd() {
				uni.navigateTo({
					url: '/pages/internalManagement/staffManagement/addStaff'
				})
			},
			goManage(num) {
				if (num == 1) {
					uni.navigateTo({
						url: '/pages/internalManagement/staffManagement/staffManagement'
					})
				}

			},
			async gettab() {
				let res = await request({
					url: '/admin-api/system/role/pageByQuery',
					method: 'get',
					params: {
						servicePackageId: 'jiaxiao'
					}
				})
				this.tabList = [{
					name: '全部',
					id: undefined
				}]
				this.tabList.push(...res.data)
				this.roleId = this.tabList[0].id
				this.renList = res.data
				this.getindex()
			},

			async getindex() {
				if (this.isLoading) return;
				this.isLoading = true;

				const data = {
					pageNo: this.pageNum,
					pageSize: this.pageSize,
				};

				try {
					const res = await request({
						url: '/admin-api/base/dl-drive-school-student/page',
						method: 'get',
						params: data
					});

					if (res.code === 200) {
						const newData = res.rows.map(item => {
							if (item.avatar && !item.avatar.includes(config.imagesUrl)) {
								item.avatar = config.imagesUrl + (item.avatar[0] === '/' ? item.avatar :
									'/' + item.avatar);
							}
							return item;
						});

						if (this.pageNum === 1) {
							this.goodsList = newData;
						} else {
							this.goodsList = [...this.goodsList, ...newData];
						}

						this.totalPages = Math.ceil(res.total / this.pageSize);
					}
				} finally {
					this.isLoading = false;
				}
			},

			/* async getindex() {
				let data = {
					pageNo: this.pageNum,
					pageSize: this.pageSize,
				}

				let res = await request({
					url: '/admin-api/base/dl-drive-school-student/page',
					method: 'get',
					params: data
				})

				if (res.code == 200) {
					// 处理头像URL
					const newData = res.rows.map(item => {
						if (item.avatar && !item.avatar.includes(config.baseImageUrl)) {
							item.avatar = config.baseImageUrl + (item.avatar[0] === '/' ? item.avatar : '/' +
								item.avatar)
						}
						return item
					})

					// 如果是第一页，直接替换数据；否则追加数据
					if (this.pageNum === 1) {
						this.goodsList = newData
					} else {
						this.goodsList = [...this.goodsList, ...newData]
					}

					this.totalPages = Math.ceil(res.total / this.pageSize)
				}
			}, */

			loadMoreData() {
				if (this.pageNum >= this.totalPages || this.isLoading) return;
				this.pageNum++;
				this.getindex();
			},

			async refreshList() {
				if (this.isLoading) return;

				this.pageNum = 1;
				this.refresherTriggered = true;

				try {
					await this.getindex();
				} finally {
					// 关闭刷新状态
					this.refresherTriggered = false;
				}
			},

			pageBack() {
				uni.navigateBack({
					delta: 1 // delta值为1时表示返回的页面层数
				});
			},
		}

	}
</script>

<style scoped lang="scss">
	.icon_ {
		background: #eaf2fe;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 5rpx 10rpx;
		color: #427FFE;
		font-size: 14px;
		max-width: 200rpx;
		/* 限制最大宽度 */
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		flex-shrink: 0;
		/* 禁止挤压 */
	}

	.user_ {
		width: 90rpx;
		/* 固定宽度 */
		height: 90rpx;
		/* 固定高度 */
		border-radius: 4rpx;
		overflow: hidden;
		margin-right: 20rpx;
		flex-shrink: 0;
		/* 禁止挤压 */
	}

	.d_s {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		width: 100%;
		/* 确保宽度占满父容器 */
	}

	.name_ {
		font-size: 32rpx;
		color: #101A3E;
		margin-right: 20rpx;
		flex-shrink: 0;
		/* 禁止挤压 */
	}

	image {
		width: 100%;
		height: 100%;
	}

	.container {
		background: #F1F3F6;
		height: 100vh;
		// overflow: hidden;
	}

	.content {
		width: 100%;
		box-sizing: border-box;

		// padding-top: 170rpx;
	}

	.top_ {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		background: #fff;
		padding-bottom: 0px;
	}

	.tap_box {
		// height: calc(100vh - 400rpx);
		width: 100%;
		white-space: nowrap;
		margin: 5px 0px;
		box-sizing: border-box;
		padding-bottom: 5px;
		height: calc(100vh - 205px);
		-webkit-overflow-scrolling: touch;
		overflow-anchor: none;

	}

	.tap_list {
		color: #333333;
		margin: 0px 10px;
		display: inline-block;
	}

	.acColor {
		font-weight: bold;
		color: #5384fd;
	}

	.right_box {
		width: 88%;
	}

	.gang {
		width: 20px;
		height: 4px;
		margin-top: 5px;
		// background-color: #5384fd;
		border-radius: 30px;
		margin: 5px auto;
	}

	.actColor {
		background-color: #5384fd;
	}

	.search_box {
		box-sizing: border-box;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #F5F5F5;
		margin-top: 30rpx;
	}

	.lsit_ {
		// height: calc(100vh - 130px);
		background: #F1F3F6;
		box-sizing: border-box;
		padding: 30rpx;
		min-height: 100%;
	}

	.list_box {
		width: 100%;
		background: #fff;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		padding: 20rpx;
		display: flex;
	}

	.checkbox_ {
		width: 48rpx;
		height: 48rpx;
		// border-radius: 8rpx;
		// border: 2rpx solid #E0E0E0;
		// margin-right: 15rpx;
		// display: flex;
		// align-items: center;
		// justify-content: center;
	}

	//.d_s{
	//	display: flex;
	//	align-items: center;
	//	margin-bottom: 30rpx;
	//}
	.d_b {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	//.user_{
	//	width: 90rpx;
	//	height: 90rpx;
	//	border-radius: 4rpx;
	//	overflow: hidden;
	//	margin-right: 20rpx;
	//}
	//.icon_{
	//	background: #eaf2fe;
	//	border-radius: 8rpx;
	//	display: flex;
	//	align-items: center;
	//	justify-content: center;
	//	box-sizing: border-box;
	//	padding:5rpx 10rpx;
	//	color: #427FFE;
	//	font-size: 14px;
	//
	//
	//}
	.tel_ {
		width: 36rpx;
		height: 36rpx;
	}

	//.name_{
	//	font-size: 32rpx;
	//	color: #101A3E;
	//	margin-right: 20rpx;
	//}
	.bottom_ {
		width: 100%;
		height: 158rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 24rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 15px 15px 0px 0px;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom_left {
		width: 301rpx;
		height: 78rpx;
		border: 2rpx solid #427FFE;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #427FFE;
		font-size: 28rpx;
		border-radius: 50px;
		margin: 30rpx;

	}

	.bottom_right {
		width: 301rpx;
		height: 78rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #fff;
		background: #427FFE;
		border: 2rpx solid #427FFE;
		border-radius: 50px;
		margin: 30rpx;
	}

	.roleName {
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		width: 200rpx;
		/* 根据需要设置宽度 */
	}

	.page-top {
		flex-shrink: 0;
		width: 100%;
		height: 160rpx;
		display: flex;
		align-items: center;
		color: white;
		flex-shrink: 0;
		background: linear-gradient(180deg, #054DF3 0%, #55A3FF 100%);

		.go-back-page {
			position: absolute;
			left: 20rpx;
		}
	}
</style>