<template>
  <div class="app-container">
    <!-- 患者添加对话框组件 -->
    <patient-add-dialog ref="patientAddRef" @submit="handlePatientAdded" />
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="病人名称" prop="searchKey">
        <el-input
          v-model="queryParams.searchKey"
          placeholder="请输入病人名称/缩写/病人ID"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="起始时间">
        <el-date-picker
          v-model="dateRange"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          >新增患者</el-button
        >
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="patientList" border style="width: 100%">
      <el-table-column prop="idCard" label="身份证号" width="180" />
      <el-table-column prop="busNo" label="病人ID" width="180" />
      <el-table-column prop="name" label="病人名称" width="180" />
      <el-table-column prop="genderEnum_enumText" label="性别" width="180" />
      <el-table-column
        prop="maritalStatusEnum_enumText"
        label="婚姻状况"
        width="180"
      /><!--:formatter="formatMaritalStatus"-->
      <el-table-column prop="nationalityCode" label="民族" width="180" />
      <el-table-column prop="birthDate" label="生日" width="160" />
      <el-table-column prop="phone" label="电话" width="140" />
      <el-table-column prop="bloodAbo_enumText" label="血型ABO" width="140" />
      <el-table-column prop="bloodRh_enumText" label="血型RH" width="140" />
      <el-table-column prop="linkName" label="联系人" width="180" />
      <el-table-column prop="linkTelcom" label="联系人电话" width="180" />
      <el-table-column prop="linkRelationCode_enumText" label="联系人关系" width="180" />
      <el-table-column prop="address" label="家庭地址" width="180" />
      <el-table-column prop="prfsEnum_enumText" label="职业" width="180" />
      <el-table-column prop="workCompany" label="工作单位" width="180" />
      <el-table-column prop="organizationName" label="登记医院" width="180" />
      <el-table-column prop="deceasedDate" label="死亡时间" width="180" />
      <el-table-column prop="createTime" label="登记时间" width="180" />
      <el-table-column
        label="操作"
        align="center"
        width="210"
        fixed="right"
        class-name="small-padding fixed-width"
      >  
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            link
            type="primary"
            icon="View"
            @click="handleSee(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" v-model="open" width="1000px" append-to-body>
      <el-form ref="patientRef" :model="form" :rules="rules" label-width="90px" size="medium">
        <el-row :gutter="10">
          <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="nationalityCode">
              <el-select v-model="form.nationalityCode" filterable clearable :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="6">
            <el-form-item label="性别" prop="genderEnum">
              <el-radio-group v-model="form.genderEnum" :disabled="isViewMode" size="small">
                <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" size="small">
                <el-radio v-for="item in tempFlagList" :key="item.value" :label="item.value">
                  {{ item.info }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="10">
          <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="8">
            <el-form-item label="证件号码" prop="idCard">
              <el-input v-model="form.idCard" clearable :disabled="isViewMode" />
            </el-form-item>
            <el-form-item label="生日" prop="birthDate" v-show="false">
              <el-input v-model="form.birthDate" v-show="false" />
            </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="4">
            <el-form-item label="国家编码" prop="countryCode">
              <el-input v-model="form.countryCode" clearable :disabled="isViewMode" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="10">
          <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="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-col :span="6">
            <el-form-item label="联系人" prop="linkName">
              <el-input v-model="form.linkName" clearable :disabled="isViewMode" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="10">
          <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-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-row>
        
        <el-row :gutter="10">
          <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"
                size="small"
              >
                <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="8">
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="form.address" clearable :disabled="isViewMode" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <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="4">
            <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"
                size="small"
              />
            </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="patientManagement">
import pcas from 'china-division/dist/pcas-code.json';
import { ref, computed, onMounted, toRefs, getCurrentInstance, reactive, watch } from 'vue';
import { addPatient, listPatient, updatePatient, lists } from './component/api';
import PatientAddDialog from '@/views/charge/outpatientregistration/components/patientAddDialog';

const showSearch = ref(true);
const open = ref(false);
const title = ref('');
const total = ref();
const patientList = ref([]);
// 患者添加对话框组件的引用
const patientAddRef = ref(null);
const maritalstatusList = ref([]); //婚姻
const occupationtypeList = ref([]); //职业
const administrativegenderList = ref([]); //性别
const bloodtypeaboList = ref([]); //血型abo
const bloodtypearhList = ref([]); //血型RH
const familyrelationshiptypeList = ref([]); //家庭关系
const addressCom = ref(''); //地址
const tempFlagList = ref([]);
const idTypeList = ref([]);
const dateRange = ref([]);
const options = ref(pcas); // 地区数据
const selectedOptions = ref([]); // v-model 绑定的选中值

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 data = reactive({
  isViewMode: false,
  form: {},
  queryParams: {
    pageNo: 1,
    pageSize: 10,
    searchKey: undefined,
    name: undefined
  },
  rules: {
    name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
    age: [{ required: true, message: '年龄不能为空', trigger: 'change' }],
    phone: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }],
  },
});
const { queryParams, form, rules, isViewMode } = toRefs(data);

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

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 getList() {
  listPatient(queryParams.value).then((response) => {
    // 适配门诊挂号接口返回的数据格式
    // 不同的接口可能返回不同格式，这里做一个通用适配
    if (response.data && Array.isArray(response.data)) {
      // 如果返回的直接是数组
      patientList.value = response.data;
      total.value = response.data.length;
    } else if (response.data && response.data.records) {
      // 如果返回的是分页格式
      patientList.value = response.data.records;
      total.value = response.data.total;
    } else if (response.data && response.data.rows) {
      // 另一种可能的分页格式
      patientList.value = response.data.rows;
      total.value = response.data.total;
    } else {
      // 默认处理
      patientList.value = [];
      total.value = 0;
    }
  });
  lists().then((response) => {
    console.log(response);
    // 确保即使响应格式变化也能正常工作
    if (response.data) {
      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 || [];
      tempFlagList.value = response.data.whetherStatus || [];
      idTypeList.value = response.data.identityDocumentType || [];
    }
  });
}

