<template>
	<!--规划审批 -->
	<a-card :bordered="false">
		<div style="cursor: pointer" @click="del"><left-outlined />返回</div>
		<a-card :bordered="false">
			<div class="pricemoitorrecord">
				<a-form
					ref="formStateRef"
					: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: '请填写' }]"
						>
							<a-select :disabled="codeDEl" v-model:value="formState.name" @change="handleChangeName">
								<a-select-option v-for="item in optionsName" :key="item.id" :value="item.id">{{
									item.name
								}}</a-select-option>
							</a-select>

							<!--  -->
						</a-form-item>
						<a-form-item
							class="form-item"
							label="性别"
							name="gender"
							:label-col="{ span: 10 }"
							:rules="[{ required: true, message: '请填写!', trigger: 'blur' }]"
						>
							<a-select :disabled="true" v-model:value="formState.gender" @change="handleChangeGender">
								<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 :disabled="true" v-model:value="formState.age" />
						</a-form-item>

						<!--  -->
						<a-form-item class="form-item" label="当前所属岗位" name="position" :label-col="{ span: 10 }">
							<a-input :disabled="true" 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: 'blur' }]"
						>
							<a-input :disabled="true" v-model:value="formState.contact" />
						</a-form-item>

						<a-form-item class="form-item" label="邮箱" name="email" :label-col="{ span: 10 }">
							<a-input :disabled="true" v-model:value="formState.email" />
						</a-form-item>
						<a-form-item class="form-item" label="工作年限" name="workYears" :label-col="{ span: 10 }">
							<a-input :disabled="true" v-model:value="formState.workYears" />
						</a-form-item>
						<a-form-item
							class="form-item"
							label="身份证号"
							name="idCard"
							:label-col="{ span: 10 }"
							:rules="[{ required: true, message: '请填写!', trigger: 'blur' }]"
						>
							<a-input :disabled="true" v-model:value="formState.idCard" />
						</a-form-item>
						<a-form-item
							class="form-item"
							label="籍贯"
							name="nativePlace"
							:label-col="{ span: 10 }"
							:rules="[{ required: true, message: '请填写!', trigger: 'blur' }]"
						>
							<a-input :disabled="true" 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: '请填写!', trigger: 'blur' }]"
						>
							<a-select :disabled="true" 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="staffCategory" :label-col="{ span: 10 }">
							<a-select :disabled="true" 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="politicalStatus"
							:label-col="{ span: 10 }"
							:rules="[{ required: true, message: '请输入或选择!' }]"
						>
							<a-select :disabled="true" 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="positionNature" :label-col="{ span: 10 }">
							<a-select :disabled="true" 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="major" :label-col="{ span: 10 }">
							<a-input :disabled="true" v-model:value="formState.major" />
						</a-form-item>

						<a-form-item class="form-item" label="规划方向" name="planDirection" :label-col="{ span: 10 }">
							<a-input :disabled="true" v-model:value="formState.planDirection" />
						</a-form-item>
					</div>
					<a-form-item
						class="input"
						label="说明"
						name="description"
						:label-col="{ span: 2 }"
						:rules="[{ required: true, message: '请输入!', trigger: 'blur' }]"
					>
						<a-textarea :disabled="true" v-model:value="formState.description" placeholder="" allow-clear />
					</a-form-item>

					<a-form-item
						class="input"
						label="审核意见"
						name="auditAdvice"
						:label-col="{ span: 2 }"
						:rules="[{ required: true, message: '请输入!', trigger: 'blur' }]"
					>
						<a-textarea :disabled="code" v-model:value="formState.auditAdvice" placeholder="" allow-clear />
					</a-form-item>

					<a-form-item>
						<div class="item-submit">
							<a-button class="btn1" @click="delCode(2)" :disabled="code" html-type="submit">驳回</a-button>
							<a-button class="btn1" @click="delCode(1)" :disabled="code" type="primary" html-type="submit"
								>通过</a-button
							>
						</div>
					</a-form-item>
				</a-form>
			</div>
		</a-card>
	</a-card>
