<template>
  <div>
    <el-dialog title="新增人员" width="1000px" :destroy-on-close="true" v-model="props.showAdd" append-to-body @close="closeAddModel">
      <el-form ref="elformAdd" :model="addForm" :rules="rules" class="mosty-from-wrap" :inline="true">
        <el-form-item label="姓名" prop="xm">
          <el-input v-model="addForm.xm" placeholder="请输入姓名" clearable/>
        </el-form-item>
        <el-form-item label="身份证号" prop="sfzh">
          <el-input v-model="addForm.sfzh" placeholder="请输入身份证号" clearable/>
        </el-form-item>
        <el-form-item label="籍贯" prop="jg">
          <el-input v-model="addForm.jg" placeholder="请输入籍贯" clearable/>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button @click="closeAddModel">取消</el-button>
        <el-button type="primary" @click="onComfirmAdd">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { watch, ref, onMounted, defineEmits, reactive, nextTick } from "vue";
const props = defineProps({
    showAdd: {
        type: Boolean,
        required: false
    },
})
const emits = defineEmits(["update:showAdd",'addDate'])
const addForm = ref({});
const rules = reactive({
  xm: [{ required: true, message: "请输入姓名",  trigger: "change" }],
  sfzh: [{ required: true, message: "请输入身份证号", trigger: ['change','blur']}],
  jg: [{ required: true, message: "请输入籍贯", trigger: ['change','blur']}],
})
const elformAdd = ref()
// 关闭弹窗
const closeAddModel = ()=>{
  addForm.value.xm = ''
  addForm.value.sfzh = ''
  addForm.value.jg = ''
  emits('update:showAdd',false)
};
// 提交表单
const onComfirmAdd = ()=>{
  elformAdd.value.validate((valid)=>{
      if(!valid) return false;
      let params = { ...addForm.value }
      emits('addDate',params)
      closeAddModel()
  })
};
</script>

<style>
</style>