<template>
	<view class="container">
		<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>
				<scroll-view scroll-x="true" class="tap_box" @scrolltolower="onReachBottom">
					<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>
				</scroll-view>
			</view>
			<scroll-view scroll-y="true" class="list-container">
				<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/imgs/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/imgs/tel.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-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, //总数
				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()
		},
		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/internalManagement/staffManagement/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: '/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.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: '/admin-api/system/role/selectListByRoleIdJX',
					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: '/admin-api/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])
						})
					})
				}
			},
			pageBack() {
				uni.navigateBack({
					delta: 1 // delta值为1时表示返回的页面层数
				});
			},
		}

	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #F1F3F6;
	}

	.header {
		flex-shrink: 0;
	}

	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.top_ {
		flex-shrink: 0;
		background: #fff;
		padding: 20rpx;
		padding-bottom: 0;
	}

	.list-container {
		flex: 1;
		overflow-y: auto;
	}

	.lsit_ {
		padding: 30rpx;
		background: #F1F3F6;
	}

	.bottom_ {
		flex-shrink: 0;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 24rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 15px 15px 0px 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
	}

	/* 其他样式保持不变 */
	.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%;
	}

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

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

	.right_box {
		width: 88%;
	}

	.gang {
		width: 20px;
		height: 4px;
		margin-top: 5px;
		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;
	}

	.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_b {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tel_ {
		width: 36rpx;
		height: 36rpx;
	}

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

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

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