<template>
  <!-- 患者信息 -->
  <el-dialog
    :title="`${title}`"
    v-model="openPatientInformation"
    :width="`${width}`"
    append-to-body
  >
    <el-form
      ref="healthcareOsPatientInfo"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="就诊人类型" prop="patientType" label-width="100px">
        <el-select v-model="form.patientType" placeholder="请选择就诊人类型">
          <el-option
            v-for="dict in healthcare_os_patient_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学号/工号" prop="studentId">
        <el-input v-model="form.studentId" placeholder="请输入学号/工号" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="form.gender" placeholder="请输入性别">
          <el-option
            v-for="dict in sys_user_sex"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age" placeholder="请输入年龄" />
      </el-form-item>
      <el-form-item v-if="form.patientType == 0" label="专业" prop="major">
        <el-input v-model="form.major" placeholder="请输入专业" />
      </el-form-item>
      <el-form-item v-if="form.patientType == 0" label="班级" prop="classInfo">
        <el-input v-model="form.classInfo" placeholder="请输入班级" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入电话" />
      </el-form-item>
      <el-form-item v-if="form.patientType == 0" label="辅导员" prop="counselor">
        <el-input v-model="form.counselor" placeholder="请输入辅导员" />
      </el-form-item>
      <el-form-item
        v-if="form.patientType == 1 || form.patientType == 2"
        label="部门"
        prop="department"
      >
        <el-input v-model="form.department" placeholder="请输入部门" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="PatientInformation">
// 患者信息
import { addHealthcareOsPatientInfo } from "@/api/healthcare/outpatientService/healthcareOsPatientInfo";

const { proxy } = getCurrentInstance()
const { healthcare_os_patient_type } = proxy.useDict("healthcare_os_patient_type")
const { sys_user_sex } = proxy.useDict("sys_user_sex")

const props = defineProps({
  //
  open: {
    type: Boolean,
    onUpdate: Function,
    default: false,
  },
  title: {
    type: String,
    onUpdate: Function,
    default: "患者信息",
  },
  //
  width: {
    type: String,
    onUpdate: Function,
    default: "1200px",
  },
  //
  determineButton: {
    type: Object,
    onUpdate: Function,
  },
})

//
const openPatientInformation = ref(props.open)

