<template>
  <!-- <div class="app-container"> -->
  <!-- 添加或修改对话框 -->
  <el-dialog :title="title" v-model="visible" width="1020px" append-to-body>
      <el-form ref="patientRef" :model="form" :rules="rules" label-width="120px" label-position="left">
      <!-- 第一行：姓名、民族、性别 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="姓名" prop="name" label-width="80px">
            <el-input v-model="form.name" clearable :disabled="isViewMode" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="民族" prop="nationalityCode" label-width="80px">
            <el-select v-model="form.nationalityCode" clearable filterable :disabled="isViewMode">
              <el-option
                v-for="item in nationality_code"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="genderEnum" label-width="80px">
            <el-radio-group v-model="form.genderEnum" :disabled="isViewMode">
              <el-radio :label="0">男性</el-radio>
              <el-radio :label="1">女性</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 第二行：证件类别、证件号码、*年龄 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="证件类别" prop="typeCode" label-width="80px">
            <el-select
              v-model="form.typeCode"
              placeholder="就诊卡"
              clearable
              :disabled="isViewMode"
            >
              <el-option
                v-for="dict in sys_idtype"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码" prop="idCard" label-width="80px">
            <el-input v-model="form.idCard" clearable :disabled="isViewMode" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年龄" prop="age" label-width="80px">
            <el-input
              v-model="form.age"
              :disabled="isViewMode"
              @input="handleAgeInput"
              placeholder="请输入龄"
            >
              <template #suffix>岁</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 第三行：国家编码、*联系方式、工作单位 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="国家编码" prop="countryCode" label-width="80px">
            <el-input v-model="form.countryCode" clearable :disabled="isViewMode" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系方式" prop="phone" label-width="80px">
            <el-input v-model="form.phone" clearable :disabled="isViewMode" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出生日期" prop="birthDate">
            <el-date-picker
              v-model="form.birthDate"
              type="date"
              placeholder="请选择出生日期"
              format="YYYY年MM月DD日"
              :disabled="isViewMode"
              value-format="YYYY-MM-DD"
              @change="handleBirthDateChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 第三行：就诊卡号、国家编码、出生日期 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="就诊卡号" prop="identifierNo">
            <el-input v-model="form.identifierNo" clearable :disabled="isViewMode" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职业" prop="prfsEnum">
            <el-select v-model="form.prfsEnum" placeholder="职业" clearable :disabled="isViewMode">
              <el-option
                v-for="item in occupationtypeList"
                :key="item.value"
                :label="item.info"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工作单位" prop="workCompany">
            <el-input v-model="form.workCompany" clearable :disabled="isViewMode" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 地址选择、详细地址 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="地址选择" prop="addressSelect">
            <el-cascader
              :options="options"
              :props="{ checkStrictly: true, value: 'code', label: 'name' }"
              v-model="selectedOptions"
              @change="handleChange"
              :disabled="isViewMode"
            >
              <template #default="{ node, data }">
                <span>{{ data.name }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
              </template>
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="form.address" clearable :disabled="isViewMode" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 第六行：血型ABO、血型RH -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="血型ABO" prop="bloodAbo">
            <el-select
              v-model="form.bloodAbo"
              placeholder="血型ABO"
              clearable
              :disabled="isViewMode"
            >
              <el-option
                v-for="item in bloodtypeaboList"
                :key="item.value"
                :label="item.info"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="血型RH" prop="bloodRh">
            <el-select v-model="form.bloodRh" placeholder="血型RH" clearable :disabled="isViewMode">
              <el-option
                v-for="item in bloodtypearhList"
                :key="item.value"
                :label="item.info"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 第七行：婚姻状态、死亡时间 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="婚姻状态" prop="maritalStatusEnum">
            <el-select
              v-model="form.maritalStatusEnum"
              placeholder="婚姻状态"
              clearable
              :disabled="isViewMode"
            >
              <el-option
                v-for="item in maritalstatusList"
                :key="item.value"
                :label="item.info"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="死亡时间" prop="deceasedDate">
            <el-date-picker
              v-model="form.deceasedDate"
              type="datetime"
              placeholder="请选择时间"
              format="YYYY/MM/DD HH:mm:ss"
              :disabled="isViewMode"
              value-format="YYYY/MM/DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 第八行：监护人、监护人关系、监护人电话 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="监护人" prop="guardianName">
            <el-input v-model="form.guardianName" clearable :disabled="isViewMode" placeholder="请输入监护人" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="监护人关系" prop="guardianRelation">
            <el-select v-model="form.guardianRelation" placeholder="监护人关系" clearable :disabled="isViewMode">
              <el-option
                v-for="item in familyrelationshiptypeList"
                :key="item.value"
                :label="item.info"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="监护人电话" prop="guardianPhone">
            <el-input v-model="form.guardianPhone" clearable :disabled="isViewMode" placeholder="请输入监护人电话" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 第九行：监护人证件类型、监护人证件号码 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="监护人证件类型" prop="guardianIdType">
            <el-select v-model="form.guardianIdType" placeholder="请选择" clearable :disabled="isViewMode">
              <el-option label="身份证" value="id_card" />
              <el-option label="护照" value="passport" />
              <el-option label="其他" value="other" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="监护人证件号码" prop="guardianIdNo">
            <el-input v-model="form.guardianIdNo" clearable :disabled="isViewMode" placeholder="请输入监护人证件号码" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 第十行：监护人地址 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="监护人地址" prop="guardianAddress">
            <el-input v-model="form.guardianAddress" clearable :disabled="isViewMode" placeholder="请输入监护人详细地址" />
          </el-form-item>
        </el-col>
      </el-row>
    </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>
  <!-- </div> -->
</template>

<script setup name="PatientAddDialog">
import { watch } from "vue";
import pcas from 'china-division/dist/pcas-code.json';
import { addPatient, patientlLists, getOutpatientRegistrationList } from './outpatientregistration';
import { fromPairs } from 'lodash';

const router = useRouter();
const { proxy } = getCurrentInstance();
const {
  patient_gender_enum,
  sys_idtype,
  prfs_enum,
  blood_rh,
  blood_abo,
  marital_status_enum,
  patient_temp_flag,
  link_relation_code,
  nationality_code,
} = proxy.useDict(
  'patient_gender_enum',
  'sys_idtype',
  'prfs_enum',
  'blood_rh',
  'blood_abo',
  'marital_status_enum',
  'patient_temp_flag',
  'link_relation_code',
  'nationality_code'
);

const selectedOptions = ref([]); // v-model 绑定的选中值
const maritalstatusList = ref([]); //婚姻
const occupationtypeList = ref([]); //职业
const administrativegenderList = ref([]); //性别
const bloodtypeaboList = ref([]); //血型abo
const bloodtypearhList = ref([]); //血型RH
const familyrelationshiptypeList = ref([]); //家庭关系
// 使用 ref 定义查询所得用户信息数据
const patientInfo = ref(undefined);
const addressCom = ref(''); //地址

const options = ref(pcas); // 地区数据

const title = ref('新增患者');
const visible = ref(false);
const emits = defineEmits(['submit']); // 声明自定义事件

const validateUniquePatient = (rule, value, callback) => {
  const { name, idCard } = form.value;
  // 确保姓名和身份证都已填写且身份证为18位
  if (!name || !idCard || idCard.length !== 18) {
    return callback(); // 不满足条件，不校验
  }

  // 使用 axios 直接请求，避免依赖 proxy.$http
  import('@/utils/request').then(({ default: request }) => {
    request({
      url: '/patient-manage/information/check-exists',
      method: 'get',
      params: {
        name: name,
        idCardNo: idCard
      }
    }).then(res => {
      if (res.code === 200 && res.data === true) {
        callback(new Error('该患者档案已存在！'));
      } else {
        callback();
      }
    }).catch(error => {
      console.error('校验患者是否存在失败:', error);
      callback(); // 出错时不阻塞表单
    });
  });
};



// 身份证号码校验函数
const validateIdCard = (rule, value, callback) => {
  if (!value) {
    callback();
    return;
  }
  
  // 18位身份证正则
  const reg = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
  if (!reg.test(value)) {
    return callback(new Error('请输入正确的18位身份证号码'));
  }
  
  // 校验码验证（第18位）
  const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
  const parity = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
  let sum = 0;
  for (let i = 0; i < 17; i++) {
    sum += parseInt(value.charAt(i)) * factor[i];
  }
  const last = parity[sum % 11];
  if (last !== value.charAt(17).toUpperCase()) {
    return callback(new Error('身份证校验码错误'));
  }

  callback(); // 校验通过
}

// 监护人信息条件验证函数
const validateGuardianInfo = (rule, value, callback) => {
  // 只有当年龄小于18岁时才验证监护人信息
  if (form.value.age) {
    // 提取年龄数字部分
    const ageMatch = form.value.age.toString().match(/\d+/);
    if (ageMatch) {
      const age = parseInt(ageMatch[0]);
      // 如果年龄小于18岁，监护人信息必须填写
      if (age < 18 && !value) {
        return callback(new Error('年龄小于18岁的患者必须填写监护人信息'));
      }
    }
  }
  // 18岁及以上患者或年龄未填写时，跳过验证
  callback();
}

const data = reactive({
  isViewMode: false,
  form: {
    typeCode: '08',
    birthDate: undefined,
    age: undefined,
  },
  rules: {
    name: [{ required: true, message: '姓名不能为空', trigger: 'change' },
      { validator: validateUniquePatient, trigger: 'blur' }
    ],
    genderEnum: [{ required: true, message: '请选择性别', trigger: 'change' }],
    age: [{ required: true, message: '年龄不能为空', trigger: 'change' }],
    phone: [{ required: true, message: '联系方式不能为空', trigger: 'change' }],
    identifierNo: [{ required: true, message: '就诊卡号不能为空', trigger: 'change' }],
    idCard: [
        { required: false, message: '证件号码不能为空', trigger: 'change' },
        { validator: validateIdCard, trigger: 'blur' },
        { validator: validateUniquePatient, trigger: 'blur' }
      ],
    birthDate: [{ required: false, message: '请选择出生日期', trigger: 'change' }],
    // 监护人信息条件验证规则
    guardianName: [{ validator: validateGuardianInfo, trigger: 'blur' }],
    guardianRelation: [{ validator: validateGuardianInfo, trigger: 'blur' }],
    guardianPhone: [{ validator: validateGuardianInfo, trigger: 'blur' }],
    guardianIdNo: [{ validator: validateGuardianInfo, trigger: 'blur' }],
  },
});



  


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

const props = defineProps({
  item: {
    type: Object,
    required: false,
  },
});

// 处理出生日期变化，自动计算年龄
function handleBirthDateChange() {
  if (form.value.birthDate) {
    const birthDate = new Date(form.value.birthDate);
    const today = new Date();
    
    let age = today.getFullYear() - birthDate.getFullYear();
    const monthDiff = today.getMonth() - birthDate.getMonth();
    
    // 计算精确年龄
    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
      age--;
    }
    
    form.value.age = age;
  }
}

