<template>
	<view class="content">
		<view class="container">

			<view class="form-sub">
				<u-form :model="model1" ref="uForm" label-width="90px" class="demo-ruleForm" size="mini">
					<view style="position: relative;">
						<view style="position: absolute;left: -10px;color: #3d4b70;top: -3px;">*</view>
					</view>

					<view style="font-size: 15px; font-weight: bold;color: #3d4b70;margin-bottom: 10px;">基本信息填写</view>
					<u-form-item label="姓名" prop="userInfo.Name" borderBottom ref="item1">
						<u--input v-model="model1.userInfo.Name" border="none" customStyle="margin:0px;display:flex;padding:3px 9px"></u--input>
					</u-form-item>
					<u-form-item label="性别" prop="userInfo.Sex" borderBottom @click="showSex = true;" ref="item1">
						<u--input v-model="model1.userInfo.Sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none" suffixIcon="arrow-right" fontSize="14px"
							customStyle="margin:0px;display:flex;padding:3px 9px" suffixIconStyle="font-size:12px"></u--input>
						<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
					</u-form-item>
					<u-form-item label="手机号码" prop="userInfo.Phone" borderBottom ref="item1">
						<u--input v-model="model1.userInfo.Phone" border="none" customStyle="margin:0px;display:flex;padding:3px 9px"></u--input>
					</u-form-item>
					<u-form-item label="身份证号码" prop="userInfo.ID_CARD" borderBottom ref="item1">
						<u--input v-model="model1.userInfo.ID_CARD" border="none" customStyle="margin:0px;display:flex;padding:3px 9px"></u--input>
					</u-form-item>
					<u-form-item label="入职时间" prop="userInfo.InTime" borderBottom ref="item1" @click="showCheckDate()">
						<u--input disabledColor="#fff" v-model="model1.userInfo.InTime" disabled placeholder="请选择入职时间" suffixIcon="arrow-right" suffixIconStyle="font-size:12px" fontSize="14px"
							customStyle="margin:0px;display:flex;padding:3px 9px" border="none">
						</u--input>

						<!-- <u--input v-model="model1.userInfo.InTime" border="none"></u--input> -->
					</u-form-item>
					<u-form-item label="工龄" prop="userInfo.WORKINGYEAR" borderBottom ref="item1" @click="pickerShow = true">
						<u--input disabledColor="#fff" disabled v-model="model1.userInfo.WORKINGYEAR" border="none" suffixIcon="arrow-right" suffixIconStyle="font-size:12px" fontSize="14px"
							customStyle="margin:0px;display:flex;padding:3px 9px"></u--input>
					</u-form-item>
				</u-form>
				<view style="display: flex;flex-direction: row;" class="bottom-button">
					<u-button type="primary" @click="reset" color="#3d4b70" :plain="true" style="margin-right: 5px;">重置</u-button>
					<u-button type="primary" @click="submit" color="#3d4b70" style="margin-left: 5px;" v-if="loading == false">提交</u-button>
					<u-button type="primary" loading loadingText="加载中" color="#3d4b70" style="margin-left: 5px;" v-if="loading == true">提交</u-button>
				</view>
				<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
				</u-action-sheet>
				<u-datetime-picker :show="dateTimePickerInfo.showCheckDate" mode="date" v-model='dateTimePickerInfo.defaultDateTime' :formatter="formatter" @confirm="handleCheckDate"
					@close="dateTimePickerInfo.showCheckDate = false;" @cancel="dateTimePickerInfo.showCheckDate = false;"></u-datetime-picker>
				<u-picker :show="pickerShow" :columns="pickerColumns" @confirm="pickerConfirm" @cancel="pickerCancel"></u-picker>

			</view>
		</view>


	</view>
</template>