const data = reactive({
  form: {
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    patientType: 0,
    studentId: null,
    name: null,
    gender: null,
    age: null,
    major: null,
    class: null,
    phone: null,
    counselor: null,
    department: null,
  },
  rules: {
    patientType: [{ required: true, message: "就诊人类型不能为空", trigger: "change" }],
    studentId: [
      { required: true, message: "学号/工号不能为空", trigger: "blur" },
      { pattern: /^\S+.*$/, message: "开头有空格", trigger: "blur" },
      {
        validator: (rule, value, callback) => {
          const num = Number(value);
          if (value.length > 255) {
            callback(new Error("长度小于255个字符"));
          } 
          else if(isNaN(num)) {
            callback(new Error("请输入数字"));
          }
          else {
            callback();
          }
        },
        trigger: "blur",
      }
    ],
    name: [
      { required: true, message: "姓名不能为空", trigger: "blur" },
      { pattern: /^\S+.*$/, message: "开头有空格", trigger: "blur" },
    ],
    gender: [{ required: true, message: "性别不能为空", trigger: "blur" }],
    age: [
      { required: true, message: "年龄不能为空", trigger: "blur" },
      { pattern: /^\S+.*$/, message: "开头有空格", trigger: "blur" },
      { pattern: /^(?!0\d)\d+$/, message: "请输入一个有效的整数", trigger: "blur" },
      { pattern: /^-?\d+$/, message: "请输入一个有效的正数", trigger: "blur" },
      {
        validator: (rule, value, callback) => {
          const num = Number(value);
          const minValue = 0;
          const maxValue = 150;
          if (isNaN(num)) {
            callback(new Error("请输入一个数字"));
          } else if (!Number.isInteger(num)) {
            callback(new Error("请输入一个整数"));
          } else if (num < minValue || num > maxValue) {
            callback(new Error(`请输入一个介于 ${minValue} 和 ${maxValue} 之间的整数`));
          } else {
            callback();
          }
        },
        trigger: "blur",
      },
    ],
    major: [
      { required: true, message: "专业不能为空", trigger: "blur" },
      { pattern: /^\S+.*$/, message: "开头有空格", trigger: "blur" },
      {
        validator: (rule, value, callback) => {
          if (value.length > 255) {
            callback(new Error("长度小于255个字符"));
          } else {
            callback();
          }
        },
        trigger: "blur",
      },
    ],
    classInfo: [
      { required: true, message: "班级不能为空", trigger: "blur" },
      { pattern: /^\S+.*$/, message: "开头有空格", trigger: "blur" },
      {
        validator: (rule, value, callback) => {
          if (value.length > 255) {
            callback(new Error("长度小于255个字符"));
          } else {
            callback();
          }
        },
        trigger: "blur",
      }
    ],
    phone: [
      { required: true, message: "电话不能为空", trigger: "blur" },
      { pattern: /^\S+.*$/, message: "开头有空格", trigger: "blur" },
      {
        pattern: /^1[3-9]\d{9}$/,
        message: "请输入一个有效的中国大陆手机号码",
        trigger: "blur",
      },
    ],
    counselor: [
      { required: true, message: "辅导员不能为空", trigger: "blur" },
      { pattern: /^\S+.*$/, message: "开头有空格", trigger: "blur" },
      {
        validator: (rule, value, callback) => {
          if (value.length > 255) {
            callback(new Error("长度小于255个字符"));
          } else {
            callback();
          }
        },
        trigger: "blur",
      }
    ],
    department: [
      { required: true, message: "部门不能为空", trigger: "blur" },
      { pattern: /^\S+.*$/, message: "开头有空格", trigger: "blur" },
      {
        validator: (rule, value, callback) => {
          if (value.length > 255) {
            callback(new Error("长度小于255个字符"));
          } else {
            callback();
          }
        },
        trigger: "blur",
      }
    ],
    createBy: [
      { required: false, message: "创建者不能为空", trigger: "blur" },
      { pattern: /^\S+.*$/, message: "开头有空格", trigger: "blur" },
    ],
    createTime: [
      { required: false, message: "创建时间不能为空", trigger: "blur" },
      { pattern: /^\S+.*$/, message: "开头有空格", trigger: "blur" },
    ],
  },
})

const { queryParams, form, rules } = toRefs(data);

// 表单重置
function reset() {
  form.value = {
    id: null,
    patientType: null,
    studentId: null,
    name: null,
    gender: null,
    age: null,
    major: null,
    classInfo: null,
    phone: null,
    counselor: null,
    department: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
  };
  proxy.resetForm("healthcareOsPatientInfo")
}

// 取消按钮
function cancel() {
  closeDialog()
  reset()
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["healthcareOsPatientInfo"].validate((valid) => {
    if (valid) {
      addHealthcareOsPatientInfo(form.value).then((response) => {
        proxy.$modal.msgSuccess("新增成功")
        //
        closeDialog()
        // 
        emit("select-value", form.value)
      })
    }
  })
}



// 事件 添加  select-value 事件 传递 数据
const emit = defineEmits(['select-value' , "input-query"])


// 使用 使用 父组件 传送 过来 的 
const requestValueUpdate = () => {
    //
    props.onUpdate()
}





// 方法 控制 弹框 的 显示
const openDialog = () => {
  openPatientInformation.value = true;
};
// 方法 控制 弹框 的 隐藏
const closeDialog = () => {
  openPatientInformation.value = false;
};
//
const confirm = () => {
  // 处理确定逻辑
  closeDialog();
};

// 可以 给 queryRef 组件 暴露 方法   父组件 可以 调用 子组件 的 方法
defineExpose({
  openDialog,
  closeDialog,
  reset,  // 
});
</script>
