<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
	<div>
		<el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''" :disabled="(status === 'audit' || status === 'taskFormDetail') && testFlag"
				 label-width="100px" @submit.native.prevent>

			<el-divider content-position="left"><i class="el-icon-document"></i> 基础信息</el-divider>
			<el-row :gutter="26">
				<el-col :span="12">
					<el-form-item label="姓名" prop="name" :rules="[{required: true, message: '姓名不能为空', trigger: 'blur'}]">
						<el-input v-model="inputForm.name"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="性别" prop="sex"
								  :rules="[
								  	{required: true, message: '性别不能为空', trigger: 'change'}
                 ]">
						<el-radio-group v-model="inputForm.sex">
							<el-radio v-for="item in $dictUtils.getDictList('sex')" :label="item.value" :key="item.value">{{item.label}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="年龄" prop="age" :rules="[{required: true, message: '年龄不能为空', trigger: 'change'}]">
						<el-input v-model="inputForm.age" type="number"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="出生日期" prop="birthday" :rules="[
                  {required: true, message:'请填写出生日期', trigger: 'blur'}
               ]">
						<el-date-picker
							style="width: 100%"
							v-model="inputForm.birthday"
							value-format="YYYY-MM-DD"
							placeholder="选择日期"
						>
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="政治面貌" prop="politicalOutlook" :rules="[]">
<!--						<el-input v-model="inputForm.politicalOutlook"></el-input>-->
						<el-select v-model="inputForm.politicalOutlook" placeholder="请选择政治面貌" style="width:100%;">
							<el-option
								v-for="item in $dictUtils.getDictList('political_outlook')"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="籍贯" prop="nativePlace" :rules="[]">
						<el-input v-model="inputForm.nativePlace"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="民族" prop="nation" :rules="[]">
						<el-input v-model="inputForm.nation"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="婚姻状况" prop="maritalStatus" :rules="[]">
						<el-select v-model="inputForm.maritalStatus" placeholder="请选择婚姻状况" clearable style="width: 100%;">
							<el-option
								v-for="item in $dictUtils.getDictList('marital_status')"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>

				</el-col>
				<el-col :span="12" v-if="flagMobile">
					<el-form-item label="联系电话" prop="mobilePhone" :rules="[{required: true, message: '联系电话不能为空', trigger: 'change'}]">
						<el-input v-model="inputForm.mobilePhone" :disabled = true></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-else>
					<el-form-item label="联系电话" prop="mobilePhone" :rules="[{required: true, message: '联系电话不能为空', trigger: 'change'}]">
						<el-input v-model="inputForm.mobilePhone" @blur="mobilePhoneOnly(inputForm.mobilePhone)"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="身份证号码" prop="idCard" :rules="[{required: true,validator: validator.isCardId, trigger:'blur'}]">
						<el-input v-model="inputForm.idCard" @blur="idCardOnly(inputForm.idCard)"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="家庭住址" prop="homeAddress" :rules="[]">
						<el-input v-model="inputForm.homeAddress"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="常住住址" prop="permanentAddress" :rules="[]">
						<el-input v-model="inputForm.permanentAddress"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider content-position="left"><i class="el-icon-document"></i> 学历信息</el-divider>
			<el-row :gutter="26">
				<el-col :span="12">
					<el-form-item label="毕业院校" prop="graduatedFrom" :rules="[]">
						<el-input v-model="inputForm.graduatedFrom"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="专业" prop="speciality" :rules="[]">
						<el-input v-model="inputForm.speciality"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="开始时间" prop="startTime" :rules="[
               ]">
						<el-date-picker
							style="width: 100%"
							v-model="inputForm.startTime"
							value-format="YYYY-MM-DD"
							placeholder="选择日期"
						>
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="毕业时间" prop="endTime" :rules="[
               ]">
						<el-date-picker
							style="width: 100%"
							v-model="inputForm.endTime"
							value-format="YYYY-MM-DD"
							placeholder="选择日期"
						>
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="学历" prop="education" :rules="[]">
						<el-select v-model="inputForm.education" placeholder="请选择学历" clearable style="width: 100%;">
							<el-option
								v-for="item in $dictUtils.getDictList('education')"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="学历性质" prop="educationNature" :rules="[]">
						<el-select v-model="inputForm.educationNature" placeholder="请选择学历性质" clearable style="width: 100%;">
							<el-option
								v-for="item in $dictUtils.getDictList('education_nature')"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否毕业" prop="graduatedOrNot" :rules="[]">
						<el-radio-group v-model="inputForm.graduatedOrNot">
							<el-radio v-for="item in $dictUtils.getDictList('graduated_or_not')" :label="item.value" :key="item.value">{{item.label}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="英语等级" prop="englishLevel" :rules="[]">
						<el-select v-model="inputForm.englishLevel" placeholder="请选择英语等级" clearable style="width: 100%;">
							<el-option
								v-for="item in $dictUtils.getDictList('english_level')"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="计算机等级" prop="ncre" :rules="[]">
						<el-select v-model="inputForm.ncre" placeholder="请选择英语等级" clearable style="width: 100%;">
							<el-option
								v-for="item in $dictUtils.getDictList('computer_level')"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="26">
				<el-col :span="12">
					<el-form-item label="个人简介" prop="remarks" :rules="[]">
						<el-input type="textarea" maxlength="200" show-word-limit v-model="inputForm.remarks"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider content-position="left" v-if="status === 'audit' && processName"><i class="el-icon-document"></i> 部门信息</el-divider>
			<el-row :gutter="26">
				<el-form v-if="status === 'audit' && processName" style="width: 100%" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"
						 label-width="110px" @submit.native.prevent>
					<el-row :gutter="26">
						<el-col :span="12">
							<el-form-item label="所属部门" prop="department" :rules="[
						{required: true, message:'请选择所属部门', trigger: 'blur'}
					]">
								<SelectTree
									ref="officeTree"
									:props="{
										  value: 'id',             // ID字段名
										  label: 'name',         // 显示名称
										  children: 'children'    // 子级字段名
										}"
									:url="`/system-server/sys/office/treeData?type=2`"
									:value="inputForm.department"
									:accordion="true"
									size="default"
									@getValue="(value) => {inputForm.department=value}"/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="员工类型" prop="onJobStatus" :rules="[
								{required: true, message:'请选择员工类型', trigger: 'blur'}
							]">
								<!--						<el-input v-model="inputForm.politicalOutlook"></el-input>-->
								<el-select v-model="inputForm.onJobStatus" placeholder="请选择员工类型" style="width:100%;">
									<el-option
										v-for="item in $dictUtils.getDictList('on_job_status')"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="进所日期" prop="entryDate" :rules="[
                  {required: true, message:'请填写进所日期', trigger: 'blur'}
               ]">
								<el-date-picker
									style="width: 100%"
									v-model="inputForm.entryDate"
									value-format="YYYY-MM-DD"
									placeholder="选择日期"
								>
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="合同开始日期" prop="contractStartDate" :rules="[
                  {required: true, message:'请填写合同开始日期', trigger: 'blur'}
               ]">
								<el-date-picker
									style="width: 100%"
									v-model="inputForm.contractStartDate"
									value-format="YYYY-MM-DD"
									placeholder="选择日期"
								>
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="合同结束日期" prop="contractEndDate" :rules="[
                  {required: true, message:'请填写合同结束日期', trigger: 'blur'}
               ]">
								<el-date-picker
									style="width: 100%"
									v-model="inputForm.contractEndDate"
									value-format="YYYY-MM-DD"
									placeholder="选择日期"
								>
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-row>
			<el-divider content-position="left" v-if="method === 'view' && processFlag"><i class="el-icon-document"></i> 部门信息</el-divider>
			<el-row :gutter="26">
				<el-form v-if="method === 'view' && processFlag" style="width: 100%" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"
						 :disabled="true"
						 label-width="110px" @submit.native.prevent>
					<el-row :gutter="26">
						<el-col :span="12">
							<el-form-item label="所属部门" prop="department" :rules="[
					]">
								<SelectTree
									ref="officeTree"
									:props="{
										  value: 'id',             // ID字段名
										  label: 'name',         // 显示名称
										  children: 'children'    // 子级字段名
										}"
									:url="`/system-server/sys/office/treeData?type=2`"
									:value="inputForm.department"
									:accordion="true"
									size="default"
									@getValue="(value) => {inputForm.department=value}"/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="员工类型" prop="onJobStatus" :rules="[]">
								<!--						<el-input v-model="inputForm.politicalOutlook"></el-input>-->
								<el-select v-model="inputForm.onJobStatus" placeholder="请选择员工类型" style="width:100%;">
									<el-option
										v-for="item in $dictUtils.getDictList('on_job_status')"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="进所日期" prop="entryDate" :rules="[
               ]">
								<el-date-picker
									style="width: 100%"
									v-model="inputForm.entryDate"
									value-format="YYYY-MM-DD"
									placeholder="选择日期"
								>
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="合同开始日期" prop="contractStartDate" :rules="[
               ]">
								<el-date-picker
									style="width: 100%"
									v-model="inputForm.contractStartDate"
									value-format="YYYY-MM-DD"
									placeholder="选择日期"
								>
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="合同结束日期" prop="contractEndDate" :rules="[
               ]">
								<el-date-picker
									style="width: 100%"
									v-model="inputForm.contractEndDate"
									value-format="YYYY-MM-DD"
									placeholder="选择日期"
								>
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-row>
		</el-form>
	</div>