// 处理年龄输入，自动计算出生日期
function handleAgeInput() {
  // 提取数字部分
  const ageMatch = form.value.age.match(/\d+/);
  if (ageMatch) {
    const age = parseInt(ageMatch[0]);
    // 移除非数字字符，保留数字和可能的单位
    form.value.age = age ;
    
    // 计算出生日期
    const today = new Date();
    const birthYear = today.getFullYear() - age;
    const birthMonth = today.getMonth();
    const birthDay = today.getDate();
    
    const birthDate = new Date(birthYear, birthMonth, birthDay);
    
    // 格式化为YYYY-MM-DD
    const formattedBirthDate = birthDate.toISOString().split('T')[0];
    form.value.birthDate = formattedBirthDate;
  }
}
watch(
  () => form.value.idCard,
  (newIdCard) => {
    if (newIdCard && newIdCard.length === 18) {
      const birthYear = parseInt(newIdCard.substring(6, 10));
      const birthMonth = parseInt(newIdCard.substring(10, 12));
      const birthDay = parseInt(newIdCard.substring(12, 14));
       // 设置出生日期
      form.value.birthDate = `${birthYear}-${birthMonth.toString().padStart(2, '0')}-${birthDay.toString().padStart(2, '0')}`;
      const today = new Date();
      const currentYear = today.getFullYear();
      const currentMonth = today.getMonth() + 1;
      const currentDay = today.getDate();
      
      let age = currentYear - birthYear;
      
      // 如果当前月份小于出生月份，或者月份相同但当前日期小于出生日期，则年龄减1
      if (
        currentMonth < birthMonth ||
        (currentMonth === birthMonth && currentDay < birthDay)
      ) {
        age--;
      }
      
      form.value.age = age ;
    }
  }
);
/** 查询菜单列表 */
function getList() {
  patientlLists().then((response) => {
    console.log(response);
    occupationtypeList.value = response.data.occupationType;
    administrativegenderList.value = response.data.sex;
    bloodtypeaboList.value = response.data.bloodTypeABO;
    bloodtypearhList.value = response.data.bloodTypeRH;
    familyrelationshiptypeList.value = response.data.familyRelationshipType;
    maritalstatusList.value = response.data.maritalStatus;
  });
}

