<template>
	<view>
		<view @tap="editPeople('add')"
			style="width: 90%;height: 80rpx;line-height: 80rpx;text-align: center;background: #088FEB;color: #fff;margin: 20rpx auto;border-radius: 10px;">
			新增人员</view>
		<uni-card title="员工列表">
			<uni-list>
				<uni-list-item direction="row" clickable v-for="(item , index) in staffList" :key="index">
					<template #header>
						<view class="avatar-wrap">
							<text class="staff-name">{{ item.nickName }}</text>
						</view>
					</template>
					<template #footer>
						<view style="display: flex;">
							<view @tap="editPeople('edit',item)"><u-icon name="edit-pen-fill" size="28"></u-icon></view>
							<view @tap="delItem(item)"><u-icon name="trash-fill" size="28"></u-icon></view>
						</view>

					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>
		<uni-popup ref="inputDialog" background-color="#fff" :is-mask-click="true">
			<view class="type-popup">
				<view style="height: 120rpx;font-size: 36rpx;font-weight: bold;line-height: 120rpx;text-align: center;">
					新增人员
				</view>
				<uni-forms :modelValue="addForm" ref="addForm" validateTrigger="bind" :rules="rules" label-width="130rpx"
					label-align="right">
					<uni-forms-item label="姓名" required name="nickName">
						<uni-easyinput type="text" v-model="addForm.nickName" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="手机号" required name="mobile">
						<uni-easyinput type="text" v-model="addForm.mobile" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item label="权限" required name="type">
						<uni-data-select style="width: 100%" v-model="addForm.userRole" :localdata="typeList"></uni-data-select>
					</uni-forms-item>
				</uni-forms>
				
				<view
					style="width: 100%;height: 90rpx;line-height: 90rpx;text-align: center;border-radius: 0;background: linear-gradient(90deg, #60F3FF, #088FEB);color: #fff;display: flex;">
					<view style="width:50%;" @tap="$refs.inputDialog.close()">取消</view>
					<view style="width:50%;background: linear-gradient(90deg, #FF9797, #FFC1E0);"
						@tap="onDotClick()">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staffList: [],
				addForm: {
					nickName: '',
					mobile: '',
					userRole: ''
				},
				rules: {
					nickName: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					mobile: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
					userRole: {
						rules: [{
							required: true,
							errorMessage: '身份不能为空'
						}]
					},
				},
				typeList: [{
						value: 0,
						text: "管理员"
					},
					{
						value: 1,
						text: "操作员"
					},
					{
						value: 2,
						text: "收货员"
					},
				],
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				size: 30,
				type: '',
				pageNum: 1,
				pages: 1,

			};
		},
		onLoad() {
			this.type = uni.getStorageSync('type')
		},
		onShow() {
			this.getStaffList()
		},
		methods: {
			editPeople(type,item){
				this.addType = type
				
				if(item){
					this.addForm.nickName = item.nickName
					this.addForm.mobile = item.mobile
					this.addForm.userRole = Number(item.userRole)
					this.addForm.id = item.id
				}
				this.$refs.inputDialog.open()
			},
			delItem(item) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除该人员吗？',
					success(res1) {
						if (res1.confirm) {
							uni.request({
								url: that.tui.interfaceUrl() + '/app/logisticsUser/deleteLogisticsUser',
								data: {
									id: '1829882942424485888'
								},
								header: {
									'content-type': 'application/x-www-form-urlencoded',
									'appWLToken': that.tui.getToken()
								},
								method: 'POST', //'GET','POST'
								dataType: 'json',
								success: (res) => {
									if(res.data.code == 401){
										uni.clearStorage()
										uni.navigateTo({
											url: '/package2/login/login'
										})
									}
									if (res.data.code == 200) {
										that.tui.toast("删除成功")
									}
								},
								fail: (res) => {
									that.tui.toast("网络不给力，请稍后再试~")
								}
							})
						}
					}
				})

			},
			onDotClick() {
				if (this.addType == 'edit') {
					if(this.addForm.nickName == '' || this.addForm.mobile ==''|| this.addForm.userRole ==''){
						this.tui.toast(this.addForm.nickName == ''?'姓名不能为空':this.addForm.mobile == ''?'手机号不能为空':this.addForm.userRole == ''?'身份不能为空':'不能为空')
						return
					}
					uni.request({
						url: this.tui.interfaceUrl() + '/app/logisticsUser/updateLogisticsUser',
						data: {
							nickName:this.addForm.nickName,
							mobile: this.addForm.mobile,
							companyId: uni.getStorageSync('transCompany'),
							userRole: this.addForm.userRole,
							id: this.addForm.id
						},
						header: {
							'content-type': 'application/json',
							'appWLToken': this.tui.getToken()
						},
						method: 'POST', //'GET','POST'
						dataType: 'json',
						success: (res) => {
							if(res.data.code == 401){
								uni.clearStorage()
								uni.navigateTo({
									url: '/package2/login/login'
								})
							}
							if(res.data.code == 200){
								this.tui.toast('操作成功')
								setTimeout(res1=>{
									this.getStaffList()
								},1000)
							}
							
						},
						fail: (res) => {
							this.tui.toast("网络不给力，请稍后再试~")
						}
					})
				} else if (this.addType == 'add') {
					this.$refs.addForm.validate().then(async () => {
						uni.request({
							url: this.tui.interfaceUrl() + '/app/logisticsUser/addLogisticsUser',
							data: {
								nickName: this.addForm.nickName,
								mobile: this.addForm.mobile,
								companyId: uni.getStorageSync('transCompany'),
								userRole: this.addForm.userRole
							},
							header: {
								'content-type': 'application/json',
								'appWLToken': this.tui.getToken()
							},
							method: 'POST', //'GET','POST'
							dataType: 'json',
							success: (res) => {
								if(res.data.code == 401){
									uni.clearStorage()
									uni.navigateTo({
										url: '/package2/login/login'
									})
								}
								if(res.data.code == 200){
									this.tui.toast('操作成功')
									setTimeout(res1=>{
										this.getStaffList()
									},1000)
								}
							},
							fail: (res) => {
								this.tui.toast("网络不给力，请稍后再试~")
							}
						})
					}, (reason) => {
					
					})
				}
				this.$refs.inputDialog.close()
			},
			getStaffList() {
				uni.request({
					url: this.tui.interfaceUrl() + '/app/logisticsUser/getLogisticsUserPageList',
					data: {
						pageNum: this.pageNum,
						pageSize: "10",
						companyId: uni.getStorageSync('transCompany'),
						nickName: ""
					},
					header: {
						'content-type': 'application/json',
						'appWLToken': this.tui.getToken()
					},
					method: 'POST', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						this.status = 'nomore';
						if(res.data.code == 401){
							uni.clearStorage()
							uni.navigateTo({
								url: '/package2/login/login'
							})
						}
						if (res.data.code == 200) {
							if (this.pages == 1) {
								this.staffList = res.data.result.records
							} else {
								this.staffList = [...this.staffList, ...res.data.result.records]
							}
							this.pages = res.data.result.pages
						}
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.staff-name {
		padding: 0 15upx;
	}

	.tag-wrap {
		width: 100rpx;
		flex: 1;
		display: flex;

		view {
			margin: 0 2upx;
		}
	}

	.avatar-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24upx;
	}

	.type-popup {
		width: 500rpx;
		height: 570rpx;
		background: #fff;
		border-radius: 10px;
		position: relative;
		padding: 0 20rpx;
	}
</style>