<template>
	<view  class="content">
		<form @submit="nextTap">
			
			<view class="block-input uni-flex uni-row mt24 ai-center" v-show="!isEdit">
				<text>请假人员</text>
				<text class="text-red">*</text>
				<view class=" uni-flex uni-row content-unit" >
					<input disabled="true" type="text" :value="postData.USER_NAME? postData.USER_NAME+'【'+postData.USERTYPE_NAME+'】' :''"  placeholder-style="color:#969EA4;" style="flex: 1;" />
					<text class="text-blue" @tap="isEdit=true">修改</text>
				</view>
			</view>
			<view class="block-input uni-flex uni-row mt24 ai-center" v-show="isEdit">
				<text>请假人员</text>
				<text class="text-red">*</text>
				<view class=" uni-flex uni-row content-unit">
					<input disabled="true" type="text" v-model="postData.USER_NAME" placeholder="请输入" placeholder-style="color:#969EA4;" style="flex: 1;"/>
				
				</view>
			</view>
			<hr/>
			<view class="block-input uni-flex uni-row ai-center" v-show="isEdit">
				<text>所属部门</text>
				<text class="text-red">*</text>
				<view class=" uni-flex uni-row content-unit" >
					<input type="text" v-model="postData.USERTYPE_NAME" placeholder="请输入" :focus='isEdit' placeholder-style="color:#969EA4;"  style="flex: 1;"  name="DepartmentName" />
				</view>
			</view>
			<view class="block-input uni-flex uni-row mt24 ai-center">
				<text>职务岗位</text>
				<text class="text-red">*</text>
				<view class=" uni-flex uni-row content-unit" >
						
					<input type="text" v-model="postData.post" placeholder="请输入" placeholder-style="color:#969EA4;"  style="flex: 1;" name="PersonPost"/>
					
				</view>
			</view>
			
			<view class="block-title uni-flex uni-row ai-center jc-between">
				<text>请假信息</text>
				<!-- <text class="text-blue">重填</text> -->
			</view>
			<view class="block-input uni-flex uni-row ai-center" style="align-items: center;">
				<text>请假类型</text>
				<text class="text-red">*</text>
				<view class=" uni-flex uni-row content-unit" >
					<picker mode="selector" @change="pickerChange($event,0)" range-key="FIELDENUM_NAME" :range="typeList" style="flex: 1;" >
						
						<input disabled="true" type="text" :value="typeList[pickerIndex[0]].FIELDENUM_NAME" placeholder="请选择" placeholder-style="color:#969EA4;"/>
					</picker>
					<i class="uni-icon uni-icon-arrowright"></i>
				</view>
			</view>
			<hr/>
			<view class="block-input uni-flex uni-row ai-center" >
				<text>开始时间</text>
				<text class="text-red">*</text>
				<view class=" uni-flex uni-row content-unit" >
					<picker mode="date" @change="setLeaveData($event,0)" style="flex: 1;" >
					
						<input disabled="true" type="text" :value="leaveDate[0]" placeholder="请选择" placeholder-style="color:#969EA4;" name="LeaveStartdate"/>
					</picker>
					<i class="uni-icon uni-icon-arrowright"></i>
				</view>
			</view>
			<hr/>
			<view class="block-input uni-flex uni-row ai-center" >
				<text>结束时间</text>
				<text class="text-red">*</text>
				<view class=" uni-flex uni-row content-unit">
					<picker mode="date" @change="setLeaveData($event,1)"  style="flex: 1;" >
						
						<input disabled="true" type="text" :value="leaveDate[1]" placeholder="请选择" placeholder-style="color:#969EA4;" name="LeaveEnddate"/>
					</picker>
					<i class="uni-icon uni-icon-arrowright"></i>
				</view>
			</view>
			<hr/>
			<view class="block-input uni-flex uni-row ai-center">
				<text>请假天数</text>
				<text class="text-red">*</text>
				<view class=" uni-flex uni-row content-unit" >
						
					<input type="digit" v-mode="postData.leaveDays" placeholder="请输入" placeholder-style="color:#969EA4;"  style="flex: 1;" name="DurationDays"/>
					
				</view>
			</view>
			<hr/>
			<view class="block-input uni-flex uni-row ai-center">
				<text>紧急程度</text>
				<text class="text-red">*</text>
				<view class=" uni-flex uni-row content-unit" >
					<picker mode="selector" @change="pickerChange($event,1)" range-key="name" :range="urgentList" style="flex: 1;" >
						
						<input disabled="true" type="text" :value="urgentList[pickerIndex[1]].name" placeholder="请选择" placeholder-style="color:#969EA4;"/>
					</picker>
					<i class="uni-icon uni-icon-arrowright"></i>
				</view>
			</view>
			<view class="block-input uni-flex uni-column mt24">
				<view  style="flex: 1;padding-top: 24upx;">
					<text>请假事由</text>
					<text class="text-red">*</text>
				</view>
				
				<view class="" style="flex: 1;margin-top: 12upx;">
					<textarea v-mode="postData.leaveReason" placeholder="请输入" placeholder-style="color:#969EA4;" name="LeaveReason"/>
				</view>
			</view>
			<view class="tip-box">
				注：如休年假，请在“请假事由”栏目附带写明本人可休假天数
				以及当年已休假天数。
			</view>
			<view class="block-input uni-flex uni-row mt24 ai-center">
				<text>审批人员</text>
				<text class="text-red">*</text>
				<view class=" uni-flex uni-row ai-center" style="flex: 1;margin-left: 32upx;">
					<picker mode="selector" @change="pickerChange($event,2)"  range-key="USER_NAME" :range="transferUserList" style="flex: 1;" >
						
						<input disabled="true" type="text" :value="transferUserList[pickerIndex[2]].USER_NAME" placeholder="未添加" placeholder-style="color:#969EA4;" name="NowStaffName"/>
					</picker>
					<i class="uni-icon uni-icon-arrowright"></i>
				</view>
				
			</view>
			<button type="default" class="next-btn" :disabled="ispost" form-type="submit" :loading="ispost">提交</button>
		</form >
	</view>