</template>
<script lang="js">
	import { onMounted } from 'vue'
	import { reactive, ref } 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'
	import global from '@/api/basic.info/global'
	import utils from '@/utils/timeWZ.js'
	export default {
		name: 'ApprovalDel',
		components: {},
		setup(props, { emit }) {
			const code = ref(false)
			const codeDEl = ref(false)

			const router = useRouter()
			const route = useRoute()

			watch(
				() => route.query.codeSSC,
				(newVal) => {
					const codeDel = route.query.codeSSC
					if (codeDel == '1') {
						setTimeout(() => {
							code.value = false
							codeDEl.value = true
						}, 0)
					} else if (Boolean(route.query.codeSSC) == true) {
						code.value = true
						codeDEl.value = true
					}
				},
				{ immediate: true, deep: true }
			)
			const formStateRef = ref(null)
			const formState = ref({
				name: '',
				gender: '',
				genderDEl: '',
				ethnicityDEl: '',
				CategoryDEL: '',
				politicalStatusDEL: '',
				age: '',
				position: '',
				contact: '',
				email: '',
				workYears: '',
				politicalStatus: '',
				nativePlace: '',
				ethnicity: '',
				idCard: '',
				major: '',
				positionNature: '',
				staffCategory: '',
				personInfoId: '',
				planDirection: '',
				description: '',
				id: '',
				auditAdvice: ''
			})
			const formStateDEl = ref({
				name: '',
				gender: '',
				genderDEl: '',
				ethnicityDEl: '',
				CategoryDEL: '',
				politicalStatusDEL: '',
				age: '',
				position: '',
				contact: '',
				email: '',
				workYears: '',
				politicalStatus: '',
				nativePlace: '',
				ethnicity: '',
				idCard: '',
				major: '',
				positionNature: '',
				staffCategory: '',
				personInfoId: '',
				planDirection: '',
				description: '',
				id: '',
				auditAdvice: ''
			})
			onMounted(() => {
				getPersionsName()
				getGender()
				getEthnicity()
				getStaffCategory()
				getPoliticalStatus()
				getPositionNature()
				if (Boolean(route.query.codeSSC) == true || route.query.codeSSC) {
					XiangQi()
				}
			})
			const optionsName = ref([]) // 名称
			const option = ref([])
			const optionsGender = ref([]) // 性别
			const optionsEthnicity = ref([]) //民族
			const StaffCategory = ref([]) //人员类别
			const optionsPoliticalStatus = ref([]) //政治面貌
			const optionsPositionNature = ref([]) //岗位性质
			const getEthnicity = async () => {
				//民族
				const res = await business.genderDEl({ isQueryFristNode: true, parentId: '1547641470701658113' })
				optionsEthnicity.value = res
			}
			const getGender = async () => {
				// 性别
				const res = await business.genderDEl({ isQueryFristNode: true, parentId: '1543839774776291330' })
				optionsGender.value = res
			}
			const getStaffCategory = async () => {
				const res = await business.genderDEl({ isQueryFristNode: true, parentId: '1783421270036934657' })
				StaffCategory.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 handleChangeGender = (v) => {}
			// 获取名称， 人员列表
			const getPersionsName = async () => {
				const res = await business.getPersions({})
				optionsName.value = res
			}
			// 名称hu
			const handleChangeName = (v) => {
				Object.assign(formState.value, formStateDEl.value)
				formState.value.personInfoId = ''
				const h = optionsName.value.find((d) => {
					return v === d.id
				})
				Object.assign(formState.value, h)
				formState.value.personInfoId = h.id

				const hGender = optionsGender.value.find((d) => {
					return formState.value.gender == d.id
				})
				formState.value.genderDEl = hGender.dictValue

				// const hMZ = optionsEthnicity.value.find((d) => {
				// 	return formState.value.ethnicity == d.id
				// })
				// formState.value.ethnicityDEl = hMZ.dictValue

				// const hMZCategoryDEL = StaffCategory.value.find((d) => {
				// 	return formState.value.staffCategory == d.id
				// })
				// formState.value.CategoryDEL = hMZCategoryDEL.dictValue
				// const optionsPoliticalStatusDEL = optionsPoliticalStatus.value.find((d) => {
				// 	return formState.value.politicalStatus == d.id
				// })
				// formState.value.politicalStatusDEL = optionsPoliticalStatusDEL.dictValue
			}

			const type = ref('')
			const delCode = (v) => {
				type.value = ''
				type.value = v
			}

			const onFinish = async (values) => {
				console.log('Success:', values)
				await EmHonorADDAdd(formState.value)
				Object.assign(formState.value, { ...formStateDEl.value })
				del()
			}
			const EmHonorADDAdd = async (v) => {
				if (route.query.codeSSC == '1') {
					const adds = Object.assign({
						type: '2',
						step: '1',
						requestId: formState.value.id,
						auditStatus: type.value,
						auditAdvice: formState.value.auditAdvice,
						auditUserId: JSON.parse(localStorage.getItem('USER_INFO')).id,
						auditTime: utils.getDate('Y-M-D H:I:S'),
						attachment: ''
					})
					const res = await businessDel.RCGHauditPersonPlan(adds)
				} else {
					const add = Object.assign({
						personInfoId: v.personInfoId,
						planDirection: v.planDirection,
						description: v.description,
						status: type.value
					})
					const res = await businessDel.RCGHadd(add)
					// add
				}
			}
			const onFinishFailed = (errorInfo) => {
				console.log('Failed:', errorInfo)
			}

			// 详情
			const XiangQi = async (v) => {
				const personInfoId = route.query.personInfoId
				const planId = route.query.planId
				const resdel = await businessDel.RCGHview({ personInfoId: personInfoId, planId: planId })
				const res = await businessDel.RCGHauditRequest({
					reportId: route.query.planId,
					requestId: route.query.requestId,
					step: '1',
					type: '2'
				})
				Object.assign(formState.value, resdel.emPersonInfo)
				// Object.assign(formState.value, res.emPersonPlan)
				Object.assign(formState.value, res.emPersonPlan)
				Object.assign(formState.value, res.auditRequest)
				// Renyuan(res.emPersonPlan.personInfoId)
			}
			// 人员信息详情 回显示
			const Renyuan = async (v) => {
				const res = await businessDel.EmPersonInfoDetail({ id: v })
				Object.assign(formState.value, res)
				const hGender = optionsGender.value.find((d) => {
					return formState.value.gender == d.id
				})
				formState.value.genderDEl = hGender.dictValue

				const hMZ = optionsEthnicity.value.find((d) => {
					return formState.value.ethnicity == d.id
				})
				formState.value.ethnicityDEl = hMZ.dictValue
			}

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

			const del = () => {
				Object.assign(formState.value, formStateDEl.value)
				router.back()
			}
			function changeUpload(fd) {
				return global.uploadFile(fd).then((reg) => {
					uploadDataList.value.clearValidate()
					return reg
				})
			}
			const uploadDataList = ref(null)
			function beforeUpload() {
				uploadDataList.value.clearValidate()
			}

			return {
				delCode,
				router,
				optionsPositionNature,
				optionsPoliticalStatus,
				StaffCategory,
				option,
				codeDEl,
				code,
				handleChangeGender,
				handleChangeName,
				optionsName,
				uploadDataList,
				beforeUpload,
				changeUpload,
				formStateRef,
				optionsEthnicity,
				optionsGender,
				del,
				formState,
				onFinish,
				onFinishFailed,
				handleChange
			}
		}
	}
</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;
	}
	.input {
		margin-right: 10px;
		margin-left: 40px;
		margin-top: 20px;
		.ant-input-affix-wrapper {
			height: 100px;
			// width: 500px;
		}
	}
</style>
