<template>
	<div>
		<template v-if="state">
			<a-form :model="createForm" layout="vertical"  class="resume-form">
				<a-row :gutter="20">
					<a-col span="8">
						<a-form-item label="固话" name="landline">
							<a-input v-model:value="createForm.landline" placeholder="请输入固话" size="large"/>
						</a-form-item>
					</a-col>
					<a-col span="8">
						<a-form-item required label="移动电话" name="mobile">
							<a-input v-model:value="createForm.mobile" placeholder="请输入移动电话" size="large"/>
						</a-form-item>
					</a-col>
					<a-col span="8">
						<a-form-item label="QQ" name="qq">
							<a-input v-model:value="createForm.qq" placeholder="请输入QQ" size="large"/>
						</a-form-item>
					</a-col>
					<a-col span="8">
						<a-form-item label="个人网站" name="personal_website">
							<a-input v-model:value="createForm.personal_website" placeholder="请输入个人网站" size="large"/>
						</a-form-item>
					</a-col>
					<a-col span="8">
						<a-form-item label="通信地址" name="mailing_address">
							<a-input v-model:value="createForm.mailing_address" placeholder="请输入通信地址" size="large"/>
						</a-form-item>
					</a-col>
					<a-col span="8">
						<a-form-item label="邮编" name="postal_code">
							<a-input v-model:value="createForm.postal_code" placeholder="请输入邮编" size="large"/>
						</a-form-item>
					</a-col>
					<a-col span="24">
						<a-flex justify="flex-end">
							<a-space>
								<a-button @click="resetForm" size="large">取消</a-button>
								<a-button type="primary" @click="sumbitForm" size="large">保存</a-button>
							</a-space>
						</a-flex>
					</a-col>
				</a-row>
			</a-form>
		</template>
		<template v-else>
			<template v-if="detail">
				<a-row :gutter="[20,20]">
					<a-col span="10">
						<a-row>
							<a-space direction="vertical">
								<a-col span="24">
									固&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：{{detail.landline}}
								</a-col>
								<a-col span="24">
									手机号码：{{detail.mobile}}
								</a-col>
								<a-col span="24">
									Q&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Q：{{detail.qq}}
								</a-col>
								<a-col span="24">
									个人网站：{{detail.personal_website}}
								</a-col>
								<a-col span="24">
									通信地址：{{detail.mailing_address}}
								</a-col>
								<a-col span="24">
									邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编：{{detail.postal_code}}
								</a-col>
							</a-space>
						</a-row>
					</a-col>
				</a-row>
			</template>
			<template v-else>
				<a-row>
					<a-col span="24">
						<a-empty>
							<template #description>
								暂无信息
							</template>
						</a-empty>
					</a-col>
				</a-row>
			</template>
			
		</template>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits, createVNode } from 'vue';
	import { PostJobapplicantAddcontact, PostJobapplicantDelcontact, PostJobapplicantUpdatecontact, GetJobapplicantContactdetail } from '@/apis/models';
	import { intersectionAlike } from '@/utils/dataHelper';
	import { warnToast, successToast } from '@/utils/toastHelper';
	import { dataForm, otherDataForm, reset } from '@/components/jobseeker/resume/contact/data.ts';
	import { useCommon } from '@/hooks/useCommon';
	let { store, dayjs, richOption, ExclamationCircleOutlined, Modal } = useCommon();
	const dayjsRef = ref(dayjs);
	let props = defineProps(['form_state']);
	const emit = defineEmits();
	let state = ref<Boolean>(false)
	let detail = ref(null)
	let createForm = ref<JobseekerContactType.JobseekerContactFormType>(dataForm)

	onMounted(() => {
		getBasic()
	})

	const getBasic = () => {
		GetJobapplicantContactdetail().then(res => {
			detail.value = res.data;
			createForm.value = intersectionAlike(createForm.value, res.data)
			createForm.value.id = res.data.id;
		})
	}


	const sumbitForm = () => {
		if(createForm.value.id) {
			PostJobapplicantUpdatecontact(createForm.value).then(res => {
				successToast('保存成功');
				getBasic();
				resetForm()
			}).catch(err => {
			})
		} else {
			PostJobapplicantAddcontact(createForm.value).then(res => {
				successToast('保存成功');
				getBasic();
				resetForm()
			}).catch(err => {
			})
		}
	}

	const resetForm = () => {
		createForm.value = reset().dataForm as JobseekerContactType.JobseekerContactFormType;
		state.value = false;
		emit("quitEdit")
	}

	watch(() => [props.form_state], (newVal) => {
		state.value = newVal[0];
		getBasic();
	})
</script>

<style>
</style>
