<template>
	<view class="ygInfo">
		<!-- <u-navbar autoBack placeholder bgColor="#FFFFFF" @leftClick="goBack">
			<view class="navSlot" slot="center">
				<view class="title">员工管理</view>
			</view>
		</u-navbar> -->
		<u-sticky offset-top="0">
			<view class="search">
				<u-search height="40" placeholder="搜索员工姓名/手机号" @change="search" :showAction="false" @search="search"
					bgColor="#FAF7F6" v-model="nameOrPhone" :animation="false">
				</u-search>
			</view>
			<view class="list-wrap" v-if="workNum!=0">
				当天上班员工：{{workNum}}
				<view class="look-wrap" @click="handleCheck">查看</view>
			</view>
		</u-sticky>

		

		<view class="list-info">
			<view class="content-wrap">
				<!-- <z-paging ref="paging" :fixed="false" v-model="dataList" @query="getList" :auto="false"> -->
					<view class="list-item" v-for="(item,index) in dataList" :key="index">
						<view class="list-left">
							<u--image src="/static/tabar/ic_my_info.png" width="30px" height="30px"></u--image>
						</view>
						<view class="list-right">
							<view class="flex-info">
								<view class="flex-left">
									<text>{{item.staffName}}</text>
									<text class="tips-box">{{item.staffPhone}}</text>
								</view>
								<view class="flex-right">
									<u--image src="/static/yginfo/edit.png" width="20px" height="20px" class="mr20"
										@click="handleEdit(item.id)"></u--image>
									<u--image src="/static/yginfo/delete.png" width="20px" height="20px"
										@click="handleDelete(item.id,item.staffName)"></u--image>
								</view>
							</view>
							<view class="mt10">
								<view class="flex-box">
									<view>
										<text>账号</text>
										<text>{{item.staffAccount}}</text>
									</view>
									<view class="ml20">
										<text>密码</text>
										<text>{{item.staffPassword}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				<!-- </z-paging> -->
			</view>

		</view>
		<view class="footer-box" @click="addPowerStation">
			<view class="footer-info">
				添加员工
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				nameOrPhone: '',
				workNum: '',
				pageNum:1,
				pageSize:10,
				total:0
			}
		},

		onShow() {
			this.getList();
		},
		
		onReachBottom() {
			if (this.total > this.dataList.length) {
				this.pageNum = this.pageNum + 1
				this.getList(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},
		
		methods: {
			goBack() {
				uni.switchTab({
					url: `/pages/home/home`
				})
			},
			// 搜索
			search() {
				this.pageNum = 1
				this.getList();
			},
			// 列表
			getList(flag) {
				const params = {
					pageNumber: this.pageNum || 1,
					pageSize: 10,
					nameOrPhone: this.nameOrPhone,
					storeUserId: uni.getStorageSync('storeUserId')
				}
				this.$http.get('/api/store/staff/page', params).then(res => {
					if (res.code == 200) {

						// this.dataList = res.data.records
						// console.log(res.data.records, '=---')
						// this.$refs.paging.complete(this.dataList);
						
						this.dataList = !flag ? res.data.records : this.dataList.concat(res.data.records)
						this.total = res.data.total
						this.workNum = res.data.records[0].workNum
					} else {
						// this.$refs.paging.complete([]);
					}
				})
			},
			handleCheck() {
				uni.navigateTo({
					url: `/pages/workingStaff/workingStaff`
				})
			},
			// 添加员工
			addPowerStation() {
				uni.navigateTo({
					url: '/pages/addyg/addyg'
				})
			},
			// 编辑
			handleEdit(id) {
				uni.navigateTo({
					url: `/pages/editPage/editPage?id=${id}`
				})
			},
			// 删除
			handleDelete(id, staffName) {
				uni.showModal({
					title: '提示',
					content: `确认删除该${staffName}员工吗`,
					success: (res) => {
						if (res.confirm) {
							this.getDeleteInfo(id)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 删除
			getDeleteInfo(id) {
				this.$http.post(`/api/store/staff/del/${id}`, {}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '人员删除成功',
							icon: 'success',
							duration: 2000
						});
						// this.getList(1, 10);
						this.pageNum = 1
						this.getList();
					} else {
						uni.showToast({
							title: '人员删除失败',
							icon: 'success',
							duration: 2000
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #FAF7F6;
		padding-bottom: 200rpx;
	}

	.addItem {
		width: 702rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		text-align: center;
		line-height: 100rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		position: fixed;
		left: 50%;
		bottom: 50rpx;
		transform: translateX(-50%);
	}

	.search {
		padding: 24rpx;
		background: #FFFFFF;
	}

	.list-wrap {
		padding: 20rpx;
		background: #FF4602;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FAF7F6;

		.look-wrap {
			width: 100rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			background: #fff;
			color: #FF4602;
			border-radius: 25rpx;
		}
	}

	.list-info {
		margin-top:15rpx;
	}

	.content-wrap {
		padding: 30rpx;
		box-sizing: border-box;
		height: 90vh;
	}

	.list-item {
		display: flex;
		width: 100%;
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.list-left {
		margin-right: 20rpx;
	}

	.mt10 {
		margin-top: 10rpx;
	}

	.list-right {
		width: 100%;
	}

	.flex-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex-left {
		font-size: 30rpx;
		color: #333333;
	}

	.tips-box {
		font-size: 28rpx;
		color: #333333;
		margin-left: 30rpx;
	}

	.flex-right {
		display: flex;
	}

	.mr20 {
		margin-right: 20rpx;
	}

	.ml20 {
		margin-left: 20rpx;
	}

	.flex-box {
		display: flex;
		font-size: 28rpx;
		color: #A0A0A0;
	}

	.footer-box {
		width: 100%;
		height: calc(120rpx + env(safe-area-inset-bottom));
		background: #FFFFFF;
		padding: 20rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容Android */
		position: fixed;
		z-index: 3;
		bottom: 0;
		left: 0;
		z-index: 99;
	}

	.footer-info {
		width: 95%;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50rpx;
		text-align: center;
		background: #FF7A03;
		color: #fff;
		font-size: 30rpx;
	}
</style>