/** 表单重置 */
function reset() {
  form.value = {
    name: undefined,
    nameJson: undefined,
    menuName: undefined,
    age: undefined,
    genderEnum: 0,
    typeCode: undefined,
    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');
}
/** 处理患者添加后的回调 */
function handlePatientAdded(patientData) {
  // 患者添加成功后刷新列表
  getList();
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNo = 1;
  queryParams.value.createTimeSTime =
    dateRange.value && dateRange.value.length == 2 ? dateRange.value[0] : '';
  queryParams.value.createTimeETime =
    dateRange.value && dateRange.value.length == 2 ? dateRange.value[1] : '';
  // 执行查询
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm('queryRef');
  handleQuery();
}
/** 新增按钮操作 */
function handleAdd() {
  patientAddRef.value.show(); // 使用与门诊挂号一致的方式显示新增患者组件
}
//查看按钮
function handleSee(row) {
  isViewMode.value = true;
  form.value = row;
  open.value = true;
  title.value = '查看患者';
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  form.value = JSON.parse(JSON.stringify(row));
  addressCom.value =
    row.addressProvince + row.addressCity + row.addressDistrict + row.addressStreet + row.address;
  const selectedOptions1 = ref([
    row.addressProvince,
    row.addressCity,
    row.addressDistrict,
    row.addressStreet,
  ]);
  const codes = convertAddressToCodes(selectedOptions1.value);
  selectedOptions.value = codes.filter((code) => code !== null);
  isViewMode.value = false;
  open.value = true;
  title.value = '修改菜单';
}
const convertAddressToCodes = (selectedOptions1) => {
  const [provinceName, cityName, areaName, streetName] = selectedOptions1;
  const findCode = (data, name) => {
    for (const item of data) {
      if (item.name === name) {
        return item.code;
      }
      if (item.children) {
        const result = findCode(item.children, name);
        if (result) return result;
      }
    }
    return null;
  };
  const provinceCode = findCode(options.value, provinceName);
  const cityCode = findCode(options.value, cityName);
  const areaCode = findCode(options.value, areaName);
  const streetCode = findCode(options.value, streetName);
  return [provinceCode, cityCode, areaCode, streetCode];
};
/** 取消按钮 */
function cancel() {
  open.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 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.busNo != undefined) {
        const newAddress =
          form.value.addressProvince +
          form.value.addressCity +
          form.value.addressDistrict +
          form.value.addressStreet +
          form.value.address;
        if (addressCom.value !== newAddress) {
          form.value.address = getAddress(form);
        }
        console.log('/***/*/*/*/*/*/*/*/*/', form.value);
        // return;
        updatePatient(form.value).then((response) => {
          proxy.$modal.msgSuccess('修改成功');
          open.value = false;
          getList();
        });
      } else {
        form.value.address = getAddress(form);
        addPatient(form.value).then((response) => {
          proxy.$modal.msgSuccess('新增成功');
          open.value = false;
          getList();
        });
      }
    }
  });
}

onMounted(() => {
  getList();
});
</script>

<style>
</style>