<!--
@ 作者: 秦东
@ 时间: 2023-06-18 14:51:23
@ 备注: 新增紧急联系人
-->
<script lang='ts' setup>
import { emergencyContactInfo,emergencyContactAdd } from '@/api/hr/people/type'
import { addEmergencyContactInfo } from '@/api/hr/people/index'

const props = defineProps({
	addisshow:{
		type:Boolean,
		default:false
	},
	keyval:{
		type:String,
		default:""
	}
});
const addLoading = ref(false)
const emits = defineEmits(["update:addisshow","restdata"]);		//操作父级数据
const addJjlxrFormRef = ref(ElForm);	//编辑表单
const jjlxrFormData = reactive<emergencyContactInfo>({id:""});
/**
 * 弹窗显示控制
 */
const addshow = computed({
	get: () => props.addisshow,
	set: (val) => {
		emits("update:addisshow", val);
	},
});
/**
 * 表单验证规则
 */
 const addJjlxrRules = reactive({
	name: [{ required: true, message: "请输入紧急联系人姓名", trigger: "blur" }],	
	relationship: [{ required: true, message: "请输入与紧急联系人关系", trigger: "blur" }],
	mobilephone: [{ required: true, message: "请输入紧急联系人联系方式", trigger: "blur" }],	
});
/**
 * 关闭弹窗
 */
function clostAddBoxJjlxr(){
	emits("update:addisshow", false);
	initJjlxrData()
}
/**
 * 初始化数据
 */
 function initJjlxrData(){
	addJjlxrFormRef.value.resetFields();
	addLoading.value = false;
}
/**
 * 提交数据
 */
function submitAddJjlxr(){
	// console.log("提交数据",jjlxrFormData)
	// addLoading.value = true;
	addJjlxrFormRef.value.validate((isValid: boolean) => {
		if (isValid) {
			let listAry = new Array
			listAry.push(jjlxrFormData)
			addEmergencyContactInfo({id:props.keyval,list:listAry})
				.then(() =>{
					ElMessage.success("新增成功");
					clostAddBoxJjlxr();
					emits('restdata');
				})
				.finally(() =>{addLoading.value = false;})
		}
	});
}
</script>
<template>
	<el-dialog
        v-model="addshow"
        width="500"
        title="添加紧急联系人"
        append-to-body
		:before-close="clostAddBoxJjlxr"
    >
		<el-form
			ref="addJjlxrFormRef"
			:model="jjlxrFormData"
			:rules="addJjlxrRules"
			label-width="140px"                                                                                                                                                        
		>
			<el-form-item label="姓名" prop="name">
				<el-input v-model="jjlxrFormData.name" placeholder="请输入紧急联系人姓名" />
			</el-form-item>
			<el-form-item label="联系方式" prop="mobilephone">
				<el-input v-model="jjlxrFormData.mobilephone" placeholder="请输入紧急联系人联系方式" />
			</el-form-item>
			<el-form-item label="与紧急联系人关系" prop="relationship">
				<el-input v-model="jjlxrFormData.relationship" placeholder="请输入与紧急联系人关系" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="addLoading" @click="submitAddJjlxr" >确 定</el-button>
				<el-button @click="clostAddBoxJjlxr">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<style  lang='scss' scoped>

</style>
