<template>
	<!--人员信息管理 -->
	<a-card :bordered="false">
		<div
			style="cursor: pointer"
			@click="
				() => {
					router.back()
				}
			"
		>
			<left-outlined />返回
		</div>

		<br />
		<div class="pricemoitorrecord">
			<a-form :model="formState" name="basic" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
				<div class="form">
					<a-form-item
						class="form-item"
						label="姓名"
						name="name"
						:label-col="{ span: 10 }"
						:rules="[
							{ required: true, message: '请输入!', trigger: 'change' },
							{ validator: isChinese, trigger: 'change' }
						]"
					>
						<a-input placeholder="请输入姓名" :disabled="code" v-model:value="formState.name" />
					</a-form-item>
					<a-form-item
						class="form-item"
						label="性别"
						name="gender"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: '请输入!' }]"
					>
						<a-select :disabled="code" v-model:value="formState.gender" @change="handleChange">
							<a-select-option v-for="item in optionsGender" :key="item.id" :value="item.id">{{
								item.dictLabel
							}}</a-select-option>
						</a-select>
					</a-form-item>

					<a-form-item class="form-item" label="年龄" name="age" :label-col="{ span: 10 }">
						<a-input placeholder="请输入年龄" :disabled="code" v-model:value="formState.age" />
					</a-form-item>

					<!--  -->
					<a-form-item class="form-item" label="当前所属岗位" name="position" :label-col="{ span: 10 }">
						<a-input placeholder="请输入当前所属岗位" :disabled="code" v-model:value="formState.position" />
					</a-form-item>
					<a-form-item
						class="form-item"
						label="联系方式"
						name="contact"
						:label-col="{ span: 10 }"
						:rules="[
							{ required: true, message: '请输入!', trigger: 'change' },
							{ validator: isMobileData, trigger: 'change' }
						]"
					>
						<a-input placeholder="请输入联系方式" :disabled="code" v-model:value="formState.contact" />
					</a-form-item>

					<a-form-item class="form-item" label="邮箱" name="email" :rules="[]" :label-col="{ span: 10 }">
						<a-input placeholder="请输入邮箱" :disabled="code" v-model:value="formState.email" />
					</a-form-item>
					<a-form-item class="form-item" label="工作年限" name="workYears" :label-col="{ span: 10 }">
						<a-input placeholder="请输入工作年限" :disabled="code" v-model:value="formState.workYears" />
					</a-form-item>
					<a-form-item
						class="form-item"
						label=" 政治面貌"
						name="politicalStatus"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: '请输入!' }]"
					>
						<a-select :disabled="code" v-model:value="formState.politicalStatus" @change="handleChange">
							<a-select-option v-for="item in optionsPoliticalStatus" :key="item.id" :value="item.id">{{
								item.dictLabel
							}}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item
						class="form-item"
						label="籍贯"
						name="nativePlace"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: '请输入!' }]"
					>
						<a-input placeholder="请输入籍贯" :disabled="code" v-model:value="formState.nativePlace" />
					</a-form-item>
					<a-form-item
						class="form-item"
						label="民族"
						name="ethnicity"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: '请输入!' }]"
					>
						<a-select :disabled="code" v-model:value="formState.ethnicity" @change="handleChange">
							<a-select-option v-for="item in optionsEthnicity" :key="item.id" :value="item.id">{{
								item.dictLabel
							}}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item
						class="form-item"
						label="身份证号码"
						name="idCard"
						:label-col="{ span: 10 }"
						:rules="[
							{ required: true, message: '请输入!', trigger: 'change' },
							{ validator: validateIdCard, trigger: 'change' }
						]"
					>
						<a-input placeholder="请输入身份证号码" :disabled="code" v-model:value="formState.idCard" />
					</a-form-item>
					<a-form-item class="form-item" label="岗位性质" name="positionNature" :label-col="{ span: 10 }">
						<a-select :disabled="code" v-model:value="formState.positionNature" @change="handleChange">
							<a-select-option v-for="item in optionsPositionNature" :key="item.id" :value="item.id">{{
								item.dictLabel
							}}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item
						class="form-item"
						label="在岗状态"
						name="onDutyStatus"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: '请输入!' }]"
					>
						<a-select :disabled="code" v-model:value="formState.onDutyStatus" @change="handleChange">
							<a-select-option v-for="item in optionsOnDutyStatus" :key="item.id" :value="item.id">{{
								item.dictLabel
							}}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item class="form-item" label="人员类别" name="staffCategory" :label-col="{ span: 10 }">
						<a-select :disabled="code" v-model:value="formState.staffCategory" @change="handleChange">
							<a-select-option v-for="item in StaffCategory" :key="item.id" :value="item.id">{{
								item.dictLabel
							}}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item class="form-item" label="专业" name="major" :label-col="{ span: 10 }">
						<a-input placeholder="请输入专业" :disabled="code" v-model:value="formState.major" />
					</a-form-item>

					<a-form-item class="form-item" label="" name="username" :label-col="{ span: 10 }"> </a-form-item>

					<!--  -->
				</div>

				<a-form-item>
					<div class="item-submit">
						<a-button
							class="btn1"
							@click="
								() => {
									router.back()
								}
							"
							>取消</a-button
						>
						<a-button :disabled="code" class="btn1" type="primary" html-type="submit">保存</a-button>
					</div>
				</a-form-item>
			</a-form>
		</div>
	</a-card>
