<template>
  <el-form ref="patientRef" :model="form" :rules="rules" label-width="100px">
    <el-row>
      <el-col :span="6">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" clearable :disabled="isViewMode" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="性别" prop="genderEnum">
          <el-radio-group v-model="form.genderEnum" :disabled="isViewMode">
            <el-radio
              v-for="item in administrativegenderList"
              :key="item.value"
              :label="item.value"
            >
              {{ item.info }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="6">
          <el-form-item label="活动标识" prop="tempFlag">
            <el-radio-group v-model="form.tempFlag" :disabled="isViewMode">
              <el-radio v-for="dict in patient_temp_flag" :key="dict.value" :label="dict.value">
                {{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->
      <el-col :span="6">
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="form.phone" clearable :disabled="isViewMode" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="年龄" prop="age">
            <el-input
              v-model="form.age"
              :disabled="isViewMode"
              @input="(value) => (form.age = value.replace(/[^0-9]/g, ''))"
            >
              <template #suffix>岁</template>
            </el-input>
          </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="卡类别" prop="typeCode">
          <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="6">
        <el-form-item label="证件号码" prop="idCard">
          <el-input v-model="form.idCard" clearable :disabled="isViewMode" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="就诊卡号" prop="identifierNo">
          <el-input v-model="form.identifierNo" clearable :disabled="isViewMode" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="民族" prop="nationalityCode">
          <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-row>
    <!-- <el-col :span="6">
						<el-form-item label="年龄" prop="age">
						   <el-input v-model="form.age" clearable :disabled="isViewMode">
						     <template #suffix>岁</template>
						   </el-input>
						</el-form-item>
				</el-col> -->
    <el-row>
      <el-col :span="6">
        <el-form-item label="国家编码" prop="countryCode">
          <el-input v-model="form.countryCode" clearable :disabled="isViewMode" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <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="6">
        <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="6">
        <el-form-item label="联系人" prop="linkName">
          <el-input v-model="form.linkName" clearable :disabled="isViewMode" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="联系人关系" prop="linkRelationCode">
          <el-select
            v-model="form.linkRelationCode"
            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="6">
        <el-form-item label="联系人电话" prop="linkRelationCode">
          <el-input v-model="form.linkTelcom" clearable :disabled="isViewMode" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <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="12">
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.address" clearable :disabled="isViewMode" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <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="6">
        <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-col :span="6">
        <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="6">
        <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-form>
</template>

<script setup>
import { watch } from 'vue';
import pcas from 'china-division/dist/pcas-code.json';
import { patientFormInit } from './api';

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 emits = defineEmits(['submit']); // 声明自定义事件

const data = reactive({
  isViewMode: false,
  form: {
    typeCode: '01',
  },
  rules: {
    name: [{ required: true, message: '姓名不能为空', trigger: 'change' }],
    genderEnum: [{ required: true, message: '请选择性别', trigger: 'change' }],
    age: [{ required: true, message: '年龄不能为空', trigger: 'change' }],
    phone: [{ required: true, message: '联系方式不能为空', trigger: 'change' }],
  },
});

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

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

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));

      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;
    }
  }
);
getList();
/** 查询菜单列表 */
function getList() {
  patientFormInit().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;
  });
}

//地址选择
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 reset() {
  form.value = {
    name: undefined,
    nameJson: undefined,
    menuName: undefined,
    age: undefined,
    genderEnum: undefined,
    typeCode: '01',
    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,
  };
  proxy.resetForm('patientRef');
}
defineExpose({ form });
</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 和输入框之间的间距 */
}
</style>
