blood_vue/src/views/doctor/application/index.vue

/**
* @file index.vue
* @description: 输血申请
* @author: w
* @since: 2026-06-30
*/

<template>
  <div class="box-container">
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <el-button type="primary" plain @click="openJsDialog">检索</el-button>
      <el-button type="primary" plain @click="addHandle">新增</el-button>
      <el-button type="success" plain @click="handleSubmit" :loading="saveLoading">保存</el-button>
      <el-button @click="blHandle">电子病历</el-button>
      <el-button :loading="shLoading" @click="reviewHandle">审核</el-button>
      <el-button type="danger" plain @click="cancelreviewHandle">取消审核</el-button>
      <el-button type="info" plain @click="invalidateHandle">作废</el-button>
      <el-button type="warning" plain>打印输血申请单</el-button>
      <el-button @click="goHistoryBlood">患者输血历史</el-button>
      <el-button type="warning" plain>打印大量输血审批单</el-button>
      <el-button type="warning" plain>打印输血知情同意书</el-button>
    </div>

    <!-- 主体区域 左2 : 右1 -->
    <div class="main-content">
      <!-- 左侧区域 占2份left-wrap -->
      <div class="left-wrap">
        <el-form ref="formRef" label-width="auto" size="small" class="blood-transfusion-form"
          :disabled="xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A'">
          <div class="card-box base-info-card">
            <div class="section-title">
              <div>患者信息</div>
            </div>
            <div class="base-info-content">
              <div class="base-info">
                <div class="info-row">
                  <div class="info-item">
                    <span class="label">住院号：</span>
                    <span class="value">{{ xkTransfuseApply.beinhos_id }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">姓名：</span>
                    <span class="value">{{ xkPatientInfo.patient_name }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">性别：</span>
                    <span class="value">{{ xkPatientInfo.patient_sex }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">年龄：</span>
                    <span class="value">{{ xkPatientInfo.age }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">属地：</span>
                    <span class="value">{{ formatDict(xkPatientInfo.apanage, 'sd') }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">病区：</span>
                    <span class="value ellipsis-one-line" :title="formatDict(xkTransfuseApply.zone_id, 'bq')">
                      {{ formatDict(xkTransfuseApply.zone_id, 'bq') }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">科室：</span>
                    <span class="value ellipsis-one-line" :title="formatDict(xkTransfuseApply.dept_id, 'ks')">
                      {{ formatDict(xkTransfuseApply.dept_id, 'ks') }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">床位号：</span>
                    <span class="value">{{ xkTransfuseApply.patient_bed }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">临床诊断：</span>
                    <span class="value ellipsis-one-line" :title="xkTransfuseApply.diagnoses">
                      {{ xkTransfuseApply.diagnoses }}</span>
                  </div>
                </div>
                <div class="blood-type-group">
                  <div class="blood-type-tag ab"><span class="x_type">{{ xkPatientInfo.abo || '-' }}</span> 型</div>
                  <div :class="['blood-type-tag', 'rh',]">
                    <span :class="[xkPatientInfo.rh ? (xkPatientInfo.rh == '+' ? '' : 'red') : '']">
                      {{ xkPatientInfo.rh ? (xkPatientInfo.rh == '+' ? '阳性' : '阴性') : '-' }}</span> RH
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="card-box">
            <div class="section-title">
              <div>开单信息</div>
              <div style="width: 200px">
                申请单号： {{ xkTransfuseApply.bill_no }}
              </div>
            </div>
            <el-row :gutter="10">
              <el-col :span="6">
                <el-form-item label="评估单" prop="assess_bill_no">
                  <DropdownTableSelect v-model="xkTransfuseApply.assess_bill_no" :columnList="pgcolumnList"
                    :tableData="pgList" tableWidth="700px" labelField="bill_no" :showSearch="false" @open="getPgList"
                    :readonly="true" @change="getPgInfo" />
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="申请日期" prop="apply_date">
                  <el-date-picker v-model="formData.apply_date" type="datetime" style="width:100%"
                    value-format="YYYY-MM-DD HH:mm:ss" />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="申请医师" prop="apply_medic">
                  <SelectTable v-model:data="xkTransfuseApply.apply_medic" :tableData="userList" size="small"
                    placeholder="" :disabled="xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A'" />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="主治医师" prop="attending_medic">
                  <SelectTable v-model:data="xkTransfuseApply.attending_medic" :tableData="userList" size="small"
                    placeholder="" :disabled="xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A'" />
                </el-form-item>
              </el-col>
              <el-col :span="17">
                <el-form-item label="申请类型" prop="apply_type">
                  <el-radio-group v-model="xkTransfuseApply.apply_type">
                    <el-radio v-for="v in dictData.sqlx" :value="v.value">{{ v.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-checkbox v-model="xkTransfuseApply.agreement_ink" true-value="Y"
                  false-value="N">病人/病人家属是否签署输血同意书</el-checkbox>
              </el-col>

              <el-col :span="5">
                <el-form-item label="单据类型" prop="bill_type">
                  <el-select v-model="xkTransfuseApply.bill_type">
                    <el-option label="正常" value="正常" />
                    <el-option label="补单" value="补单" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="预定输血日期" prop="use1_date">
                  <el-date-picker v-model="xkTransfuseApply.use1_date" type="datetime" placeholder="选择日期"
                    value-format="YYYY-MM-DD HH:mm:ss" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="科室类型" prop="dept_Type">
                  <el-select v-model="xkTransfuseApply.dept_Type" placeholder="" style="width:50%" clearable
                    @change="xkTransfuseApply.use_type = ''">
                    <el-option v-for="v in dictData.depttype" :label="v.label" :value="v.value" />
                  </el-select>
                  <el-select v-model="xkTransfuseApply.use_type" placeholder="" style="width:50%" clearable
                    v-if="!xkTransfuseApply.dept_Type">
                  </el-select>
                  <el-select v-model="xkTransfuseApply.use_type" placeholder="" style="width:50%" clearable
                    v-if="xkTransfuseApply.dept_Type == 'A'">
                    <el-option v-for="v in dictData.operatype" :label="v.label" :value="v.value" />
                  </el-select>
                  <el-select v-model="xkTransfuseApply.use_type" placeholder="" style="width:50%" clearable
                    v-if="xkTransfuseApply.dept_Type == 'B'">
                    <el-option v-for="v in dictData.nooperatype" :label="v.label" :value="v.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6"></el-col>
              <el-col :span="6">
                <el-form-item label="手术名称" prop="operation_name">
                  <DropdownTableSelect v-model="xkTransfuseApply.operation_name" :columnList="operationColumn"
                    :tableData="operationList" tableWidth="350px" labelField="oper_name" @change="getOperationInfo" />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="手术级别" prop="operation_level">
                  <el-select v-model="xkTransfuseApply.operation_level" placeholder="" clearable>
                    <el-option label="一级手术" value="1" />
                    <el-option label="二级手术" value="2" />
                    <el-option label="三级手术" value="3" />
                    <el-option label="四级手术" value="4" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="单病种" prop="ill_Code">
                  <SelectTable v-model:data="xkTransfuseApply.ill_Code" :tableData="diaList" size="small" placeholder=""
                    :disabled="xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A'" />
                </el-form-item>
              </el-col>


            </el-row>
            <el-row :gutter="10">
              <el-form-item label="输血史:" prop="transfuse_history">
                <el-radio-group v-model="xkPatientInfo.transfuse_history">
                  <el-radio value="Y">有</el-radio>
                  <el-radio value="N">无</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="反应史:" prop="reaction_history" label-width="80px">
                <el-radio-group v-model="xkPatientInfo.reaction_history">
                  <el-radio value="Y">有</el-radio>
                  <el-radio value="N">无</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="移植配型史:" prop="match_history" label-width="100px">
                <el-radio-group v-model="xkPatientInfo.match_history">
                  <el-radio value="Y">有</el-radio>
                  <el-radio value="N">无</el-radio>
                </el-radio-group>
              </el-form-item>


              <el-form-item label="妊娠史:" prop="gestation_history" label-width="80px">
                <el-radio-group v-model="xkPatientInfo.gestation_history"
                  :disabled="xkPatientInfo.patient_sex == '男' || (xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A')">
                  <el-radio value="Y">有</el-radio>
                  <el-radio value="N">无</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="分娩史:" prop="parturition_history" label-width="80px">
                <el-radio-group v-model="xkPatientInfo.parturition_history"
                  :disabled="xkPatientInfo.patient_sex == '男' || (xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A')">
                  <el-radio value="Y">有</el-radio>
                  <el-radio value="N">无</el-radio>
                </el-radio-group>
              </el-form-item>

            </el-row>

            <div class="line"></div>
            <el-row :gutter="10">
              <el-col :span="4">
                <el-form-item label="上级医师：" prop="check_medic">
                  {{userList.find(item => item.value == xkTransfuseApply.check_medic)?.label}}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="审核时间：" prop="medic_check_date">
                  {{ xkTransfuseApply.medic_check_date }}
                </el-form-item>
              </el-col>

            </el-row>

            <div class="status"
              :style="{ borderColor: getBillStatusInfo(xkTransfuseApply.bill_stasus).color, color: getBillStatusInfo(xkTransfuseApply.bill_stasus).color }">
              {{ getBillStatusInfo(xkTransfuseApply.bill_stasus).label }}
            </div>
          </div>

          <!-- 血液品种 -->
          <div class="card-box">
            <div class="section-title">
              <div>血液品种</div>
              <div>
                <el-button type="primary" @click="openBloodDialog">增加</el-button>
              </div>
            </div>
            <el-table :data="bloodList" border height="120" show-overflow-tooltip>
              <el-table-column prop="blood_breed" label="血液品种" align="center" width="150">
                <template #default="{ row }">
                  {{bloodBreed.find(v => v.value == row.blood_breed).label}}
                </template>
              </el-table-column>
              <el-table-column prop="blood_num" label="申请血量" align="center" />
              <el-table-column prop="unit" label="单位" align="center" />
              <el-table-column prop="onetime_num" label="每次血量" align="center" />
              <el-table-column prop="apply_bloodtype" label="申请血型" align="center">
                <template #default="{ row }">
                  {{ formatDict(row.apply_bloodtype, 'abotype') }}
                </template>
              </el-table-column>
              <el-table-column prop="intent" label="输血目的" align="center" width="200">
                <template #default="{ row }">
                  {{ formatDict(row.intent, 'sxmd') }}
                </template>
              </el-table-column>
              <el-table-column prop="causalis" label="输血指征" align="center" width="200">
                <template #default="{ row }">
                  {{ formatDict(row.causalis, 'sxzz') }}
                </template>
              </el-table-column>
              <el-table-column prop="special_deal" label="特殊处理" align="center">
                <template #default="{ row }">
                  {{ formatDict(row.special_deal, 'sxzz') }}
                </template>
              </el-table-column>
              <el-table-column prop="replace_bloodbreed" label="替代血液品种" align="center" width="120">
                <template #default="{ row }">
                  {{bloodBreed.find(v => v.value == row.replace_bloodbreed)?.label}}
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" align="center" />
              <el-table-column label="操作" align="center" width="120" fixed="right">
                <template #default="scope">
                  <el-button link type="primary" @click="editBlood(scope.row, scope.$index)">编辑</el-button>
                  <el-button link type="primary" @click="deleteSingleBlood(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="card-box jcBox">
            <div class="section-title">
              <div>病人最近检查结果</div>
            </div>
            <div class="tableBox">
              <el-table :data="firstGroup" border height="100%">
                <el-table-column label="项目名" prop="item_name" align="center" />
                <el-table-column label="结果" prop="item_result" align="center">
                  <template #default="{ row }">
                    <el-select v-model="row.item_result" placeholder="" class="full-width-input" allow-create filterable
                      default-first-option>
                      <el-option v-for="item in dictData.test_result" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="单位" prop="item_unit" align="center" width="80" />
                <el-table-column label="检验时间" prop="validTime" align="center" width="150" />
              </el-table>

              <el-table :data="secondGroup" border height="100%">
                <el-table-column label="项目名" prop="item_name" align="center" />
                <el-table-column label="结果" prop="item_result" align="center">
                  <template #default="{ row }">
                    <el-select v-model="row.item_result" placeholder="" class="full-width-input" allow-create filterable
                      default-first-option>
                      <el-option v-for="item in dictData.test_result" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="单位" prop="item_unit" align="center" width="80" />
                <el-table-column label="检验时间" prop="validTime" align="center" width="150" />
              </el-table>
            </div>

          </div>
        </el-form>
      </div>
      <!-- 右侧列表 占1份 -->
      <div class="right-wrap">
        <div class="box-title">申请单列表</div>
        <div class="filter-bar">
          <el-radio-group v-model="listScope" size="small" @change="radioChange">
            <el-radio value="1">当前病人</el-radio>
            <el-radio value="2">本科室</el-radio>
            <el-radio value="3">当前医生</el-radio>
          </el-radio-group>
          <div class="date-filter">
            <span>单据状态：</span>
            <el-select v-model="queryForm.bill_status" style="width:110px" size="small" @change="getSqdList">
              <el-option v-for="item in dictData.billApplyStatus" :label="item.label" :value="item.value" />
            </el-select>
            <el-input v-model="queryForm.day" type="number" style="width:80px" class="ml10" size="small"
              @keydown.enter="getSqdList" />天内
          </div>
        </div>
        <div class="table-box">
          <el-table ref="orderRef" :data="orderList" border style="width:100%" height="100%" :cell-style="cellStyle"
            highlight-current-row show-overflow-tooltip @row-click="rowClick">
            <el-table-column prop="bill_stasus" label="单据状态" align="center">
              <template #default="scope">
                {{ formatDict(scope.row.bill_stasus, 'billApplyStatus') }}
              </template>
            </el-table-column>

            <el-table-column prop="patient_name" label="姓名" align="center" />
            <el-table-column prop="beinhos_id" label="住院号" align="center" />
            <el-table-column prop="bill_no" label="申请单号" align="center" width="120" />
            <el-table-column prop="dept_id" label="科室" align="center">
              <template #default="scope">
                {{ formatDict(scope.row.dept_id, 'ks') }}
              </template>
            </el-table-column>
            <el-table-column prop="abo_type" label="血型" align="center" />
            <el-table-column prop="rh_type" label="Rh(D)" align="center" />
            <el-table-column prop="req_breed" label="申请品种" align="center" />
            <el-table-column prop="apply_date" label="申请日期" width="120" align="center" />
            <el-table-column prop="apply_medic" label="申请医师" align="center">
              <template #default="scope">
                {{userList.find(item => item.value == scope.row.apply_medic)?.label || ''}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 血液品种编辑弹窗 -->
    <el-dialog v-model="bloodDialogVisible" title="血液品种信息" width="600px" @close="resetBloodForm">
      <el-form ref="bloodFormRef" :model="bloodForm" label-width="100px" :rules="bloodFormRules">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="血液品种" prop="blood_breed">
              <el-select v-model="bloodForm.blood_breed" placeholder="" @change="breedChange">
                <el-option v-for="item in bloodBreed" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请血量" prop="blood_num">
              <el-input v-model="bloodForm.blood_num" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位" prop="unit">
              <el-input v-model="bloodForm.unit" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="每次血量" prop="onetime_num">
              <el-input v-model="bloodForm.onetime_num" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请血型" prop="apply_bloodtype">
              <el-select v-model="bloodForm.apply_bloodtype" placeholder="">
                <el-option v-for="item in dictData.abotype" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="输血目的" prop="intent">
              <el-select v-model="bloodForm.intent" placeholder="">
                <el-option v-for="item in dictData.sxmd" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="输血指征" prop="causalis">
              <el-select v-model="bloodForm.causalis" placeholder="">
                <el-option v-for="item in dictData.sxzz" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="特殊处理" prop="special_deal">
              <el-input v-model="bloodForm.special_deal" placeholder="请输入特殊处理" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="替代血液品种" prop="replace_bloodbreed">
              <el-select v-model="bloodForm.replace_bloodbreed" placeholder="">
                <el-option v-for="item in bloodBreed" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="bloodForm.remark" placeholder="请输入备注" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="saveBloodForm">确定</el-button>
        <el-button @click="bloodDialogVisible = false">取消</el-button>
      </template>
    </el-dialog>

    <el-dialog title="输血申请检索" v-model="visible" width="1000px" :close-on-click-modal="false" @closed="handleClose">
      <div class="mb10">
        <el-button type="primary" @click="handleSearch">检索</el-button>
        <el-button type="success" @click="handleConfirm">确认</el-button>
      </div>
      <!-- 检索条件区 -->
      <el-form :model="searchForm" label-width="auto" class="search-form">
        <el-row :gutter="30">
          <el-col :span="10">
            <el-form-item label="申请日期">
              <div class="date-range">
                <el-date-picker v-model="searchForm.stime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  style="width: 47%" />
                <span class="separator" style="width: 6%;display: inline-block;text-align: center;">-</span>
                <el-date-picker v-model="searchForm.etime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  style="width: 47%" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="患者姓名">
              <el-input v-model="searchForm.patient_name" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="患者科室">
              <SelectTable v-model:data="searchForm.zone_id" :tableData="dictData.ks" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="10">
            <el-form-item label="申请单号">
              <el-input v-model="searchForm.bill_no" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="住院号/ID号">
              <el-input v-model="searchForm.beinhos_id" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="单据状态">
              <SelectTable v-model:data="searchForm.bill_status" :tableData="dictData.billApplyStatus" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 结果表格区 -->
      <el-table :data="jsTabdeList" border style="width: 100%; margin-top: 10px" height="350" show-overflow-tooltip
        @row-click="handleRowClick" highlight-current-row :cell-style="cellStyle">
        <el-table-column prop="bill_stasus" label="单据状态" align="center">
          <template #default="scope">
            {{ formatDict(scope.row.bill_stasus, 'billApplyStatus') }}
          </template>
        </el-table-column>
        <el-table-column prop="patient_name" label="姓名" align="center" />
        <el-table-column prop="beinhos_id" label="住院号" align="center" />
        <el-table-column prop="bill_no" label="申请单号" align="center" width="120" />
        <el-table-column prop="dept_id" label="科室" align="center">
          <template #default="scope">
            {{ formatDict(scope.row.dept_id, 'ks') }}
          </template>
        </el-table-column>
        <el-table-column prop="abo_type" label="血型" align="center" />
        <el-table-column prop="rh_type" label="Rh(D)" align="center" />
        <el-table-column prop="req_breed" label="申请品种" align="center" />
        <el-table-column prop="apply_date" label="申请日期" width="120" align="center" />
        <el-table-column prop="apply_medic" label="申请医师" align="center">
          <template #default="scope">
            {{userList.find(item => item.value == scope.row.apply_medic)?.label || ''}}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="审核" v-model="shShow" width="350px" :close-on-click-modal="false" @closed="shClose">
      <el-form ref="shFormRef" :model="shForm" label-width="auto">
        <el-form-item label="上级医师">
          <SelectTable v-model:data="shForm.checkMedic" :tableData="userList" placeholder="" />
        </el-form-item>
        <el-form-item label="审核时间">
          <el-date-picker v-model="shForm.checkDate" type="datetime" placeholder="选择日期"
            value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="handleSh">确定</el-button>
        <el-button @click="shClose">取消</el-button>
      </template>
    </el-dialog>

    <el-dialog title="作废" v-model="zfShow" width="350px" :close-on-click-modal="false" @closed="() => {
      reason = ''; reasonText = ''
    }">
      <DropdownTableSelect v-model="reasonText" :tableData="dictData.sqdzfyy" labelField="label"
        :columnList="[{ label: '字典名称', prop: 'label' }, { label: '代号', prop: 'value' }]" placeholder="作废原因"
        @change="(row) => { reason = row.value }" />
      <template #footer>
        <el-button type="primary" @click="handleZf">确定</el-button>
        <el-button @click="zfShow = false">取消</el-button>
      </template>
    </el-dialog>
    <!-- 审核意见弹窗 -->
    <ReviewComments ref="reviewCommentsRef"
      @success="() => { getQueryOneInfo(xkTransfuseApply.bill_no); getSqdList() }" />
    <!-- 校验用户身份 -->
    <CheckUser ref="checkUserRef" @onConfirm="handleCheckUserConfirm" />
  </div>
</template>

<script setup lang="ts" name="Application">
import type { ElForm, ElTable } from 'element-plus'
import { ElMessageBox, ElMessage } from 'element-plus'
import { getDictData, formatDict, dictData, useCommonDict, useSysParam } from '@/hooks'
import DropdownTableSelect from '@/components/DropdownTableSelect/index.vue'
import dayjs from 'dayjs'
import {
  querysqList, getPatInfo, checkSelfBlood, checkCausalis, savePreApplyInfo, saveApplyInfo, queryApplyOne, queryApplyBeforeList, applyCheck, applyMedicCheck,
  cancelApplyMedicCheck, cancelApplyCheck, cancelApply, invokeEMR
} from '@/api/doctor/application'
import { queryOperation, getDeptType, checkLoginAffirm } from '@/api/common'
import ReviewComments from './component/reviewComments.vue'
import CheckUser from '@/components/CheckUser/index.vue'
import useUserStore from '@/store/modules/user'
import router from '@/router/index.js'
const userInfo = useUserStore()

// 解构全部公共变量与方法
const { getParam } = useSysParam()

const {
  getServerTime,
  userList,
  getUserData,
  bloodBreed,
  getBloodList,
  lisProject,
  getLisProject,
  diaList,
  getDiaList,
  loadAllDict
} = useCommonDict()

const route = useRoute()

const aboFlag = ref('')
const saveLoading = ref(false)
const bloodFormRef = ref<InstanceType<typeof ElForm>>()
const queryForm = reactive({
  day: 7,
  bill_status: '',
  dept_code: userInfo.deptParam.deptId,
  doctor_code: userInfo.name,
  beinhos_id: ''
})

const listScope = ref('3')

const radioChange = (val: string) => {
  switch (val) {
    case '1':
      queryForm.beinhos_id = xkTransfuseApply.value.beinhos_id
      queryForm.dept_code = ''
      queryForm.doctor_code = ''
      break;
    case '2':
      queryForm.dept_code = xkTransfuseApply.value.dept_id ? xkTransfuseApply.value.dept_id : userInfo.deptParam.deptId
      queryForm.beinhos_id = ''
      queryForm.doctor_code = ''
      break;
    case '3':
      queryForm.doctor_code = userInfo.name
      queryForm.dept_code = ''
      queryForm.beinhos_id = ''
      break;
    default:
      break;
  }
  getSqdList()
}

const pgcolumnList = ref([
  { label: '评估单号', prop: 'bill_no' },
  { label: '住院号', prop: 'beinhos_id' },
  { label: '姓名', prop: 'patient_name', width: 100 },
  { label: '评估日期(24h内有效)', prop: 'assess_data', width: 200 },
  { label: '评估人', prop: 'assess_person', width: 100 },
])

const tableData = ref([])
const dictList = ref([
  { label: '代号', prop: 'value' },
  { label: '字典', prop: 'label' }
])

const formData = ref({
  apply_date: '',
}) //申请单信息
const xkPatientInfo = ref({
  transfuse_history: 'N',
  reaction_history: 'N',
  match_history: 'N',
  gestation_history: 'N',
  parturition_history: 'N',
  nldw: '岁',
}) //病人信息
const xkTransfuseApply = ref({
  agreement_ink: 'Y',
  bill_type: '正常',
  apply_type: '001'
}) //输血申请信息


const sexChange = (val: string) => {
  if (val == '男') {
    xkPatientInfo.value.parturition_history = 'N'
    xkPatientInfo.value.gestation_history = 'N'
  }
}



// 根据单据状态获取单元格样式（背景色+白色文字）
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (column.label == '单据状态') {
    return {
      background: `${getBillStatusInfo(row.bill_stasus).color} !important`,
      color: '#ffffff',
      fontWeight: 500
    }
  }

}

const getBillStatusInfo = (code: string) => {
  // 兜底空数组，不存在字典时不执行find
  const statusList = dictData.value?.billApplyStatus ?? []
  const target = statusList.find(item => item.value == code)
  if (target) {
    return { label: target.label, color: target.remark }
  }
  // 未知状态兜底橙色
  return { label: '未审核', color: '#E6A23C' }
}

// 血液品种列表
const bloodList = ref([])

const orderList = ref([]) // 输血申请单列表
const orderRef = useTemplateRef('orderRef')
// 血液品种弹窗相关
const bloodDialogVisible = ref(false)
const editIndex = ref(-1)
const bloodForm = reactive({})

// 血液品种表单验证规则
const bloodFormRules = reactive({
  blood_breed: [{ required: true, message: '请输入血液品种', trigger: 'blur' }],
  blood_num: [
    { required: true, message: '请输入申请血量', trigger: 'blur' },
    {
      validator: (rule: any, value: number, callback: Function) => {
        if (value <= 0) {
          callback(new Error('申请血量必须大于0'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})
const visible = ref(false)
const searchForm = ref({
  stime: dayjs().format('YYYY-MM-DD'),
  etime: dayjs().format('YYYY-MM-DD'),
  patient_name: '',
  bill_no: '',
  beinhos_id: '',
  bill_status: ''
})
const selectRow = ref({})
const jsTabdeList = ref([])
// 检索
const openJsDialog = () => {
  getList()
  visible.value = true
}
const handleClose = () => {
  visible.value = false
  searchForm.value = {
    stime: dayjs().format('YYYY-MM-DD'),
    etime: dayjs().format('YYYY-MM-DD'),
    patient_name: '',
    bill_no: '',
    beinhos_id: '',
    bill_status: ''
  }
  selectRow.value = {}
}
const handleSearch = () => {
  selectRow.value = {}
  getList()
}
const handleConfirm = () => {
  if (!selectRow.value.bill_no) return ElMessage.warning('请选择评估单')
  getQueryOneInfo(selectRow.value.bill_no)
  visible.value = false
  selectRow.value = {}
}

const handleRowClick = (row) => {
  selectRow.value = row
}
// 检索列表
const getList = () => {
  const data = {
    ...searchForm.value,
    stime: dayjs(searchForm.value.stime).format('YYYY-MM-DD') + ' 00:00:00',
    etime: dayjs(searchForm.value.etime).format('YYYY-MM-DD') + ' 23:59:59',
  }
  querysqList(data).then((res) => {
    jsTabdeList.value = res.data
  })
}

// 查询申请单列表
const getSqdList = () => {
  querysqList(queryForm).then((res) => {
    orderList.value = res.data
    if (res.data.length) {
      const row = res.data.find(item => item.bill_no == xkTransfuseApply.value.bill_no)
      nextTick(() => {
        if (row) {
          orderRef.value.setCurrentRow(row)
        }
      })
    }
  })
}

const rowClick = (row) => {
  getQueryOneInfo(row.bill_no)
}
//新增申请单
const addHandle = () => {
  xkPatientInfo.value = {
    transfuse_history: 'N',
    reaction_history: 'N',
    match_history: 'N',
    gestation_history: 'N',
    parturition_history: 'N',
    nldw: '岁',
  } //病人信息
  xkTransfuseApply.value = {
    agreement_ink: 'Y',
    bill_type: '正常',
    apply_type: '001'
  }
  bloodList.value = []
  formData.value = {
    assess_bill_no: ''
  }
  getServerTime().then(time => {
    formData.value.apply_date = time
  })
  getLisProject()
}
const checkUserRef = useTemplateRef('checkUserRef')
const shShow = ref(false)
const shForm = ref({
  checkMedic: '',
  checkDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  agreement_ink: 'Y'
})
const shLoading = ref(false)
const reviewCommentsRef = useTemplateRef('reviewCommentsRef')
// 审核
// 如果是001 代表是临床科室，此时需要调用“上级医生审核” 审核接口，
// 如果是002 代表是输血科室，调用“申请单审核前校验”
const reviewHandle = () => {
  if (!xkTransfuseApply.value.bill_no) return ElMessage.warning('请选择申请单')
  shLoading.value = true
  getDeptType({ userId: userInfo.name }).then(res => {
    if (res.data == '001') {
      shForm.value.checkMedic = userInfo.name
      shShow.value = true
    } else if (res.data = '002') {
      applyCheck({ billNo: xkTransfuseApply.value.bill_no }).then(res => {
        if (res.code == 0) {
          reviewCommentsRef.value.open(res.data)
        }
      })
    }
  }).finally(() => {
    shLoading.value = false
  })
}
// 上级医生审核
const handleSh = () => {
  if (userInfo.name != shForm.value.checkMedic) {
    //和当前登录的用户不一致的时候，需要输入工号密码验证
    checkUserRef.value.open()
  } else {
    handleReviewConfirm()
  }
}

const cancelreviewHandle = () => {
  if (!xkTransfuseApply.value.bill_no) return ElMessage.warning('请选择申请单')
  getDeptType({ userId: userInfo.name }).then(res => {
    ElMessageBox.confirm(
      `申请单号${xkTransfuseApply.value.bill_no}确定取消审核吗？`,
      '提示',
      { type: 'warning', }
    ).then(() => {
      if (res.data == '001') {
        cancelApplyMedicCheck({ billNo: xkTransfuseApply.value.bill_no }).then(res => {
          if (res.code == 0) {
            ElMessage.success(res.msg)
            getQueryOneInfo(xkTransfuseApply.value.bill_no)
            getSqdList()
          }
        })
      } else if (res.data == '002') {
        cancelApplyCheck({ billNo: xkTransfuseApply.value.bill_no }).then(res => {
          if (res.code == 0) {
            ElMessage.success(res.msg)
            getQueryOneInfo(xkTransfuseApply.value.bill_no)
            getSqdList()
          }
        })
      }
    })
  })
}

//作废
const reason = ref('')
const reasonText = ref('')
const zfShow = ref(false)
const invalidateHandle = () => {
  // sqdzfyy
  if (!xkTransfuseApply.value.bill_no) return ElMessage.warning('请选择申请单')
  zfShow.value = true
}
const handleZf = () => {
  if (!reason.value) return ElMessage.warning('请填写作废原因')
  cancelApply({ billNo: xkTransfuseApply.value.bill_no, reason: reason.value }).then(res => {
    if (res.code == 0) {
      ElMessage.success(res.msg)
      zfShow.value = false
      getQueryOneInfo(xkTransfuseApply.value.bill_no)
      getSqdList()
    }
  })
}
// 校验用户
const handleCheckUserConfirm = (info: { yhdh: string, mm: string }) => {
  checkLoginAffirm({ userId: info.yhdh, password: info.mm }).then((response: any) => {
    if (response.code == 0) {
      shForm.value.checkMedic = info.yhdh
      handleReviewConfirm()
    }
  })
}
//输血科审核
const handleReviewConfirm = () => {
  const data = {
    billNo: xkTransfuseApply.value.bill_no,
    ...shForm.value
  }
  applyMedicCheck(data).then(res => {
    if (res.code == 0) {
      ElMessage.success(res.msg)
      shShow.value = false
      getQueryOneInfo(xkTransfuseApply.value.bill_no)
      getSqdList()
    }
  })
}

//审核意见

const shClose = () => {
  shShow.value = false
  shForm.value = {
    checkMedic: '',
    checkDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    agreement_ink: 'Y'
  }
}


//患者历史
const goHistoryBlood = () => {
  router.push({
    path: '/doctor/historyBlood',
    query: {
      patientName: xkPatientInfo.value.patient_name,
    }
  })
}

// 打开新增弹窗
const openBloodDialog = () => {
  editIndex.value = -1
  resetBloodForm()
  bloodDialogVisible.value = true
}

// 重置弹窗表单
const resetBloodForm = () => {
  if (bloodFormRef.value) {
    bloodFormRef.value.clearValidate()
  }
  // 删除所有key，清空表单
  Object.keys(bloodForm).forEach(key => delete bloodForm[key])
}

// 编辑血液品种
const editBlood = (row: any, index: number) => {
  editIndex.value = index
  // 清空原有表单
  Object.keys(bloodForm).forEach(key => delete bloodForm[key])
  // 深拷贝行数据再赋值，切断和表格原数据的引用
  Object.assign(bloodForm, JSON.parse(JSON.stringify(row)))
  bloodDialogVisible.value = true
}

// 删除单条血液品种
const deleteSingleBlood = (index: number) => {
  ElMessageBox.confirm(
    '确定要删除这条血液品种信息吗？',
    '提示',
    {
      type: 'warning',
      size: 'small'
    }
  ).then(() => {
    bloodList.value.splice(index, 1)
    ElMessage.success('删除成功')
  })
}
const breedChange = (value: string) => {
  bloodForm.unit = bloodBreed.value.find(item => item.value === value)?.unit
}
// 保存血液品种表单
const saveBloodForm = async () => {
  if (!bloodFormRef.value) return
  try {
    await bloodFormRef.value.validate()
    // 深拷贝一份再存入列表，防止双向联动
    const formCopy = JSON.parse(JSON.stringify(bloodForm))
    if (editIndex.value === -1) {
      bloodList.value.push(formCopy)
    } else {
      bloodList.value.splice(editIndex.value, 1, formCopy)
    }
    bloodDialogVisible.value = false
  } catch (error) {
    ElMessage.error('请完善必填信息')
  }
}
//电子病历
const blHandle = () => {
  if (!xkTransfuseApply.value.beinhos_id) return ElMessage.warning('请选择患者')
  invokeEMR({ beinhos_id: xkTransfuseApply.value.beinhos_id }).then(res => {
    if (res.code == 0) {
      ElMessage.success(res.msg)
    }
  })
}

//保存申请单
const handleSubmit = async () => {
  if (!bloodList.value.length) return ElMessage.error('请添加血液品种')
  // 申请类型 003 || 002 手术信息必填校验
  if (xkTransfuseApply.value.apply_type === '003' || xkTransfuseApply.value.apply_type === '002') {
    if (!xkTransfuseApply.value.operation_name || !xkTransfuseApply.value.operation_level) {
      return ElMessage.error('请完善手术名称、级别信息')
    }
  }
  saveLoading.value = true
  const tempPatient = { ...xkPatientInfo.value, beinhos_id: xkTransfuseApply.value.beinhos_id }

  const data = {
    transfuseApplyInfoOne: {
      xkPatientInfo: tempPatient,
      xkTransfuseApply: xkTransfuseApply.value
    },
    xkTransfuseApplyBloodbreedList: bloodList.value,
    xkTransfuseApplyTestitemList: lisProject.value,
  }

  checkSelfBlood({ beinhos_id: xkTransfuseApply.value.beinhos_id }).then((res) => {
    if (res.code == 0) {
      checkCausalis(data).then((res1) => {
        if (res1.code == 0) {
          savePreApplyInfo(data).then((res2) => {
            if (res2.code == 0) {
              saveApplyInfo(data).then((res3) => {
                if (res3.code == 0) {
                  ElMessage.success('保存成功')
                  getSqdList()
                }
              })
            } else if (res2.code == 1) {
              getSqdList()
              ElMessage.success(res2.msg)
            } else if (res2.code == 2) {
              //2 弹窗提示
              ElMessageBox.confirm(res2.msg, '提示',
                {
                  confirmButtonText: '是',
                  cancelButtonText: '否',
                  type: 'warning',
                  showClose: false,
                  closeOnClickModal: false,
                  closeOnPressEscape: false,
                }
              ).then(() => {
                getQueryOneInfo(res2.data)
              }).catch(() => {
                saveApplyInfo(data).then((res3) => {
                  if (res3.code == 0) {
                    getSqdList()
                    ElMessage.success('保存成功')
                  }
                })
              })
            }
          })
        }
      })
    }
  }).finally(() => {
    saveLoading.value = false
  })

}
//获取申请单信息
const getQueryOneInfo = (bill_no: string) => {
  queryApplyOne({ billNo: bill_no }).then((res) => {
    xkPatientInfo.value = res.data.transfuseApplyInfoOne.xkPatientInfo
    xkTransfuseApply.value = res.data.transfuseApplyInfoOne.xkTransfuseApply
    bloodList.value = res.data.xkTransfuseApplyBloodbreedList
    formData.value = res.data.transfuseApplyInfoOne.xkTransfuseApply
    lisProject.value = res.data.xkTransfuseApplyTestitemList.map(item => {
      return {
        bill_no: item.bill_no,
        item_name: item.item_name,
        item_result: item.item_result,
        item_unit: item.item_unit,
        test_date: item.test_date,
        sid: item.sid
      }
    })
  })
}

//获取患者信息
const getInfo = (billNo) => {
  //PJD2026061623
  getPatInfo({ bill_no: billNo }).then((res) => {
    xkPatientInfo.value = res.data.transfuseApplyInfoOne.xkPatientInfo
    xkTransfuseApply.value = res.data.transfuseApplyInfoOne.xkTransfuseApply
    bloodList.value = res.data.xkTransfuseApplyBloodbreedList || []
    formData.value = res.data.transfuseApplyInfoOne.xkTransfuseApply
    lisProject.value = res.data.xkTransfuseApplyTestitemList.map(item => {
      return {
        bill_no: item.bill_no,
        item_name: item.item_name,
        item_result: item.item_result,
        item_unit: item.item_unit,
        test_date: item.test_date,
        sid: item.sid
      }
    })
  })
}

// 回显时拆分 年龄 + 单位
const splitAge = (ageStr: string) => {
  const unitList = dictData.value.nldw.map(item => item.value)
  let age = ageStr
  let unit = '岁'
  for (const u of unitList) {
    if (ageStr.includes(u)) {
      age = ageStr.replace(u, '')
      unit = u
      break
    }
  }
  xkPatientInfo.value.age = age
  xkPatientInfo.value.nldw = unit
}



const pgList = ref([])
//获取评估申请单
const getPgList = () => {
  queryApplyBeforeList({ user_id: userInfo.name, dept_id: userInfo.deptParam.deptId }).then((res) => {
    pgList.value = res.data
  })
}

let needClearState = false // 标记是否需要清理state
// 加载单据
const loadBillInfo = () => {
  const state = history.state as { billNo?: string; isJump?: boolean } | null
  // 只有主动跳转带过来的参数才执行查询
  if (state?.isJump && state.billNo) {
    getInfo(state.billNo)
    needClearState = true // 标记本次有跳转参数，页面销毁时清空
  }
}
//住院号点击
const getPgInfo = (row) => {
  getInfo(row.bill_no)
}

//手术名称
const operationList = ref([])
const operationColumn = [
  { label: '手术代号', prop: 'icd_code' },
  { label: '手术名称', prop: 'oper_name', width: 200 },
  // { label: '手术级别', prop: 'oper_level' },
]

const getOperationInfo = (row) => {
  if (row.oper_level) {
    switch (row.oper_level) {
      case '一级':
        xkTransfuseApply.value.operation_level = '1'
        break;
      case '二级':
        xkTransfuseApply.value.operation_level = '2'
        break;
      case '三级':
        xkTransfuseApply.value.operation_level = '3'
        break;
      case '四级':
        xkTransfuseApply.value.operation_level = '4'
        break;
      default:
        break;
    }
  }

}
//手术名称
const getSxList = () => {
  queryOperation({ pageNum: 1, pageSize: 99999 }).then(res => {
    operationList.value = res.rows
  })
}

// 计算属性：自动平分数组，分成两组
const splitList = computed(() => {
  const list = lisProject.value
  console.log("🚀 ~ lisProject.value:", lisProject.value)
  const midIndex = Math.ceil(list.length / 2)
  const firstGroup = list.slice(0, midIndex)
  const secondGroup = list.slice(midIndex)
  console.log("🚀 ~ firstGroup, secondGroup:", firstGroup, secondGroup)
  return { firstGroup, secondGroup }
})

// 拆分后两组数据
const firstGroup = computed(() => splitList.value.firstGroup)
const secondGroup = computed(() => splitList.value.secondGroup)

onMounted(() => {
  loadAllDict()
  getServerTime().then(time => {
    formData.value.apply_date = time
  })
  getSxList()
  getDictData('sqdzfyy', 'rhtype', 'abotype', 'nldw', 'billApplyStatus', 'sd', 'ks', 'depttype', 'bq', 'sxmd', 'sxzz', 'test_result', 'sqlx', 'lczd', 'xylx', 'operatype', 'nooperatype')
  getSqdList()
  loadBillInfo()

  // SQDSFKRLXGXX 参数说明如下：
  // 输血申请时是否可从HIS系统中调出患者信息，是否可以录入修改患者血型？
  // 以"/"分隔，"/"前指可以调出患者信息时是否可以修改患者血型(Y可以修改N不可以修改)，
  // "/"后指不可以调出患者信息时是否可以录入全部和只能录入"未知"患者血型(Y可以录入全部N只能录入"未知")

  if (getParam('SQDSFKRLXGXX')) {
    const [a, b] = getParam('SQDSFKRLXGXX').split('/')
    aboFlag.value = b
  }



})

// 监听路由变化
watch(() => route.fullPath, loadBillInfo)

// 页面关闭/切换标签时再清空state，不影响同路由二次跳转
onBeforeUnmount(() => {
  if (needClearState) {
    history.replaceState({}, document.title)
  }
})
</script>

<style scoped lang="scss">
.box-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;

  .toolbar {
    padding: 8px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .main-content {
    flex: 1;
    display: flex;
    gap: 10px;
    overflow: hidden;

    .box-title {
      position: relative;
      padding-left: 12px;
      padding-bottom: 6px;
      font-size: 15px;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      // align-items: center;

      /* 左侧蓝色小竖线 */
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;
        bottom: 2px;
        width: 4px;
        height: 14px;
        background-color: #409eff;
        margin-right: 8px;
        border-radius: 0 4px 4px 0;
      }

      .title-btn {
        display: flex;
        gap: 6px;
      }
    }

    /* 左侧 2份 */
    .left-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .blood-transfusion-form {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .el-radio {
          margin-right: 10px !important;
        }

        .jcBox {
          flex: 1;
          min-height: 0;

          .tableBox {
            height: calc(100% - 30px);
            display: flex;
            gap: 10px;
            overflow: auto;
          }
        }
      }

      .card-box {
        position: relative;

        :deep(.el-form-item) {
          margin-bottom: 6px !important;
        }


        .col-project {
          position: relative;

        }

        .unit {
          position: absolute;
          left: 100%;
          top: 0;
          color: #aeb1b7;
          margin-left: 5px;
        }

        .status {
          position: absolute;
          right: 20px;
          top: 100px;
          color: #409eff;
          font-size: 18px;
          font-weight: 700;
          border: 2px solid #409eff;
          border-radius: 5px;
          padding: 10px;
        }
      }

    }

    /* 右侧 1份 */
    .right-wrap {
      width: 35%;
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      padding: 10px;

      .filter-bar {
        margin-bottom: 8px;
        // display: flex;
        // align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .date-filter {
        font-size: 14px;
        color: #333;
      }

      .table-box {
        flex: 1;
        overflow: hidden;
      }
    }
  }
}

.text-danger {
  color: #f00 !important;
  margin-left: 20px;

  :deep(.el-checkbox__label) {
    color: #f00 !important;
  }
}

.base-info-card {
  .base-info-content {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;

    .base-info {
      display: flex;
      width: 100%;
    }

    .info-row {
      display: flex;
      width: 100%;
      flex-wrap: wrap;

      .info-item {
        width: 20%;
        display: flex;
        font-size: 14px;
        // font-weight: 600;

        .label {
          color: #000;
          min-width: 70px;
          text-align: right;
          margin-right: 8px;
        }

        .value {
          color: #1d2d42;
          flex: 1;
          font-size: 15px;
        }

      }
    }

    .blood-type-group {
      display: flex;
      gap: 16px;
      margin-left: 20px;

      .blood-type-tag {
        width: 150px;
        height: 50px;
        line-height: 50px;
        border-radius: 4px;
        color: #fff;
        font-size: 30px;
        font-weight: 600;
        padding-left: 20px;

        &.ab {
          background: url('@/assets/images/blood_zero.png');
          background-size: 100% 100%;
          color: #3594c7;

          .x_type {
            color: #ff3b62;
          }
        }

        &.rh {
          background-color: #e8f7ff;
          color: #3594c7;
        }

        .red {
          color: #f00 !important;
        }

      }
    }

  }
}

.line {
  height: 1px;
  background-color: #ccc;
}
</style>