<template>
	<!--荣誉称号 -->
	<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
							style="width: 250px"
							: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.genderDEl" @change="handleChangeGender">
							<a-select-option style="width: 250px" 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 style="width: 250px" :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 style="width: 250px" :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 style="width: 250px" :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 style="width: 250px" :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 style="width: 250px" :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 style="width: 250px" :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 style="width: 250px" :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
							style="width: 250px"
							:disabled="true"
							v-model:value="formState.ethnicityDEl"
							@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="titleName" :label-col="{ span: 10 }">
						<a-input
							style="width: 250px"
							placeholder="请输入称号名称"
							:disabled="code"
							v-model:value="formState.titleName"
						/>
					</a-form-item>
					<a-form-item class="form-item" label="获得时间" name="acquisitionTime" :label-col="{ span: 10 }">
						<a-date-picker
							:disabled="code"
							style="width: 250px"
							v-model:value="formState.acquisitionTime"
							valueFormat="YYYY-MM-DD HH:mm:ss"
						/>
					</a-form-item>

					<!--  -->
				</div>
				<!-- attachment -->
				<a-form-item
					:rules="[{ required: true, message: '请填写附件!', trigger: 'blur' }]"
					class="form-item"
					label="附件"
					name="attachment"
					ref="uploadDataList"
					:label-col="{ span: 2 }"
				>
					<DIYUPLoad
						:beforeUpload="beforeUpload"
						multiple
						:disabled="code"
						:change="changeUpload"
						listType="picture-card"
						v-model:urls="formState.attachment"
					></DIYUPLoad>
				</a-form-item>

				<a-form-item>
					<div class="item-submit">
						<a-button class="btn1" @click="del">取消</a-button>
						<a-button class="btn1" :disabled="code" type="primary" html-type="submit">保存</a-button>
					</div>
				</a-form-item>
			</a-form>
		</div>
	</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'
	export default {
		name: 'ApplicationExtension',
		components: {},
		setup(props, { emit }) {
			const code = ref(false)
			const codeDEl = ref(false)

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

			watch(
				() => route.query.codeFFG,
				(newVal) => {
					const codeDel = route.query.codeFFG
					if (codeDel == '1') {
						setTimeout(() => {
							code.value = false
							codeDEl.value = true
						}, 0)
					} else if (Boolean(route.query.codeFFG) == true) {
						code.value = true
						codeDEl.value = true
					}
				},
				{ immediate: true, deep: true }
			)
			const formStateRef = ref(null)
			const formState = ref({
				name: '',
				gender: '',
				genderDEl: '',
				ethnicityDEl: '',
				age: '',
				position: '',
				contact: '',
				email: '',
				workYears: '',
				politicalStatus: '',
				nativePlace: '',
				ethnicity: '',
				idCard: '',
				titleName: '',
				acquisitionTime: '',
				attachment: '',
				personInfoId: ''
			})
			const formStateDEl = ref({
				name: '',
				gender: '',
				genderDEl: '',
				ethnicityDEl: '',
				age: '',
				position: '',
				contact: '',
				email: '',
				workYears: '',
				politicalStatus: '',
				nativePlace: '',
				ethnicity: '',
				idCard: ''
				// titleName: ''
			})
			onMounted(() => {
				getPersionsName()
				getGender()
				getEthnicity()
				if (Boolean(route.query.codeFFG) == true || route.query.codeFFG) {
					XiangQi()
				}
			})
			const optionsName = ref([]) // 名称
			const optionsGender = ref([]) // 性别
			const optionsEthnicity = 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 handleChangeGender = (v) => {}
			// 获取名称， 人员列表
			const getPersionsName = async () => {
				const res = await business.getPersions({})
				console.log('233', res)
				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 onFinish = async (values) => {
				console.log('Success:', values)
				formState.value.attachment = values.attachment.join(',')
				await EmHonorADDAdd(formState.value)
				Object.assign(formState.value, { ...formStateDEl.value, acquisitionTime: '', attachment: '', personInfoId: '' })
				del()
			}
			const EmHonorADDAdd = async (v) => {
				if (route.query.code == '1') {
					const res = await businessDel.EmHonorEdit({
						id: route.query.id,
						personInfoId: v.personInfoId,
						titleName: v.titleName,
						acquisitionTime: v.acquisitionTime,
						attachment: v.attachment
					})
				} else {
					const res = await businessDel.EmHonorADD(v)
				}
			}
			const onFinishFailed = (errorInfo) => {
				console.log('Failed:', errorInfo)
			}

			// 详情
			const XiangQi = async (v) => {
				const id = route.query.id
				const res = await businessDel.EmHonorView({ id: id })
				Object.assign(formState.value, res)
				formState.value.attachment = res.attachment.split(',')
				Renyuan(res.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 = () => {
				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 {
				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;
		.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;
		}
	}
	.attachment {
		display: flex;
		// margin-top: 30px;
		div:first-child {
			width: 137px;
			text-align: right;
			margin-right: 9px;
		}
		span {
			color: red;
			margin-right: 3px;
		}
		p {
			font-size: 12px;
			color: #eb4897;
		}
	}
</style>
