kyj-yanglao-web-new/src/views/elderly/elder/health-record/Form.vue

<template>
  <Dialog
    v-model="dialogVisible"
    title="健康档案"
    width="80%"
    class="health-record-form"
    scroll
    noPaddingEL="health-record-form"
  >
    <el-form ref="formRef" :model="dataForm" label-width="120px" :disabled="isDetail">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-form-item label="长者姓名" prop="elderId">
            <selectElder v-model="dataForm.elderId" :disabled="!!dataForm.id" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-form-item label="房号/床号">
            <el-input v-model="dataForm.bedName" disabled />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-form-item label="性别" prop="elderSex">
            <el-select v-model="dataForm.elderSex" clearable :style="{ width: '100%' }" disabled>
              <el-option
                v-for="(item, index) in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-form-item label="医疗支付方式" prop="medicalPaymentMethods">
            <el-select
              v-model="dataForm.medicalPaymentMethods"
              placeholder="请选择医疗保险"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in getStrDictOptions(DICT_TYPE.MEDICAL_INSURANCE_ARR)"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-form-item label="电话" prop="phone">
            <el-input v-model="dataForm.phone" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-form-item label="居住情况" prop="liveType">
            <el-select
              v-model="dataForm.liveType"
              placeholder="请选择居住情况"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in getStrDictOptions(DICT_TYPE.LIVE_ARR)"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="info-title">基本情况</div>
      <div class="info-wrap">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="血型" prop="bloodType">
              <el-select
                v-model="dataForm.bloodType"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in getStrDictOptions(DICT_TYPE.BLOOD_TYPE)"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24">
          <el-divider />
        </el-col>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
            <el-form-item label="药物过敏史" prop="drugAllergyHistory">
              <!--              <el-select-->
              <!--                v-model="dataForm.drugAllergyHistoryFlag"-->
              <!--                placeholder="请选择"-->
              <!--                clearable-->
              <!--                @change="resetInput('drugAllergyHistory')"-->
              <!--              >-->
              <!--                <el-option-->
              <!--                  v-for="(item, index) in getStrDictOptions(DICT_TYPE.COMMON_STATUS4)"-->
              <!--                  :key="index"-->
              <!--                  :label="item.label"-->
              <!--                  :value="item.value"-->
              <!--                />-->
              <!--              </el-select>-->
              <el-input
                type="text"
                v-model="dataForm.drugAllergyHistory"
                :disabled="isDetail"
                placeholder="请输入药物过敏史"
              />
            </el-form-item>
          </el-col>
          <!--          <el-col :span="16" v-if="dataForm.drugAllergyHistoryFlag == '1'">-->
          <!--            <el-form-item label="过敏物质">-->
          <!--              <el-checkbox-group-->
          <!--                v-model="dataForm.drugAllergyHistory"-->
          <!--                @change="(arg) => handleChange(arg, 'drugAllergyHistory')"-->
          <!--              >-->
          <!--                <el-checkbox-->
          <!--                  v-for="(item, index) in getStrDictOptions(DICT_TYPE.DRUG_ALLERGY_ARR)"-->
          <!--                  :label="item.value"-->
          <!--                  :key="index"-->
          <!--                  >{{ item.label }}</el-checkbox-->
          <!--                >-->
          <!--              </el-checkbox-group>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
            <el-form-item label="食物过敏史" prop="historyFoodAllergies">
              <!--              <el-select-->
              <!--                v-model="dataForm.historyFoodAllergiesFlag"-->
              <!--                placeholder="请选择"-->
              <!--                clearable-->
              <!--                @change="resetInput('historyFoodAllergies')"-->
              <!--              >-->
              <!--                <el-option-->
              <!--                  v-for="(item, index) in getStrDictOptions(DICT_TYPE.COMMON_STATUS4)"-->
              <!--                  :key="index"-->
              <!--                  :label="item.label"-->
              <!--                  :value="item.value"-->
              <!--                />-->
              <!--              </el-select>-->

              <el-input
                type="text"
                v-model="dataForm.historyFoodAllergies"
                :disabled="isDetail"
                placeholder="请输入食物过敏史"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
            <el-form-item label="照护要点" prop="careNote">
              <el-input
                type="text"
                v-model="dataForm.careNote"
                :disabled="isDetail"
                placeholder="请输入照护要点"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
            <el-form-item label="饮食要点" prop="dietaryGuidelines">
              <el-select v-model="dataForm.dietaryGuidelines" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in [
                    { label: '普食', value: '普食' },
                    { label: '软食', value: '软食' },
                    { label: '半流质', value: '半流质' },
                    { label: '流质', value: '流质' },
                    { label: '鼻饲', value: '鼻饲' }
                  ]"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24">
          <el-divider />
        </el-col>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="职业暴露情况" prop="exposureSituationFlag">
              <el-select
                v-model="dataForm.exposureSituationFlag"
                placeholder="请选择"
                clearable
                @change="resetForm('exposureSituation')"
              >
                <el-option
                  v-for="(item, index) in getStrDictOptions(DICT_TYPE.COMMON_STATUS4)"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="dataForm.exposureSituationFlag == '1'">
            <el-col :span="10">
              <el-form-item label="毒物种类">
                <el-checkbox-group v-model="dataForm.typesToxins">
                  <el-checkbox
                    v-for="(item, index) in getStrDictOptions(DICT_TYPE.POISONS_ARR)"
                    :label="item.value"
                    :key="index"
                    >{{ item.label }}</el-checkbox
                  >
                </el-checkbox-group>
                <input
                  type="text"
                  class="sInput"
                  style="width: 45px"
                  v-model="typesToxinsInput"
                  :disabled="isDetail"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="防护措施">
                <el-radio-group v-model="dataForm.protectiveMeasuresFlag">
                  <el-radio
                    v-for="(item, index) in getStrDictOptions(DICT_TYPE.COMMON_STATUS4)"
                    :key="index"
                    :label="item.value"
                    >{{ item.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="24">
            <el-form-item label="情况描述" prop="exposureSituationDescribe">
              <el-input v-model="dataForm.exposureSituationDescribe" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24">
          <el-divider />
        </el-col>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="残疾情况" prop="disabilitySituationFlag">
              <el-select
                v-model="dataForm.disabilitySituationFlag"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                @change="resetInput('disabilitySituation')"
              >
                <el-option
                  v-for="(item, index) in getStrDictOptions(DICT_TYPE.COMMON_STATUS4)"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16" v-if="dataForm.disabilitySituationFlag == '1'">
            <el-checkbox-group v-model="dataForm.disabilitySituation">
              <el-checkbox
                v-for="(item, index) in getStrDictOptions(DICT_TYPE.DISABILITY_ARR)"
                :label="item.value"
                :key="index"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
            <input
              type="text"
              class="sInput"
              v-model="disabilitySituationInput"
              :disabled="isDetail"
            />
          </el-col>
        </el-row>
      </div>

      <div class="info-title">生活方式</div>
      <div class="info-wrap">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="锻炼频率" prop="exerciseFrequency">
              <el-select v-model="dataForm.exerciseFrequency" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in getStrDictOptions(DICT_TYPE.EXERCISE_FREQUENCY_ARR)"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="饮食习惯" prop="dietetic">
              <el-select v-model="dataForm.dietetic" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in getStrDictOptions(DICT_TYPE.EATING_HABITS_ARR)"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="吸烟情况" prop="smokingStatus">
              <el-select v-model="dataForm.smokingStatus" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in getStrDictOptions(DICT_TYPE.SMOKE_ARR)"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="饮酒情况" prop="drinkLiquor">
              <el-select v-model="dataForm.drinkLiquor" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in getStrDictOptions(DICT_TYPE.DRINK_ARR)"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="info-title">既往史</div>
      <div class="info-wrap">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="既往病史" prop="preexistingDisease">
              <!--              <el-select-->
              <!--                v-model="dataForm.diseaseFree"-->
              <!--                placeholder="请选择"-->
              <!--                clearable-->
              <!--                @change="resetInput('preexistingDisease')"-->
              <!--              >-->
              <!--                <el-option-->
              <!--                  v-for="(item, index) in getStrDictOptions(DICT_TYPE.COMMON_STATUS4)"-->
              <!--                  :key="index"-->
              <!--                  :label="item.label"-->
              <!--                  :value="item.value"-->
              <!--                />-->
              <!--              </el-select>-->
              <el-input
                type="text"
                placeholder="请输入既往病史"
                v-model="dataForm.preexistingDisease"
                :disabled="isDetail"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="用药史" prop="medicationHistory">
              <el-input
                type="text"
                placeholder="请输入用药史"
                v-model="dataForm.medicationHistory"
                :disabled="isDetail"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="责任护士" prop="nurse">
              <el-input v-model="dataForm.nurse" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="主管医生" prop="doctor">
              <el-input v-model="dataForm.doctor" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="责任护理员" prop="nurseAssistant">
              <el-input v-model="dataForm.nurseAssistant" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

        <div class="risk-table-wrapper">
          <div style="margin-bottom: 12px; font-weight: bold">长者九防情况</div>
          <table class="risk-table">
            <thead>
              <tr>
                <th class="col-index">序号</th>
                <th class="col-project">项目</th>
                <th class="col-level">风险程度</th>
                <th class="col-remark">备注</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in riskTableItems" :key="index">
                <td class="col-index">{{ index + 1 }}</td>
                <td class="col-project">{{ item.name }}：</td>
                <td class="col-level">
                  <el-select
                    v-model="dataForm[item.field]"
                    placeholder="请选择"
                    style="width: 180px"
                    :disabled="isDetail"
                  >
                    <el-option
                      v-for="option in getRiskOptions(item.key)"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value"
                    />
                  </el-select>
                </td>
                <td class="col-remark">
                  <span class="remark-text">风险程度：</span>
                  <el-checkbox
                    :model-value="dataForm[item.field] === 'low' || dataForm[item.field] === 'none'"
                    :disabled="isDetail"
                    size="small"
                    @change="(val: any) => handleRiskCheckboxChange(item, 'low', val)"
                    >低危</el-checkbox
                  >
                  <el-checkbox
                    :model-value="dataForm[item.field] === 'medium'"
                    :disabled="isDetail"
                    size="small"
                    @change="(val: any) => handleRiskCheckboxChange(item, 'medium', val)"
                    >中危</el-checkbox
                  >
                  <el-checkbox
                    :model-value="dataForm[item.field] === 'high'"
                    :disabled="isDetail"
                    size="small"
                    @change="(val: any) => handleRiskCheckboxChange(item, 'high', val)"
                    >高危</el-checkbox
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="info-title">现存疾病</div>
      <div class="info-wrap">
        <el-row :gutter="70">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb5">
            <el-checkbox v-model="dataForm.hypertensionFlag" true-value="1" false-value="0"
              >高血压</el-checkbox
            >
            <el-input placeholder="请输入描述" class="pt10l20" v-model="dataForm.hypertension" />
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb5">
            <el-checkbox v-model="dataForm.diabetesFlag" true-value="1" false-value="0"
              >糖尿病</el-checkbox
            >
            <el-input placeholder="请输入描述" class="pt10l20" v-model="dataForm.diabetes" />
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb5">
            <el-checkbox v-model="dataForm.coronaryDiseaseFlag" true-value="1" false-value="0"
              >冠心病</el-checkbox
            >
            <el-input placeholder="请输入描述" class="pt10l20" v-model="dataForm.coronaryDisease" />
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb5">
            <el-checkbox v-model="dataForm.apoplexyFlag" true-value="1" false-value="0"
              >脑卒中</el-checkbox
            >
            <el-input placeholder="请输入描述" class="pt10l20" v-model="dataForm.apoplexy" />
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb5">
            <el-checkbox v-model="dataForm.tuberculosisFlag" true-value="1" false-value="0"
              >结核病</el-checkbox
            >
            <el-input placeholder="请输入描述" class="pt10l20" v-model="dataForm.tuberculosis" />
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb5">
            <el-checkbox v-model="dataForm.copdFlag" true-value="1" false-value="0"
              >慢性阻塞性肺疾病</el-checkbox
            >
            <el-input placeholder="请输入描述" class="pt10l20" v-model="dataForm.copd" />
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb5">
            <el-checkbox v-model="dataForm.malignantTumorsFlag" true-value="1" false-value="0"
              >恶性肿瘤</el-checkbox
            >
            <el-input placeholder="请输入描述" class="pt10l20" v-model="dataForm.malignantTumors" />
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb5">
            <el-checkbox v-model="dataForm.mentalIllnessFlag" true-value="1" false-value="0"
              >重性精神病</el-checkbox
            >
            <el-input placeholder="请输入描述" class="pt10l20" v-model="dataForm.mentalIllness" />
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb5">
            <el-checkbox v-model="dataForm.hepatitisFlag" true-value="1" false-value="0"
              >肝炎</el-checkbox
            >
            <el-input placeholder="请输入描述" class="pt10l20" v-model="dataForm.hepatitis" />
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb5">
            <el-checkbox
              v-model="dataForm.otherInfectiousDiseasesFlag"
              true-value="1"
              false-value="0"
              >其他法定传染病</el-checkbox
            >
            <el-input
              placeholder="请输入描述"
              class="pt10l20"
              v-model="dataForm.otherInfectiousDiseases"
            />
          </el-col>
          <el-col :span="24" class="pb5">
            <el-checkbox v-model="dataForm.otherDiseasesFlag" true-value="1" false-value="0"
              >其他</el-checkbox
            >
            <el-input placeholder="请输入描述" class="pt10l20" v-model="dataForm.otherDiseases" />
          </el-col>
        </el-row>
      </div>

      <div class="info-title">住院史</div>
      <div class="info-wrap">
        <el-button type="primary" @click="handleAddHospitalizationHistory"
          ><Icon icon="ep:zoom-in" class="mr-5px" />添加住院记录</el-button
        >
        <el-row
          :gutter="20"
          v-for="(item, index) in dataForm.hospitalizationHistory"
          :key="item.key"
          class="content"
        >
          <Icon
            :size="26"
            color="#f09d31"
            icon="ep:remove"
            @click="handleRemoveHistoryItem(index)"
            class="remove"
            :style="isDetail ? 'cursor: no-drop' : ''"
          />
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item
              label="住院原因"
              :prop="`hospitalizationHistory[${index}].causeHospitalization`"
              :rules="{
                required: true,
                message: '住院原因不能为空',
                trigger: 'blur'
              }"
            >
              <el-input v-model="item.causeHospitalization" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="住院日期" prop="dateHospitalization">
              <el-date-picker
                type="date"
                :style="{ width: '100%' }"
                v-model="item.dateHospitalization"
                value-format="YYYY-MM-DD"
                placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="住院时长" prop="hospitalStay">
              <el-input v-model="item.hospitalStay" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="机构名称" prop="orgName">
              <el-input v-model="item.orgName" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="档案号码" prop="fileNumber">
              <el-input v-model="item.fileNumber" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="item.remark" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="info-title">家族史</div>
      <div class="info-wrap">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="有无家族史" prop="familyHistoryFlag">
              <el-select
                v-model="dataForm.familyHistoryFlag"
                placeholder="请选择"
                clearable
                @change="resetInput('familyDiseases')"
              >
                <el-option
                  v-for="(item, index) in getStrDictOptions(DICT_TYPE.COMMON_STATUS4)"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="dataForm.familyHistoryFlag == '1'">
            <el-form-item label="家族疾病" prop="familyDiseases">
              <el-checkbox-group v-model="dataForm.familyDiseases">
                <el-checkbox
                  v-for="(item, index) in getStrDictOptions(DICT_TYPE.SICK_ARR)"
                  :label="item.value"
                  :key="index"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
              <input
                type="text"
                class="sInput"
                v-model="familyDiseasesInput"
                :disabled="isDetail"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="遗传病史" prop="geneticHistoryFlag">
              <el-select v-model="dataForm.geneticHistoryFlag" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in getStrDictOptions(DICT_TYPE.COMMON_STATUS4)"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="dataForm.geneticHistoryFlag == '1'">
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
              <el-form-item label="遗传病名称" prop="geneticDiseaseName">
                <el-input v-model="dataForm.geneticDiseaseName" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="familyHistoryRemarks">
                <el-input v-model="dataForm.familyHistoryRemarks" />
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </div>

      <div class="info-title">其他附件</div>
      <div class="info-wrap">
        <el-button @click="handleAddAnnex"
          ><Icon icon="ep:zoom-in" class="mr-5px" />添加更多附件</el-button
        >
        <div v-for="(item, index) in dataForm.attachmentArray" :key="item.key">
          <el-row class="row-item content" :gutter="20">
            <Icon
              :size="26"
              color="#f09d31"
              icon="ep:remove"
              @click="handleRemoveItem(index)"
              :style="isDetail ? 'cursor: no-drop' : ''"
            />
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item
                label="附件名称"
                :prop="`attachmentArray[${index}].fileName`"
                :rules="{
                  required: true,
                  message: '附件名称不能为空',
                  trigger: 'blur'
                }"
              >
                <el-input v-model="item.fileName" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item
                label="上传附件"
                :prop="`attachmentArray[${index}].fileUrl`"
                :rules="{
                  required: true,
                  message: '上传附件不能为空',
                  trigger: 'blur'
                }"
              >
                <SelectUpload
                  v-model="item.fileUrl"
                  :limit="1"
                  fun-name="上传附件"
                  :elder="{ elderId: dataForm.elderId, elderName: dataForm.elderName }"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="handleClosed">取消</el-button>
      <el-button v-loading="formLoading" type="primary" @click="submitForm" v-if="!isDetail"
        >确定</el-button
      >
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import {
  getElderHealthRecordById,
  editElderlyHealthRecord,
  addElderlyHealthRecord
} from '@/api/elderly/elder/health-record'
import { healthRecordFormType } from '../types'
import { getElderInfoById } from '@/api/elderly/elder/elderly-Info'
import {
  asphyxiationPage,
  pressureSoresPage,
  fallDownPage,
  fallPreventionPage,
  burnPreventionPage,
  wanderAwayPage,
  ngasrPage,
  entertainmentPage,
  mmseGetPage
} from '@/api/social-work'
defineOptions({ name: 'HealthRecordForm' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const dialogVisible = ref(false) // 弹窗
const formRef = ref() // 表单 Ref
const isDetail = ref(false) // 是否详情打开
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const dataForm = ref<healthRecordFormType>({
  // 表单字段
  tenantId: undefined,
  id: '',
  phone: '',
  elderId: '',
  elderName: '',
  elderSex: '',
  roomName: '',
  bedName: '',
  liveType: '',
  bloodType: '',
  exerciseFrequency: '',
  dietetic: '',
  smokingStatus: '',
  drinkLiquor: '',
  medicalPaymentMethods: '',
  drugAllergyHistoryFlag: '',
  drugAllergyHistory: '',
  historyFoodAllergiesFlag: '',
  historyFoodAllergies: '',
  exposureSituationFlag: '',
  typesToxins: [],
  protectiveMeasuresFlag: '',
  exposureSituationDescribe: '',
  disabilitySituationFlag: '',
  disabilitySituation: '',
  hypertensionFlag: '',
  hypertension: '',
  diabetesFlag: '',
  diabetes: '',
  coronaryDiseaseFlag: '',
  coronaryDisease: '',
  apoplexyFlag: '',
  apoplexy: '',
  tuberculosisFlag: '',
  tuberculosis: '',
  copdFlag: '',
  copd: '',
  malignantTumorsFlag: '',
  malignantTumors: '',
  mentalIllnessFlag: '',
  mentalIllness: '',
  hepatitisFlag: '',
  hepatitis: '',
  otherInfectiousDiseasesFlag: '',
  otherInfectiousDiseases: '',
  otherDiseasesFlag: '',
  otherDiseases: '',
  hospitalizationHistory: [],
  familyHistoryFlag: '',
  familyDiseases: [],
  diseaseFree: '',
  preexistingDisease: '', //既往病史
  geneticHistoryFlag: '',
  geneticDiseaseName: '',
  familyHistoryRemarks: '',
  attachmentArray: [],
  medicationHistory: '', // 用药史
  careNote: '', // 照护要点
  dietaryGuidelines: '', // 饮食要点
  nurse: '', // 责任护士
  doctor: '', // 主管医生
  nurseAssistant: '', // 责任护理员
  // 九防评估结果
  asphyxiationByChoking: '',
  pressureSores: '',
  fallPreventionMeasures: '',
  assessSimpleMentalState: '',
  empyrosis: '',
  fallDown: '',
  wanderAway: '',
  antiEntertainment: '',
  commitSuicide: ''
})
const resetField = ref<healthRecordFormType>(
  JSON.parse(JSON.stringify(Object.assign({}, dataForm)))
)
let state = reactive({
  drugAllergyHistoryInput: '', // 药物过敏-其他
  historyFoodAllergiesInput: '', // 食物过敏-其他
  typesToxinsInput: '', // 毒物种类-其他
  disabilitySituationInput: '', // 残疾情况-其他
  preexistingDiseaseInput: '', // 疾病-其他
  familyDiseasesInput: '' // 家族疾病-其他
})

// 风险项目表格数据（field 对应后端字段）
const riskTableItems = ref([
  { key: 'asphyxiation', name: '防噎食', field: 'asphyxiationByChoking', api: asphyxiationPage },
  { key: 'pressureUlcer', name: '防压疮', field: 'pressureSores', api: pressureSoresPage },
  { key: 'bedFall', name: '防坠床', field: 'fallPreventionMeasures', api: fallPreventionPage },
  {
    key: 'foodDrug',
    name: '防误食(简易精神状态)',
    field: 'assessSimpleMentalState',
    api: mmseGetPage
  },
  { key: 'scald', name: '防烫伤', field: 'empyrosis', api: burnPreventionPage },
  { key: 'fall', name: '防跌倒', field: 'fallDown', api: fallDownPage },
  { key: 'wandering', name: '防走失', field: 'wanderAway', api: wanderAwayPage },
  {
    key: 'entertainment',
    name: '防文娱活动意外',
    field: 'antiEntertainment',
    api: entertainmentPage
  },
  { key: 'selfHarm', name: '防他伤和自伤', field: 'commitSuicide', api: ngasrPage }
])

// 接口返回的风险数据选项
const riskOptionsMap = ref<Record<string, any[]>>({
  asphyxiation: [],
  pressureUlcer: [],
  fall: [],
  bedFall: [],
  scald: [],
  wandering: [],
  selfHarm: [],
  foodDrug: [],
  entertainment: []
})

// 风险等级文本映射
const riskLevelTextMap: Record<string, string> = {
  none: '低风险',
  low: '低风险',
  medium: '中风险',
  high: '高风险'
}

// 获取风险选项（从接口数据）
const getRiskOptions = (key: string) => {
  return riskOptionsMap.value[key] || []
}

// 处理风险程度复选框变化
const handleRiskCheckboxChange = (item: any, level: string, checked: boolean) => {
  if (checked) {
    dataForm.value[item.field] = level
  } else if (dataForm.value[item.field] === level) {
    dataForm.value[item.field] = ''
  }
}

// 加载长者风险数据（动态调用各九防接口）
const loadElderRiskData = async (elderId: string) => {
  try {
    for (const item of riskTableItems.value) {
      if (item.api && typeof item.api === 'function') {
        try {
          const params = {
            pageNo: 1,
            pageSize: 100,
            elderId: elderId
          }
          const res = await item.api(params)
          if (res && res.list && res.list.length > 0) {
            const levelSet = new Set<string>()
            res.list.forEach((record: any) => {
              let riskLevel = record.riskLevel || 'low'
              if (record.assessData) {
                try {
                  const assessData = JSON.parse(record.assessData)
                  if (assessData.riskLevel) {
                    riskLevel = assessData.riskLevel
                  }
                } catch (e) {
                  console.error('解析 assessData 失败', e)
                }
              }
              levelSet.add(riskLevel)
            })
            const options = Array.from(levelSet).map((level) => ({
              label: riskLevelTextMap[level] || level,
              value: level
            }))
            riskOptionsMap.value[item.key] = options
          } else {
            riskOptionsMap.value[item.key] = []
          }
        } catch (err) {
          console.error(`获取${item.name}数据失败`, err)
        }
      }
    }
  } catch (e) {
    console.error('获取风险数据失败', e)
  }
}

// 重置风险表格数据
const resetRiskTableItems = () => {
  riskOptionsMap.value = {
    asphyxiation: [],
    pressureUlcer: [],
    fall: [],
    bedFall: [],
    scald: [],
    wandering: [],
    selfHarm: [],
    foodDrug: [],
    entertainment: []
  }
}
const {
  drugAllergyHistoryInput,
  historyFoodAllergiesInput,
  typesToxinsInput,
  disabilitySituationInput,
  familyDiseasesInput
} = toRefs(state)

/** 打开弹窗 */
const open = async (row, elderId, detail) => {
  dialogVisible.value = true
  isDetail.value = detail
  if (row.id) {
    try {
      const res = await getElderHealthRecordById(elderId)
      let tempList = str2arr(res.attachmentArray)
      tempList.map((item) => {
        item.fileUrl = item.fileUrl ? [{ fileUrl: item.fileUrl, fileName: item.fileName }] : []
      })
      dataForm.value = {
        elderId: Number(res.elderId),
        elderName: res.elder.elderName,
        elderSex: res.elder.elderSex,
        bedName: res.elder.bedName,
        ...res,
        drugAllergyHistory: str2arr(res.drugAllergyHistory, 'drugAllergyHistoryInput'),
        historyFoodAllergies: str2arr(res.historyFoodAllergies, 'historyFoodAllergiesInput'),
        typesToxins: str2arr(res.typesToxins, 'typesToxinsInput'),
        disabilitySituation: str2arr(res.disabilitySituation, 'disabilitySituationInput'),
        hospitalizationHistory: str2arr(res.hospitalizationHistory), // 住院记录
        familyDiseases: str2arr(res.familyDiseases, 'familyDiseasesInput'),
        // preexistingDisease: str2arr(res.preexistingDisease, 'preexistingDiseaseInput'),
        attachmentArray: tempList // 附件上传
      }
      // 加载长者风险评估数据作为选项（dataForm 中字段已自动回显）
      await loadElderRiskData(res.elderId)
    } catch (err) {}
  } else {
    // 获取老人信息
    const res = await getElderInfoById(row.elder.id)
    dataForm.value.elderId = res.id
    dataForm.value.elderSex = res.elderSex
    dataForm.value.bedName = res.bedName
    dataForm.value.medicalPaymentMethods = res.medicalInsurance
    dataForm.value.liveType = res.liveSituation
    dataForm.value.phone = res.telPhone
    dataForm.value.tenantId = res.tenantId
    // 加载长者风险评估数据
    await loadElderRiskData(res.id)
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

// 关闭
const handleClosed = () => {
  formRef.value?.resetFields()
  dataForm.value = {
    ...resetField.value,
    hospitalizationHistory: []
  }
  for (let key in state) {
    state[key] = ''
  }
  resetRiskTableItems()
  dialogVisible.value = false
}

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  if (!formRef.value) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    let params = {
      ...dataForm.value,
      drugAllergyHistory: dataForm.value.drugAllergyHistory,
      historyFoodAllergies: dataForm.value.historyFoodAllergies,
      typesToxins: arr2str(dataForm.value.typesToxins, typesToxinsInput),
      disabilitySituation: arr2str(dataForm.value.disabilitySituation, disabilitySituationInput),
      hospitalizationHistory: arr2str(dataForm.value.hospitalizationHistory),
      familyDiseases: arr2str(dataForm.value.familyDiseases, familyDiseasesInput),
      preexistingDisease: dataForm.value.preexistingDisease,
      attachmentArray: arr2str(dataForm.value.attachmentArray),
      careNote: dataForm.value.careNote,
      medicationHistory: dataForm.value.medicationHistory,
      dietaryGuidelines: dataForm.value.dietaryGuidelines
    }
    const res = params.id
      ? await editElderlyHealthRecord(params)
      : await addElderlyHealthRecord(params)
    if (res) {
      message.success(t('common.updateSuccess'))
      dialogVisible.value = false
      // 发送操作成功的事件
      emit('success')
    }
  } finally {
    formLoading.value = false
  }
}
// 重置输入框的值
const resetInput = (type: string) => {
  dataForm.value[type] = []
  state[`${type}Input`] = ''
}

// 添加住院记录
const handleAddHospitalizationHistory = () => {
  dataForm.value.hospitalizationHistory.push({
    causeHospitalization: '',
    dateHospitalization: '',
    hospitalStay: '',
    orgName: '',
    fileNumber: '',
    remark: '',
    key: Date.now()
  })
}

// 删除住院记录
const handleRemoveHistoryItem = (index: number) => {
  if (isDetail.value) return
  dataForm.value.hospitalizationHistory.splice(index, 1)
}

// 添加附件
const handleAddAnnex = () => {
  dataForm.value.attachmentArray.push({
    fileName: '',
    fileUrl: [],
    key: Date.now()
  })
}
const handleRemoveItem = (index: number) => {
  if (isDetail.value) return
  dataForm.value.attachmentArray.splice(index, 1)
}

// 数组转字符串
const arr2str = (arr, name?) => {
  if (Array.isArray(arr) && arr.length > 0) {
    // 如果arr是数组且有值，则返回原数组
    if (arr.includes('0') && name) {
      let temp = JSON.parse(JSON.stringify(arr))
      const index = arr.findIndex((item) => item == '0')
      temp[index] = '0-' + name.value
      return JSON.stringify(temp)
    }
    return JSON.stringify(arr)
  } else {
    // 否则返回空字符串
    return ''
  }
}

// 字符串转数组
const str2arr = (str, name?) => {
  let arr: string[] = []
  if (str) {
    if (Array.isArray(str)) {
      arr = str.map((item) => String(item))
    } else if (typeof str === 'string') {
      try {
        const parsed = JSON.parse(str)
        if (Array.isArray(parsed)) {
          arr = parsed.map((item) => String(item))
        } else {
          arr = str.split(/[,，]/).map((s) => s.trim()).filter(Boolean)
        }
      } catch (e) {
        arr = str.split(/[,，]/).map((s) => s.trim()).filter(Boolean)
      }
    }
    if (arr.some((item) => item.includes('0-'))) {
      let index = -1
      arr.map((item: string, i) => {
        if (item.indexOf('0-') > -1) index = i
      })
      if (index > -1) {
        let temp = arr.splice(index, 1)
        arr.push('0')
        state[name] = temp.join().split('-')[1]
      }
    }
  }
  return arr
}

const resetForm = (type) => {}

// watch(()=>dataForm.value.attachmentArray, (newValue) => {
//   debugger
//   console.log("value", newValue)
// }, {deep: true})

const handleChange = (val, type: any) => {
  if (!val.includes('0')) {
    let v = type + 'Input'
    state[v] = ''
  }
}
</script>
<style lang="scss" scoped>
.health-record-form {
  .el-form {
    padding: 15px !important;
  }
  .info-title {
    margin-left: -15px;
    min-width: 75px;
    max-width: 150px;
    padding: 15px;
    font-weight: bolder;
    background-color: #f3f6fb;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
  }
  .info-wrap {
    padding: 15px 0;
    box-sizing: border-box;
    .content {
      padding-top: 10px;
      margin-left: 0 !important;
      margin-right: 0 !important;
      .row-item {
        position: relative;
      }
      .el-icon {
        position: absolute;
        font-size: 23px;
        cursor: pointer;
        color: #f09d31;
      }
    }
    .el-divider {
      margin-top: 6px !important;
      background-color: #f5f5f5;
    }

    .el-checkbox + .el-checkbox {
      margin-left: 0;
    }
  }
  .el-checkbox-group {
    display: inline;
  }

  .sInput {
    border: none;
    border-bottom: 1px solid #999;
    outline: none;
  }

  // 风险表格样式
  .risk-table-wrapper {
    margin: 20px 0 0;
    overflow-x: auto;

    .risk-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;

      th,
      td {
        border: 1px solid #dcdfe6;
        padding: 10px 8px;
        text-align: center;
      }

      th {
        background-color: #f5f7fa;
        font-weight: bold;
      }

      .col-index {
        width: 60px;
      }

      .col-project {
        width: 180px;
        text-align: left;
        padding-left: 15px;
      }

      .col-level {
        width: 140px;
      }

      .col-remark {
        width: auto;
        text-align: left;
        padding-left: 15px;

        .remark-text {
          margin-right: 10px;
          color: #606266;
        }

        :deep(.el-checkbox) {
          margin-right: 15px;
        }
      }
    }
  }
}
</style>