<template>
	<view class="list-body">
		<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="400rpx" leftText="工作人员选择"
			leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
		<view class="apply-info">
			<view class="row" v-for="(row,index) in workerList" :key="index" @tap="select(row)">
				<view class="center">
					<view class="name-tel">
						<view class="name">姓名：{{row.remployee_.name}}</view>
						<view class="tel">手机号：{{row.remployee_.phone}}</view>
						<view class="tel">职责：{{row.duty}}</view>
						<view v-if="row.is_manager" style="color:red">负责人</view>
					</view>
				</view>
				<view class="right">
					<view class="icon bianji" @tap.stop="edit(row)">
					</view>
				</view>
			</view>
			<button type="primary" class="select" @click="checkPeople">选择人员</button>
		</view>
		<button type="primary" class="addNew" @click="add">新增人员</button>
		<view class="dialogWrap" v-if="limitedPeople">
			<view class="dialogCont">
				<view class="dialogTitle">
					<view>选择作业人员</view>
					<view class="dialogCloseImg" @click="closeDialog"></view>
				</view>
				<form @submit="formSubmit">
					<view class="uni-form-item uni-column">
						<view class="title">作业人员</view>
						<uni-data-select  :localdata="workerRange" v-model="formData.remployee" @change="selectWorker">
						</uni-data-select>
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">项目负责人</view>
						<view>
							<u-switch v-model="formData.is_manager"></u-switch>
						</view>
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">工作职责</view>
						<input class="workDuty" type="text" v-model="formData.duty" maxlength="20" placeholder="请输入" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">证书</view>
						<uni-data-select  :localdata="certificateRange" v-model="formData.rcertificates" @change="checkboxMeasuresChange">
						</uni-data-select>
					</view>
					<view class="uni-btn-v">
						<button class="mini-btn" type="primary" size="mini" form-type="submit">确定</button>
					</view>
				</form>
			</view>
		</view>
		<view class="apply-info" style="min-height: fit-content;display: flex;">

			<button type="primary" plain="true" @click="goBack">上一步</button>
			<button v-for=" item in initform.transitions" :key="item.id" @click="rpjSubmit(item.id)" type="primary" style="width: 25%;">{{item.name}}
			</button>
			<button type="warn">退出</button>
		</view>

	</view>
</template>

<script>
	export default {
		name: "rpjWorkers",
		data() {
			return {
				rpj:'',
				limitedPeople: false,
				formData: {
					remployee: '',
					is_manager: false,
					duty: '',
					rcertificates: [],
				},
				initform: {},
				workerList: [],
				workerRange: [],
				dutyRange: [{
						value: '10',
						text: "作业人员"
					},
					{
						value: '20',
						text: "起重司机"
					},
					{
						value: '30',
						text: "司索人员"
					},
					{
						value: '40',
						text: "起重指挥"
					},
					{
						value: '40',
						text: "电工"
					},
				],
				certificateRange: [],
			}
		},
		onLoad(params) {
			this.rpj = params.rpj;
			this.formData.rpj = params.rpj;
		},
		onShow() {
			this.workerList = [];
			this.getWorkerList();
			this.getWorkerRange();
			this.getInit()
			// this.getVpeopleList();
		},
		methods: {
			formSubmit(val) {
				let that = this;
				that.$u.api.rpjMemberCreate(that.formData).then(res => {
						that.getWorkerList();
						this.limitedPeople = false;
				})
			},
			//获取所有已注册的工作人员
			getWorkerRange() {
				let that = this;
				that.$u.api.remployee({
					page: 0
				}).then(res => {
					let workerRange = [];
					let obj = {};
					res.forEach(item => {
						obj = item;
						obj.value = item.id;
						obj.text = item.name;
						workerRange.push(obj);
					})
					that.workerRange = workerRange
				})
			},
			//获取该入厂项目的工作人员
			getWorkerList() {
				let that = this;
				that.workerList = [];
				that.$u.api.rpjMembers({
					page: 0,
					rpj: that.rpj
				}).then(res => {
					that.workerList = res
				})
			},
			selectWorker(e) {
				this.certificateRange = []
				let that = this;
				 that.formData.worker = e;
				 if(e!==''){
					 that.$u.api.rcertificate({
					 			remployee:e,
					 			page: 0
					 		})
					 		.then((res) => {
					 			let certificateRange = [];
					 			let obj = {};
					 			res.forEach(item => {
					 				obj = item;
					 				obj.checked = false;
					 				certificateRange.push(obj);
					 			})
					 			that.certificateRange = certificateRange
					 		});
					 
				 }else{}
				},
			checkboxMeasuresChange(e) {
				let values = e.detail.value;
				this.formData.rcertificates = values;
			},
			checkPeople() {
				this.rcertificateRange = [];
				this.limitedPeople = true;
			},
			closeDialog() {
				this.limitedPeople = false;
			},
			select(row) {},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

			add() {
				uni.navigateTo({
					url: '/pages/workSpace/newWork/addUser'
				})
			},
			edit(row) {},
			
			nexStep(){
				let params = `?oplId=${this.oplId}`;
				uni.navigateTo({
					url: '/pages/workSpace/operation/gasList'+params
				})
			},
			getInit() {
				this.$u.api.workflowInit('rpj').then((res) => {
					this.initform = res;
			
				});
			},
			//提交入厂项目
			rpjSubmit(id) {
				uni.showLoading({
				    title: '提交中'
				});
				let that = this;
				let ticket = {};
				ticket.workflow = that.initform.workflow;
				ticket.ticket_data = {
					rpj: that.rpj
				};
				ticket.transition = id;
				that.$u.api.ticketCreate(ticket).then((res) => {
					 uni.hideLoading();
					if (res.err_msg) {} else {
						uni.reLaunch({
							url: '/pages/workSpace/workSpace'
						})
					}
				});

			}
		}
	}