/** 打开用户信息弹窗 */
function getPatientInfo(idCard) {
  const param = {
    searchKey: idCard,
  };
  getOutpatientRegistrationList(param).then((res) => {
    console.log(param, 'param');
    if (res.data.records.length == 1) {
      patientInfo.value = res.data.records[0];
      console.log(patientInfo.value, 'patientInfo.value');
      // 将表单数据发送给父组件
      emits('submit', patientInfo.value);
    }
  });
}
//地址选择
const handleChange = () => {
  const checkedNodes = selectedOptions.value.map((code) => {
    const node = findNodeByCode(options.value, code);
    return node ? node.name : null;
  });
  form.value.addressProvince = checkedNodes[0] || '';
  form.value.addressCity = checkedNodes[1] || '';
  form.value.addressDistrict = checkedNodes[2] || '';
  form.value.addressStreet = checkedNodes[3] || '';
  form.value.address = '';
};

// 递归查找节点
const findNodeByCode = (data, code) => {
  for (const item of data) {
    if (item.code === code) return item;
    if (item.children) {
      const result = findNodeByCode(item.children, code);
      if (result) return result;
    }
  }
  return null;
};
// 显示弹框
function show() {
  // queryParams.roleId = props.roleId;
  getList();
  visible.value = true;
}

