<template>
	<view class="container">
		<!-- <headersVue :titles="titles"><u-icon name="arrow-left" color="#fff" size="18"></u-icon></headersVue> -->
		<view class="header">
			<view class="top-rail"></view>
			<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 class="tap_list" :class="{ 'acColor': tapIndex == index}" v-for="(item,index) in  tabList"
					:key="index" @click="gettap(index,item.id)">
					<view class=""> {{item.name}}</view>
					<view class="gang" :class="{ 'actColor': tapIndex == index}"></view>

				</view> -->

			</view>
			<!-- <scroll-view scroll-y="true" class="tap_box" style="height: calc(100vh - 350px)"
				@scrolltolower="loadMoreData" :refresher-triggered="refresherTriggered" refresher-enabled
				@refresherrefresh="handleRefresh"> -->
			<scroll-view scroll-y="true" class="scroll-content" @scrolltolower="loadMoreData"
				:refresher-triggered="refresherTriggered" refresher-enabled @refresherrefresh="handleRefresh">
				<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="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/internal/yh.png" v-else mode=""></image>
								</view>
								<view class="name_">{{ item.nickname || item.username }}</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.mobile || item.username }}</text>
								</view>
								<view class="tel_" @click="gettel(item)">
									<image src="/static/internal/tel.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>

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

<script>
	// import headersVue from '../../components/header/headers.vue';
	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",
				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.gettab()
		},
		/* onShow() {
			// 页面显示就自动刷新（包括进入页面或从其他页面返回）
			this.pageNum = 1
			this.goodsList = []
			this.getindex()
		}, */
		onReachBottom() {
			if (this.pageNum >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})

			} else {
				this.pageNum++
				this.gettab()
			}
		},
		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) {
				uni.navigateTo({
					url: '/pages/internal/addStaff?id=' + data.id
				})
			},
			async getdelete() {
				if (this.workids == '') {
					uni.showToast({
						title: '请至少选择一名要删除的员工！',
						icon: 'none'
					})
					return
				} else {
					// this.workids = this.workids.join(",")
				}
				let res = await request({
					url: '/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: '/common/down/getDriverLicenseType',
					method: 'get'
				}).then(res => {
					//提取出数组中的id属性
					this.driverLicenseType = res.data
				})
			},
			goAdd() {
				uni.navigateTo({
					url: '/pages/internal/addStaff?ifAdd=' + true
				})
			},

			async gettab() {
				let res = await request({
					url: '/system/role/pageByQuery',
					method: 'get',
					params: {
						servicePackageId: 'jiuyuan'
					}
				})
				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.workName != '') {
					this.pageNum = 1
					this.goodsList = []
				}

				let data = {
					nickname: this.workName,
					roleId: this.roleId,
					pageNo: this.pageNum, //第几页
					pageSize: this.pageSize, //一页多少张
				}
				let res = await request({
					url: '/system/role/selectListByRoleIdJY',
					method: 'get',
					params: data
				})
				if (res.code == 200) {
					if (this.pageNum != 1) {
						this.goodsList = this.goodsList.concat(res.rows)
					} else {
						this.goodsList = res.rows
					}
					this.goodsList.forEach(item => {
						if (item.avatar && !item.avatar.includes(config.baseImageUrl)) {
							item.avatar = config.baseImageUrl + (item.avatar[0] === '/' ? item.avatar : '/' +
								item.avatar)
						}
					})
					let total = res.total
					this.totalPages = Math.ceil(total / this.pageSize);
				}
				const newUsers = this.goodsList.filter(item => !item.roleName)
				if (newUsers && newUsers.length > 0) {
					const ids = newUsers.map(item => item.id)
					request({
						url: '/inspection/util/getRoleNameByIds?ids=' + ids,
						method: 'get'
					}).then(res => {
						this.goodsList.filter(item => !item.roleName).map(item => {
							this.$set(item, "roleName", res.data[item.id])
						})
					})
				}
				console.log('Current page:', this.pageNum, 'Data:', this.goodsList);
			},
			loadMoreData() {
				if (this.pageNum >= this.totalPages || this.isLoading) return;
				this.pageNum++;
				this.gettab();
			},
			async refreshList() {
				if (this.isLoading) return;

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

				try {
					await this.getindex();
				} finally {
					// 关闭刷新状态
					this.refresherTriggered = false;
				}
			},
			async handleRefresh() {
				if (this.isLoading) return;
				this.refresherTriggered = true;
				this.pageNum = 1;
				this.isLoading = true;

				try {
					await this.getindex();
				} catch (error) {
					console.error('刷新失败:', error);
				} finally {
					this.refresherTriggered = false;
					this.isLoading = 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; */

		display: flex;
		flex-direction: column;
		height: 100vh;
	}

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

		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		// padding-top: 170rpx;
	}

	.scroll-content {
		flex: 1;
		overflow-y: auto;
	}

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

	.tap_box {
		width: 100%;
		white-space: nowrap;
		margin: 5px 0px;
		box-sizing: border-box;
		padding-bottom: 5px;

	}

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

	.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_ {
		background: #F1F3F6;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.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;
		/* 根据需要设置宽度 */
	}

	.top-rail {
		height: 60rpx;
		width: 100%;
		background-color: #054DF3;
	}

	.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>