</template>
<script lang="js">
	import {
		isSocialCreditOrIdCode,
		isLongitude,
		isLatitude,
		isEmail,
		isChinese,
		validateIdCard,
		// isTelephone,
		isMobileData,
		isZipCode,
		isInternetUrl,
		isSocialCreditCode
	} from '@/utils/validator-zq'
	import { required } from '@/utils/formRules'
	import { onMounted } from 'vue'
	import { reactive, ref, watch } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import { defineComponent } from 'vue'
	import business from '@/api/business/dictionary.js'
	import businessDel from '@/api/business/personnelApi.js'
	export default {
		name: 'ApplicationExtension',
		components: {},
		setup(props, { emit }) {
			const router = useRouter()
			const route = useRoute()
			const formState = ref({
				name: '',
				gender: '',
				age: '',
				position: '',
				contact: '',
				email: '',
				workYears: '',
				politicalStatus: '',
				nativePlace: '',
				ethnicity: '',
				idCard: '',
				positionNature: '',
				onDutyStatus: '',
				staffCategory: '',
				major: ''
			})

			watch(
				() => route.query.code,
				(newVal) => {
					const codeDel = route.query.code
					if (codeDel == '1') {
						// console.log('1234', codeDel == '1')
						setTimeout(() => {
							code.value = false
						}, 0)
					}
				},
				{ immediate: true, deep: true }
			)

			onMounted(() => {
				getGender()
				getPoliticalStatus()
				getPositionNature()
				getEthnicity()
				getOptionsOnDutyStatus()
				getStaffCategory()
				code.value = Boolean(route.query.code) || null
				huiXian()
			})

			const huiXian = async () => {
				if (code.value) {
					const res = await businessDel.EmPersonInfoDetail({ id: route.query.id })
					console.log(res)
					formState.value = res
				}
			}

			const code = ref(null)
			const optionsGender = ref([]) // 性别
			const optionsPoliticalStatus = ref([]) //政治面貌
			const optionsPositionNature = ref([]) //岗位性质
			const optionsEthnicity = ref([]) //民族
			const optionsOnDutyStatus = ref([]) // 在岗状态
			const StaffCategory = ref([]) //人员类别
			const options = ref([
				{
					value: 1
				}
			])
			const getGender = async () => {
				const res = await business.genderDEl({ isQueryFristNode: true, parentId: '1543839774776291330' })
				optionsGender.value = res
				console.log('	optionsGender.value', res)
			}
			const getPoliticalStatus = async () => {
				const res = await business.genderDEl({ isQueryFristNode: true, parentId: '1783417824630108162' })
				optionsPoliticalStatus.value = res
			}
			const getPositionNature = async () => {
				const res = await business.genderDEl({ isQueryFristNode: true, parentId: '1783422870449123330' })
				optionsPositionNature.value = res
			}
			const getEthnicity = async () => {
				const res = await business.genderDEl({ isQueryFristNode: true, parentId: '1547641470701658113' })
				optionsEthnicity.value = res
			}
			const getOptionsOnDutyStatus = async () => {
				const res = await business.genderDEl({ isQueryFristNode: true, parentId: '1783415547307569153' })
				optionsOnDutyStatus.value = res
			}
			const getStaffCategory = async () => {
				const res = await business.genderDEl({ isQueryFristNode: true, parentId: '1783421270036934657' })
				StaffCategory.value = res
			}
			// 新增
			const pustFrom = async (value) => {
				const res = await businessDel.EmPersonInfoAdd(value)
			}
			// 编辑
			const pustEdit = async (value) => {
				const res = await businessDel.EmPersonInfoEdit(value)
			}

			// 回显示
			const onFinish = (values) => {
				if (route.query.id) {
					pustEdit({ id: route.query.id, ...values })
				} else {
					pustFrom(values)
					formState.value = {
						name: '',
						gender: '',
						age: '',
						position: '',
						contact: '',
						email: '',
						workYears: '',
						politicalStatus: '',
						nativePlace: '',
						ethnicity: '',
						idCard: '',
						positionNature: '',
						onDutyStatus: '',
						staffCategory: '',
						major: ''
					}
				}
				router.back()
			}
			const onFinishFailed = (errorInfo) => {
				console.log('Failed:', errorInfo)
			}

			const handleChange = (val) => {
				console.log(val)
			}

			return {
				isEmail,
				validateIdCard,
				isMobileData,
				isChinese,
				code,
				StaffCategory,
				optionsOnDutyStatus,
				optionsEthnicity,
				optionsPositionNature,
				optionsPoliticalStatus,
				router,
				handleChange,
				formState,
				onFinish,
				onFinishFailed,
				options,
				optionsGender
			}
		}
	}
</script>
<style lang="less" scoped>
	.search {
		padding-top: 20px;
		padding-left: 50px;
		margin-bottom: 32px;
		.btnBox {
			display: inline-block;
			width: 200px;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
	.silt-title {
		display: flex;
	}
	.form {
		display: flex;
		flex-wrap: wrap;
		// justify-content: center;
		align-items: center;
		.form-item {
			width: 350px;
			margin-right: 20px;
		}
	}
	.item-submit {
		display: flex;
		justify-content: center;
		margin-top: 100px;
		.btn1 {
			width: 100px;
			margin-right: 20px;
		}
	}
	.ant-select {
		width: 250px;
	}
	.ant-input {
		width: 250px;
	}
	.ant-form-item-label {
		width: 150px;
	}
</style>