</script>

<style>
	>>>.uni-navbar__header,
	>>>.uni-status-bar {
		background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%), linear-gradient(#e60012, #e60012) !important;
	}

	.list-body {
		background-color: #f3fbff;
		padding-bottom: 113px;
	}

	.apply-info {
		min-height: 70vh;
		width: 720upx;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 5px;
		padding: 12px 16px;
		box-sizing: border-box;
		margin-top: 12px;
	}

	.row {
		padding: 10upx;
		margin-bottom: 20upx;
		border-bottom: 1upx solid #eeeeee;
	}

	.uni-list-cell {
		display: flex;
		padding: 10upx;
		margin-bottom: 20upx;
		border-bottom: 1upx solid #eeeeee;
	}

	.addNew {
		width: 50px;
		height: 50px;
		border-radius: 25px;
		line-height: 50px;
		box-shadow: 0 0 6px 2px rgba(0, 0, 0, .3);
		z-index: 100;
		position: fixed;
		bottom: 20px;
		right: 20px;
	}

	.select {
		margin: auto;
		box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.save-btn {
		height: 80rpx;
		color: #fff;
		font-size: 30upx;
		justify-content: center;
		align-items: center;
	}

	.dialogWrap {
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .3);
		top: 0;
		left: 0;
		z-index: 110;
	}

	.dialogCont {
		width: 80vw;
		position: absolute;
		top: 50%;
		margin: auto;
		background-color: #ffffff;
		left: 10vw;
		transform: translateY(-50%);
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.dialogTitle {
		font-size: 36rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eeeeee;
		display: flex;
		justify-content: space-between;
	}

	.uni-form-item {
		height: 160rpx;
	}

	.uni-form-item>.title {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
	}

	.uni-btn-v {
		text-align: center;
	}

	.dialogCloseImg {
		width: 52rpx;
		height: 52rpx;
		background-image: url('../../../static/my/my_apply/zuofei.png');
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.uni-label-pointer {
		min-width: 50%;
		display: inline-block;
		margin-right: 0!important;
		margin-bottom: 20upx;
	}
	.uni-form-item {
	    height:fit-content!important;
	}
	.workDuty {
	    font-size: 14px;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 0 5px;
    padding-left: 10px;
    position: relative;
    display: flex;
    -webkit-user-select: none;
    user-select: none;
    flex-direction: row;
    align-items: center;
    border-bottom: solid 1px #e5e5e5;
    width: 100%;
    flex: 1;
    height: 35px;
}
</style>