</template>

<script>
	import userService from '@/api/sys/UserService'
	import CommonApi from '@/api/cw/common/CommonApi'
	import SelectTree from '@/components/treeSelect/treeSelect.vue'
	import enrollmentRegistrationService from '@/api/human/enrollment/EnrollmentRegistrationService'
	import OSSSerivce, {
		httpRequest,
		fileName,
		toHref,
	} from '@/api/sys/OSSService'

	export default {
		props: {
			businessId: {
				type: String,
				default: ''
			},
			formReadOnly: {
				type: Boolean,
				default: false
			},
			status: {
				type: String,
				default: ''
			}
		},
		data () {
			return {
				processName: false,
				processFlag: true,
				testFlag: false,
				flagMobile: false,
				hideUploadEdit: false, //隐藏上传按钮
				hideUploadEdit2: false, //隐藏上传按钮
				limitNum: 1,
				fileList: [],
				fileList2: [],
				dialogImageUrl: '',
				dialogVisible: false,
				dialogVisible2: false,
				disabled: false,
				title: '',
				method: '',
				visible: false,
				loading: false,
				showViewer: false,
				inputForm: {
					userId: this.$store.state.user.id,
					name: this.$store.state.user.name,
					sex: '',
					age: '',
					birthday: '',
					politicalOutlook: '',
					nativePlace: '',
					nation: '',
					maritalStatus: '',
					mobilePhone: '',
					idCard: '',
					homeAddress: '',
					permanentAddress: '',
					graduatedFrom: '',
					speciality: '',
					startTime: '',
					endTime: '',
					education: '',
					educationNature: '',
					graduatedOrNot: '',
					englishLevel: '',
					ncre: '',
					department: '',
					entryDate: '',
					contractStartDate: '',
					contractEndDate: '',
					remarks: '',
					type: '',
					onJobStatus: '',
					procInsId: '',
				},
				keyWatch: '',
			}
		},
		commonApi: null,
		created () {
			this.ossService = new OSSSerivce()
			this.commonApi = new CommonApi()
		},
		components: {
			SelectTree,
		},
		computed: {
			bus: {
				get () {
					return this.businessId
				},
				set (val) {
					this.businessId = val
				}
			},
			name () {
				return this.$store.state.user.name
			},
			userId () {
				return this.$store.state.user.id
			}
		},
		watch: {
			'keyWatch': {
				handler (newVal) {
					if (this.commonJS.isNotEmpty(this.bus)) {
						this.init('', this.bus)
					} else {
						this.$nextTick(() => {
							this.$refs.inputForm.resetFields()
						})
					}
				}
			},
			'loading': {
				handler (newVal) {
					this.$emit('changeLoading', newVal)
				}
			}
		},
		methods: {
			async httpRequest (file) {
				await httpRequest(file, fileName(file), this.directory, this.maxValue)
			},

			getKeyWatch (keyWatch) {
				this.keyWatch = keyWatch
			},
			getUpload () {
			},
			init (method, id) {
				console.log('this.status', this.status)
				this.method = method
				this.inputForm = {
					userId: this.$store.state.user.id,
					name: this.$store.state.user.name,
					sex: '',
					age: '',
					birthday: '',
					politicalOutlook: '',
					nativePlace: '',
					nation: '',
					maritalStatus: '',
					mobilePhone: '',
					idCard: '',
					homeAddress: '',
					permanentAddress: '',
					graduatedFrom: '',
					speciality: '',
					startTime: '',
					endTime: '',
					education: '',
					educationNature: '',
					graduatedOrNot: '',
					englishLevel: '',
					ncre: '',
					department: '',
					entryDate: '',
					contractStartDate: '',
					contractEndDate: '',
					remarks: '',
					type: '',
					onJobStatus: '',
					procInsId: '',
				}
				if (method === 'add') {
					this.title = `新建入职登记`
				} else if (method === 'edit') {
					this.title = '修改报销类型'
				}
				this.inputForm.id = id
				this.visible = true
				this.loading = false
				this.$nextTick(() => {
					this.loading = true
					enrollmentRegistrationService.findById(this.inputForm.id).then(async (data) => {
						this.fileList = []
						this.fileList2 = []
						if (this.status === 'audit' || this.status === 'taskFormDetail') {
							this.method = 'view'
						}

						console.log('method', method)
						this.inputForm = this.recover(this.inputForm, data)
						this.inputForm = JSON.parse(JSON.stringify(this.inputForm))

						if (this.commonJS.isNotEmpty(this.inputForm.name)) {
							this.testFlag = true
						}
						this.getProcessName()

						userService.getMobileById(this.$store.state.user.id).then(async (mo) => {
							if (mo) {
								this.inputForm.mobilePhone = mo
								this.flagMobile = true
							}
						})
						if (this.commonJS.isEmpty(this.inputForm.name)) {
							this.inputForm.name = this.$store.state.user.name
							this.inputForm.userId = this.$store.state.user.id
						}
						console.log('this.testFlag', this.testFlag)
						this.loading = false
					})
				})
			},
			// 表单提交
			doSubmit () {
				this.$refs['inputForm'].validate((valid) => {
					if (valid) {
						this.loading = true
						if (this.commonJS.isEmpty(this.inputForm.idCard)) {
							this.loading = false
							this.$message.error('身份证号码不能为空')
							throw new Error('身份证号码不能为空')
						}
						this.inputForm.id = this.businessId
						enrollmentRegistrationService.save2(this.inputForm).then((data) => {
							this.close()
							this.$message.success(data)
							this.$emit('refreshDataList')
							this.loading = false
						}).catch(() => {
							this.loading = false
						})
					}
				})
			},
			close () {
				this.$refs.inputForm.resetFields()
				this.fileList = []
				this.fileList2 = []
				this.visible = false
			},
			reapplyForm (callback) {
				this.loading = true
				enrollmentRegistrationService.findById(this.inputForm.id).then((data) => {
					if (data.type !== '4') { // 审核状态不是“驳回”，就弹出提示
						this.loading = false
						this.$message.error('任务数据已发生改变或不存在，请在待办任务中确认此任务是否存在')
						throw new Error('任务数据已发生改变或不存在，请在待办任务中确认此任务是否存在')
					} else {
						this.startForm(callback)
					}
				})
			},
			// 送审
			async startForm (callback) {
				this.$refs['inputForm'].validate(async (valid) => {
					if (valid) {
						this.loading = true

						if (this.commonJS.isEmpty(this.inputForm.idCard)) {
							this.loading = false
							this.$message.error('身份证号码不能为空')
							throw new Error('身份证号码不能为空')
						}
						if (!this.validateXG.isPhoneOrMobile(this.inputForm.mobilePhone)) {
							this.$message.error('”联系电话“填写不正确，请重新填写')
							this.loading = false
							this.inputForm.mobilePhone = ''
							throw new Error('”联系电话“填写不正确，请重新填写')
						}
						this.inputForm.type = '2'
						enrollmentRegistrationService.save2(this.inputForm).then((data) => {
							this.inputForm.title = `${this.$store.state.user.name} 发起了 [${this.inputForm.name} - 入职登记]`
							this.inputForm.id = data.businessId
							callback(data.businessTable, data.businessId, this.inputForm)
							this.$refs.inputForm.resetFields()
							this.loading = false
						}).catch(() => {
							this.$refs.inputForm.resetFields()
							this.loading = false
						})
					} else {
						this.loading = false
					}
				})
			},

			// 通过
			async agreeForm (callback) {
				this.loading = true
				enrollmentRegistrationService.findById(this.inputForm.id).then((data) => {
					if (data.type !== '2') { // 审核状态不是“审核中”，就弹出提示
						this.loading = false
						this.$message.error('任务数据已发生改变或不存在，请在待办任务中确认此任务是否存在')
						throw new Error('任务数据已发生改变或不存在，请在待办任务中确认此任务是否存在')
					} else {
						this.$refs['inputForm'].validate(async (valid) => {
							if (valid) {
								this.loading = true
								if (this.commonJS.isNotEmpty(this.processName)) {
									if (this.processName) {
										this.inputForm.type = '5'
									} else {
										this.inputForm.type = '2'
									}
								}

								console.log('this.inputForm',this.inputForm)
								enrollmentRegistrationService.save2(this.inputForm).then((data) => {
									callback(data.businessTable, data.businessId, this.inputForm)
									this.loading = false
								}).catch(() => {
									this.loading = false
								})
							} else {
								this.loading = false
							}
						})
					}
				})
			},
			// 修改状态
			updateStatusById (type, callback) {
				if (type === 'reject') {
					this.loading = true
					enrollmentRegistrationService.findById(this.inputForm.id).then((data) => {
						if (data.type !== '2') { // 审核状态不是“审核中”，就弹出提示
							this.loading = false
							this.$message.error('任务数据已发生改变或不存在，请在待办任务中确认此任务是否存在')
							throw new Error('任务数据已发生改变或不存在，请在待办任务中确认此任务是否存在')
						} else {
							this.inputForm.type = '4'
							enrollmentRegistrationService.updateStatusById(this.inputForm).then(() => {
								this.loading = false
								callback()
							})
						}
					})
				} else if (type === 'hold') {
					this.loading = true
					enrollmentRegistrationService.findById(this.inputForm.id).then((data) => {
						if (data.type !== '4') { // 审核状态不是“驳回”，就弹出提示
							this.loading = false
							this.$message.error('任务数据已发生改变或不存在，请在待办任务中确认此任务是否存在')
							throw new Error('任务数据已发生改变或不存在，请在待办任务中确认此任务是否存在')
						} else {
							this.inputForm.type = '1'
							enrollmentRegistrationService.updateStatusById(this.inputForm).then(() => {
								this.loading = false
								callback()
							})
						}
					})
				}
			},
			//身份证号码唯一性判断
			idCardOnly(idCard) {
				enrollmentRegistrationService.findIdCardOnly(idCard).then((data) => {
					if (data !== 0) {
						this.$message.error('身份证号码已存在，请重新确认')
						this.inputForm.idCard = ''
						throw new Error('身份证号码已存在，请重新确认')
					}
				})
			},
			//联系电话唯一性判断
			mobilePhoneOnly(mobilePhone) {
				if (!this.validateXG.isPhoneOrMobile(mobilePhone)) {
					this.$message.error('”联系电话“填写不正确，请重新填写')
					this.loading = false
					this.inputForm.mobilePhone = ''
					throw new Error('”联系电话“填写不正确，请重新填写')
				}
				enrollmentRegistrationService.findMobilePhoneOnly(mobilePhone).then((data) => {
					if (data !== 0) {
						this.$message.error('联系电话已存在，请重新确认')
						this.inputForm.mobilePhone = ''
						throw new Error('联系电话已存在，请重新确认')
					}
				})

			},
			getProcessName() {
				this.commonApi.getTaskNameByProcInsId(this.inputForm.procInsId).then((data) => {
					if (this.commonJS.isNotEmpty(data)) {
						if (data === '信息审核') {
							this.processName = true
							this.processFlag = false
						}

					}
				})
			}
		}
	}
</script>
