<template>
	<a-form :model="createForm" :label-col="{span: 4}" labelAlign="left">
		<a-row gutter="20">
			<a-col span="8">
				<a-form-item label="固话" name="landline">
					<a-input v-model:value="createForm.landline" placeholder="请输入固话" />
				</a-form-item>
			</a-col>
			<a-col span="8">
				<a-form-item required label="移动电话" name="mobile">
					<a-input v-model:value="createForm.mobile" placeholder="请输入移动电话" />
				</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" />
				</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="请输入个人网站" />
				</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="请输入通信地址" />
				</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="请输入邮编" />
				</a-form-item>
			</a-col>
		</a-row>
		<a-row gutter="20">
			<a-col>
				<a-button type="primary" @click="onSubmit">保存</a-button>
			</a-col>
			<a-col>
				<a-button style="margin-left: 10px">重置</a-button>
			</a-col>
			<a-col>
				<a-popconfirm title="是否要联系信息？删除后不可恢复" @confirm="onDel(createForm.customer_id)">
				    <a-button danger >删除全部</a-button>
				  </a-popconfirm>
			</a-col>
		</a-row>

	</a-form>

</template>

<script lang="ts" setup>
	import { ref, onMounted, computed, defineProps, watch, defineEmits } from 'vue';
	import { message } from 'ant-design-vue';
	import { PostJobapplicantAddcontact, PostJobapplicantDelcontact, PostJobapplicantUpdatecontact, PostJobapplicantContactdetail } from '@/apis/models';
	const emit = defineEmits();
	const props = defineProps(['customer_record']);

	let createForm = ref<contactType.addContactType>({
		landline: '',
		mobile: '',
		qq: '',
		personal_website: '',
		mailing_address: '',
		postal_code: '',
	})
	
	onMounted(() => {
		if (props.customer_record) {
			createForm.value = {
				id: props.customer_record.id ? props.customer_record.id : 0,
				customer_id: props.customer_record.customer_id,
				landline: props.customer_record.landline,
				mobile: props.customer_record.mobile,
				qq: props.customer_record.qq,
				personal_website: props.customer_record.personal_website,
				mailing_address: props.customer_record.mailing_address,
				postal_code: props.customer_record.postal_code,
			}
		}
		
	})

	const onSubmit = () => {
		// PostJobapplicantAdd(createForm.value).then(res => {
		// 	message.success('基本资料保存成功')
		// 	emit('toNext', {activeKey: "2"})
		// })
		emit('toNext', { activeKey: "3" })
	}
	const resetForm = () => {
		createForm.value = {
			customer_id: props.customer_record.customer_id,
			landline: '',
			mobile: '',
			qq: '',
			personal_website: '',
			mailing_address: '',
			postal_code: '',
		}
		console.log(createForm.value)
	}
	const onDel = (id: Number) => {
		PostJobapplicantDelcontact({id: id}).then(res => {
			message.success('删除成功');
			resetForm();
		})
	}
</script>

<style>
</style>