<template>
  <Mask  :width="400" :height="400" :is-show="show">
    <CloseBtn @click="close"></CloseBtn>
    <el-card>
      <template #header>
        <span>添加用户</span>
      </template>
      <div>
        <el-form
            :model="userInfo"
            ref="formDataRef"
            :rules="rules"
            label-width="80px"
        >
          <el-form-item label="姓名" prop="name">
            <el-input v-model="userInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userInfo.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="userInfo.password"></el-input>
          </el-form-item>
          <el-form-item label="人员类型" prop="type">
            <el-select v-model="userInfo.type">
              <el-option
                  v-for="item in personType"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="close">取消</el-button>
        </el-form>
      </div>
    </el-card>
  </Mask>
</template>
<script setup lang="ts">
import Mask from "@/components/Mask.vue";
import {type PropType, ref} from "vue";
import CloseBtn from "@/components/CloseBtn.vue";
import {post} from "@/utils/request.ts";

const props = defineProps({
  saveCallback: {
    type: Function as PropType<(args?: any) => void>,
    default: () => {}
  }
})
const personType = ref<any>([
    {
  key: "0",
  value: "普通用户",
},
{
  key: "1",
  value: "管理员",
},
{
  key: "2",
  value: "医师",
}
]);
const show = ref<boolean>(false);
const userInfo = ref<any>({})
const formDataRef = ref();
const open = () => {
  show.value = true;
};
const close = () => {
  show.value = false;
  props.saveCallback();
};
defineExpose({open})

const rules = {
  name: [
    {required: true, message: "请输入姓名", trigger: 'blur'}
  ],
  username: [
    {required: true, message: "请输入用户名", trigger: 'blur'}
  ],
  password: [
    {required: true, message: "请输入密码", trigger: 'blur'}
  ],
  type: [
    {required: true, message: "请输入人员类型", trigger: 'blur'}
  ]
}
const save = () => {
  formDataRef.value?.validate((valid: boolean) => {
    if (!valid) {
      return;
    }
    // 如果验证通过，发送请求
    post("setting/user/save", {userInfo: userInfo.value}).then((res: any) => {
        formDataRef.value?.resetFields();
        close()
    });
  });
}

</script>
<style scoped lang="scss">

</style>