/** 表单重置 */
function reset() {
  form.value = {
    name: undefined,
    nameJson: undefined,
    menuName: undefined,
    age: undefined,
    genderEnum: undefined,
    typeCode: '08',
    idCard: undefined,
    phone: undefined,
    prfsEnum: undefined,
    address: undefined,
    tempFlag: undefined,
    countryCode: undefined,
    bloodRh: undefined,
    bloodAbo: undefined,
    nationalityCode: undefined,
    deceasedDate: undefined,
    linkName: undefined,
    linkRelationCode: undefined,
    linkTelcom: undefined,
    workCompany: undefined,
    addressCity: undefined,
    addressDistrict: undefined,
    addressStreet: undefined,
    addressProvince: undefined,
    maritalStatusEnum: undefined,
    busNo: undefined,
    organizationId: undefined,
    birthDate: undefined,
  };
  proxy.resetForm('patientRef');
}
/** 提交按钮 */
function submitForm() {
  if (form.value.idCard) {
    form.value.birthDate =
      form.value.idCard.toString().substring(6, 10) +
      '-' +
      form.value.idCard.toString().substring(10, 12) +
      '-' +
      form.value.idCard.toString().substring(12, 14);
    console.log(form.value.birthDate, 123);
  }
  // 进行表单验证
  proxy.$refs['patientRef'].validate((valid) => {
    if (valid) {
      // 提交表单前的处理
      if (!form.value.identifierNo) {
        form.value.typeCode = undefined;
      }
      form.value.address = getAddress(form);
      
      // 提交新增患者请求
      addPatient(form.value).then((response) => {
        proxy.$modal.msgSuccess('新增成功');
        getPatientInfo(response.data.idCard);
        visible.value = false;
        reset();
      });
    }
  });
}
// 获取完整地址字符串
function getAddress(form) {
  const addressParts = [
    form.value.addressProvince,
    form.value.addressCity,
    form.value.addressDistrict,
    form.value.addressStreet,
    form.value.address,
  ];

  // 使用 reduce 方法拼接地址
  return addressParts.reduce((acc, part) => {
    return part ? acc + part : acc;
  }, '');
}
/** 取消按钮 */
function cancel() {
  visible.value = false;
  reset();
}
defineExpose({
  show,
});
</script>
<style scoped>
.el-form--inline .el-form-item {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 10px !important;
}

/* 使用深度选择器 */  
.custom-label-spacing :deep(.el-form-item__label) {
  line-height: 1.2; /* 调整行间距 */
  margin-bottom: 4px; /* 调整 label 和输入框之间的间距 */
}

/* 防止表单标签换行 */
:deep(.el-form-item__label) {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  width: 120px;
}
</style>