</template>

<script>
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		data() {
			
			return {
				isEdit: false,
				typeList: [], // 请假类型
				urgentList:[{name:'一般',value:0},{name:'紧急',value:1}], //紧急程度
				leaveDate:['',''],
				selectType:1,
				transferUserList: [], // 审批人员
				pickerIndex: [0,0,0], // 请假类型，紧急程度，审批人员
				postData: {
					leaveReason:'',
					leaveDays:'',
					post:''
				},
				ispost: false
			}
		},
		computed:{
			...mapGetters({'users':'getUser'})
		},
		methods: {
			...mapMutations(['shouldReLoadingList']),
			setLeaveData(e,index){
			
				this.leaveDate[index] =  e.detail.value
				this.$forceUpdate()
			},
			pickerChange(e,index){
			
				this.pickerIndex[index] = Number(e.detail.value)
				this.$forceUpdate()
			},
			
			getTransferUser() { // 是否是请求移交人员
				let _this = this
				let _data = {
					ProdefId: this.postData.prodefId,
					serverpartCode: _this.postData.sCode
				}
				
				this.$request.$get('GetStaffLeaveInfo',_data).then((res)=> {
					uni.hideLoading()
					_this.postData.USER_NAME = res.Data.USER_NAME
					_this.postData.USERTYPE_NAME = res.Data.USERTYPE_NAME
					_this.postData.ActDef_ID = res.Data.ActDef_ID
					_this.transferUserList= res.Data.List
				
				})
			},
			getTypeList() {
				let _this = this
				_this.$request.$get('GetStaffLeaveType',{}).then(res=>{
					
					_this.typeList = res.Data.List
				})
				
			},
			nextTap(e){
				let _this = this
				// debugger
				let fromData = e.detail.value
				
				if(!fromData.PersonPost) {
					uni.showToast({
						title:'请输入职务岗位',
						icon:'none'
					})
					return false
				}
				if(!fromData.LeaveStartdate) {
					uni.showToast({
						title:'请选择请假开始时间',
						icon:'none'
					})
					return false
				}
				if(!fromData.LeaveEnddate) {
					uni.showToast({
						title:'请选择请假结束时间',
						icon:'none'
					})
					return false
				}
				if(!fromData.DurationDays) {
					uni.showToast({
						title:'请输入请假天数',
						icon:'none'
					})
					return false
				}
				if(!fromData.LeaveReason) {
					uni.showToast({
						title:'请输入请假事由',
						icon:'none'
					})
					return false
				}
				_this.ispost = true
				fromData.ProdefId = this.postData.prodefId
				fromData.serverpartCode = this.postData.sCode
				fromData.NowActdefIds = this.postData.ActDef_ID
				fromData.LeaveType = this.typeList[this.pickerIndex[0]].FIELDENUM_VALUE
				fromData.UrgencyDegree = this.urgentList[this.pickerIndex[1]].value
				fromData.NowStaffId = this.transferUserList[this.pickerIndex[2]].USER_ID
				
				this.$request.$post('InsertStaffLeave',fromData).then(res=>{
					uni.showToast({
						title:res.ResultDesc,
						icon:'none',
						duration:2000
					})
					_this.ispost = false
					
					if(res.ResultCode==100) {
						uni.$emit('7000',true)
						_this.shouldReLoadingList(true);
						setTimeout(function(){
							uni.navigateBack({
								delta:2
							})
						},800)
					}
				})
			}
		},
		onUnload() {
			this.$util.addUserBehavior()
		},
		onLoad(option) {
			uni.showLoading({title:'正在加载'})
			this.postData.prodefId = option.prodefId
			this.postData.sCode = option.sCode
			this.getTransferUser()
			this.getTypeList()
		}
	}
</script>

<style scoped>
	.content {
		height: 100%;
		justify-content: space-between;
	}
	.text-blue {
		color: #5E8FEA;
	}
	.block-title {
		color: #000;
		font-size: 26upx;
		padding: 54upx 24upx 27upx 24upx;
		font-weight: bold;
	}

	.type-title{
		margin-top: 24upx;
		line-height: 1;
	}
	.block-input {
		min-height: 92upx;
		background-color: #fff;
		padding-left: 24upx;
		padding-right: 16upx;
	}
	.mt24 {
		margin-top: 24upx;
	}
	.text-red {
		color: #EA3020;
	}
	.uni-icon-arrowright{
		color: #969EA4;
		font-size: 30upx;
	}
	.content-unit {
		flex: 1;
		margin-left: 40upx;
		align-items: center;
		height: 92upx;
	}
	.next-btn {
		background-color: #fff;
		width: 100%;
		border-radius: 0;
		color: #5E8FEA;
		margin-top: 36upx;
		font-size: 32upx;
		height: 90upx;
		line-height: 89upx;
	}
	button:after {
		border: none;
		border-radius: 0;
		border-top: 2upx solid #E9EDF2;
	}
	hr {
		height: 2upx;
		margin-left: 24upx;
	}
	.tip-box {
		padding: 28upx 24upx;
		background-color: #FDF5EB;
		color: #788691;
		font-size: 26upx;
		line-height: 1.2;
	}
	.add-btn {
		color: #5E8FEA;
		border: 2upx dashed #5E8FEA;
		font-size: 40upx;
		width: 42upx;
		text-align: center;
		height: 42upx;
		line-height: 39upx;
	}
	textarea {
		height: 200upx;
		width: 100%;
	}
</style>