<script>
	import {
		RegisterUser
	} from '../../services/apply.js'
	import config from '../../config/common.js'
	import {
		isChinaMobilePhone,
		easyCheckID,
		getNowFormatDate
	} from '../../utils/common.js'
	export default {
		data() {
			return {
				showSex: false,
				appurl: config.uni_app_url,
				formatter: null,
				pickerShow: false,
				loading: false,
				pickerColumns: [Array(60).fill(null).map((_, i) => i)],
				OrgId:'',
				model1: {
					userInfo: {
						Name: '',
						Sex: '',
						Phone: '',
						ID_CARD: '',
						InTime: getNowFormatDate(),
						WORKINGYEAR: '',
					},
				},
				dateTimePickerInfo: {
					showCheckDate: false,
					defaultDateTime: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
					value: '',
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
				],
				rules: {
					'userInfo.Name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.Sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					'userInfo.Phone': {
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
					'userInfo.ID_CARD': {
						type: 'string',
						required: true,
						message: '请填写身份证号',
						trigger: ['blur', 'change']
					},
					'userInfo.InTime': {
						type: 'string',
						required: true,
						message: '请选择入职时间',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			}
		},
		
		onLoad(option) {
			if (option.OrgId && option.OrgId.length > 0) {
				this.OrgId = option.OrgId
			uni.setStorageSync('OrgId', this.OrgId)
			}
			
			
			// this.model.ID = option.ID
			// this.model.TaskID = option.taskID
			// this.TaskID = option.taskID
			// this.tableKey = option.tableKey
			// this.ORG_ID = uni.getStorageSync('orgId')
			// if (option.ID != null && option.ID != 'null') {
			// 	this.loadData()
			// } else {
			// 	this.isLoadOK = true
			// 	this.model.ID = guid()
			// 	this.model.ORG_ID = this.ORG_ID
			// 	this.isDIY = true
			// 	this.listPropValUpload.push(this.model.ID)
			// 	// this.model.Nav_ListSafeCheckDetail = null
			// }
		},
		
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			sexSelect(e) {
				this.model1.userInfo.Sex = e.name
				this.$refs.uForm.validateField('userInfo.Sex')
			},
			showCheckDate() {
				if (this.model1.userInfo.InTime == null) {
					this.model1.userInfo.InTime = uni.$u.timeFormat(new Date(),
						'yyyy-mm-dd')
				}
				this.dateTimePickerInfo = {
					showCheckDate: true,
					defaultDateTime: this.model1.userInfo.InTime,
				}
			},
			handleCheckDate(e) {
				// let v = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.model1.userInfo.InTime = uni.$u.timeFormat(e.value,
					'yyyy-mm-dd')
				this.dateTimePickerInfo.showCheckDate = false
			},
			pickerConfirm(e) {
				this.model1.userInfo.WORKINGYEAR = e.value.toString()
				this.pickerShow = false
			},
			pickerCancel(e) {
				this.pickerShow = false
			},
			reset() {
				this.model1.userInfo = {
					Name: '',
					Sex: '',
					Phone: '',
					ID_CARD: '',
					InTime: '',
					WORKINGYEAR: '',
				}
			},
			submit() {
				if (this.model1.userInfo.Name == '' ||
					this.model1.userInfo.Sex == '' ||
					this.model1.userInfo.Phone == '' ||
					this.model1.userInfo.ID_CARD == '' ||
					this.model1.userInfo.InTime == '') {
					uni.showToast({
						icon: 'error',
						title: '信息不能为空'
					})
					return
				}
				if (isChinaMobilePhone(this.model1.userInfo.Phone) == false) {
					uni.showToast({
						icon: 'error',
						title: '手机号码格式不正确'
					})
					return
				}
				if (easyCheckID(this.model1.userInfo.ID_CARD) == false) {
					uni.showToast({
						icon: 'error',
						title: '身份证号码格式不正确'
					})
					return
				}
				this.loading = true
				const json = {
					Name: this.model1.userInfo.Name,
					Sex: this.model1.userInfo.Sex == '男' ? '1' : '0',
					Phone: this.model1.userInfo.Phone,
					ID_CARD: this.model1.userInfo.ID_CARD,
					InTime: this.model1.userInfo.InTime,
					WORKINGYEAR: this.model1.userInfo.WORKINGYEAR,
					OrgId:this.OrgId
				}
				RegisterUser(json).then((res) => {
						this.loading = false
					if (res.code == 200) {
						uni.showToast({
							title: '注册成功！',
							icon: 'none'
						})
						setTimeout(() => {
							uni.hideToast();
							location.href = this.appurl
							// uni.redirectTo({
							// 	url: '/pages/webview/webview?url=' + this.appurl
							// })
						},1500)

						// uni.navigateTo({
						// 	url: '/pages/apply/complete?type=success'
						// })
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						// uni.navigateTo({
						// 	url: `/pages/apply/complete?type=failed&title=${res.msg}`
						// })
					}

				}).catch((err) => {
					this.loading = false
					uni.navigateTo({
						url: `/pages/apply/complete?type=failed&title=${err.msg}`
					})
				})
			},

		}
	}
</script>

<style>
	.content {
		background-color: #f4f7ff;
		width: 100%;
		/* #ifndef APP-PLUS */
		height: calc(100vh - 44px - 50px); // 非APP平台下生效
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh); // APP平台下生效
		/* #endif */
	}

	.container {
		padding: 20px 16px 10px 16px;
	}

	.form-sub {
		/* margin: 20px 16px 10px 16px; */
		/* border: 1px solid #EBEEF5; */
		padding: 20px 30px 10px 30px;
		/* box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px; */
		background-color: #ffffff;
		border-radius: 10px;
	}

	.demo-ruleForm>>>.u-form-item__body__left__content__label {
		font-size: 14px;
		color: #8e8b9c;
		/* justify-content: flex-start; */
	}

	.demo-ruleForm>>>.u-form-item__body__left__content__ {
		left: -11px;
		top: 0px
	}

	.demo-ruleForm>>>.u-textarea__field {
		font-size: 14px;
	}

	.demo-ruleForm>>>.u-cell__title-text {
		font-size: 14px;
	}

	.demo-ruleForm-thr>>>.u-textarea {
		padding: 9px 9px 25px 9px;
	}

	.demo-ruleForm-thr>>>.u-form-item__body__left__content__label {
		font-size: 14px;
		color: #8e8b9c;
		/* justify-content: flex-start; */
	}

	.demo-ruleForm-thr>>>.u-form-item__body__left__content__ {
		left: -11px;
		top: 0px
	}

	.demo-ruleForm-thr>>>.u-textarea__field {
		font-size: 14px;
	}

	.demo-ruleForm-thr>>>.u-cell__title-text {
		font-size: 14px;
	}

	.bottom-button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 10px 16px;
		box-sizing: border-box;
		background: #f4f7ff;
		z-index: 999;
	}
</style>