/**
* @file index.vue
* @description: 输血输注
* @author: w
* @since: 2026-06-04
*/
<template>
  <div class="app-container">
    <!-- 顶部搜索栏卡片 -->
    <div class="search-card">
      <el-form inline :model="searchForm">
        <el-form-item label="发血单号:">
          <el-input v-model="searchForm.fhNo" placeholder="" />
          <el-button type="primary" @click="queryByFh" class="ml10">查询</el-button>
        </el-form-item>
        <el-form-item label="用住院号查找:">
          <el-input v-model="searchForm.inNo" placeholder="" />
          <el-button type="primary" @click="queryByIn" class="ml10">查找</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 上方表格卡片 -->
    <div class="table-top-card">
      <el-table :data="topTableData" border @selection-change="handleSelect" highlight-current-row height="130px">
        <el-table-column type="index" width="50" label="序号" align="center" />
        <el-table-column label="血液流水号" prop="bloodSn" align="center" />
        <el-table-column label="产品码" prop="productCode" align="center" />
        <el-table-column label="血液品种" prop="bloodName" align="center" />
        <el-table-column label="ABO血型" prop="abo" align="center" />
        <el-table-column label="RH血型" prop="rh" align="center" />
        <el-table-column label="容量" prop="vol" align="center" />
        <el-table-column label="单位" prop="unit" align="center" />
        <el-table-column label="发血单号" prop="fhNo" align="center" />
        <el-table-column label="特殊处理" prop="deal" align="center" />
      </el-table>
    </div>
    <!-- 下方tab表单卡片 -->
    <div class="form-card">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="输血输注及护理登记" name="tab1">
          <el-form :model="formData" label-width="auto" class="form-top-label" label-position="top">
            <!-- 第一行 -->
            <div class="form-row four-col">
              <el-form-item label="血液流水号：">
                <el-input v-model="formData.bloodSn" style="width:100%" />
              </el-form-item>
              <el-form-item label="发血日期：">
                <el-date-picker v-model="formData.fhDate" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
              </el-form-item>
              <el-form-item label="科 室：">
                <el-select v-model="formData.department" placeholder="">
                  <el-option label="科室1" value="科室1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="血型：">
                <el-input v-model="formData.aboBlood" style="width:100%" />
              </el-form-item>
              <el-form-item label="申请单号：">
                <el-input v-model="formData.applyNo" style="width:100%" />
              </el-form-item>
              <el-form-item label="申请日期：">
                <el-date-picker v-model="formData.applyDate" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
              </el-form-item>
            </div>
            <!-- 第二行 -->
            <div class="form-row four-col">
              <el-form-item label="发血品种：">
                <el-input v-model="formData.bloodType" style="width:100%" />
              </el-form-item>
              <el-form-item label="患者姓名：">
                <el-input v-model="formData.patientName" style="width:100%" />
              </el-form-item>
              <el-form-item label="住院号/ID号：">
                <el-input v-model="formData.inId" style="width:100%" />
              </el-form-item>
              <el-form-item label="Rh(D)：">
                <el-input v-model="formData.rhD" style="width:100%" />
              </el-form-item>
              <el-form-item label="血量：">
                <div class="two-input-wrap">
                  <el-input v-model="formData.vol1" style="flex:1" />
                  <el-input v-model="formData.vol2" style="flex:1" />
                </div>
              </el-form-item>
            </div>

            <div class="split-line">输血输注及护理信息</div>
            <!-- 第四行 -->
            <div class="form-row four-col">
              <el-form-item label="登记日期：">
                <el-date-picker v-model="formData.regDate" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
              </el-form-item>
              <el-form-item label="输血医师：">
                <el-input v-model="formData.docName" style="width:100%" />
              </el-form-item>
              <el-form-item label="责任护士：">
                <el-select v-model="formData.nurse" placeholder="">
                  <el-option label="张三" value="张三"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="滴速：">
                <el-input v-model="formData.speed">
                  <template #suffix> 滴/分 </template>
                </el-input>
              </el-form-item>
            </div>
            <!-- 复选+右侧表单 -->
            <div class="form-row-check">
              <div class="check-col">
                <el-checkbox v-model="formData.check1">患者信息是否核对</el-checkbox>
                <el-checkbox v-model="formData.check2">交叉配血结果是否相符</el-checkbox>
                <el-checkbox v-model="formData.check3">血液是否未过期</el-checkbox>
                <el-checkbox v-model="formData.check4">血袋外观是否合格</el-checkbox>
                <el-checkbox v-model="formData.check5">血液流水号是否相符</el-checkbox>
              </div>
              <div class="field-col">
                <div class="form-row four-col">
                  <el-form-item label="输血开始时间：">
                    <el-date-picker v-model="formData.startTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                      style="width:100%" />
                  </el-form-item>
                  <el-form-item label="输血结束时间：">
                    <el-date-picker v-model="formData.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                      style="width:100%" />
                  </el-form-item>
                  <el-form-item label="一刻钟观察时间：">
                    <el-date-picker v-model="formData.q1Time" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                      style="width:100%" />
                  </el-form-item>
                  <el-form-item label="一刻钟观察护士：">
                    <el-select v-model="formData.q1Nurse" placeholder="">
                      <el-option label="张三" value="张三"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="form-row four-col">
                  <el-form-item label="一小时观察时间：">
                    <el-date-picker v-model="formData.qhTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                      style="width:100%" />
                  </el-form-item>
                  <el-form-item label="一小时观察护士：">
                    <el-select v-model="formData.qhNurse" placeholder="">
                      <el-option label="张三" value="张三"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="输血后血袋处理：">
                    <el-input v-model="formData.bagDeal" style="width:100%" />
                  </el-form-item>
                  <el-form-item label="审阅者：" class="red-label">
                    <el-select v-model="formData.checkUser" placeholder="">
                      <el-option label="张三" value="张三"></el-option>
                    </el-select>
                  </el-form-item>
                </div>

                <div class="form-row">
                  <el-form-item label="输血情况记录：">
                    <el-input v-model="formData.record" style="width:500px" />
                  </el-form-item>
                </div>
              </div>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="临床监护记录" name="tab2">
          <div>临床监护录入区域</div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
// 顶部搜索
const searchForm = ref({
  fhNo: '',
  inNo: ''
})
// 表格选中
const selectedRow = ref<any>(null)
const handleSelect = (row: any[]) => {
  selectedRow.value = row[0] || null
}
// 上方表格数据
const topTableData = ref([
  { bloodSn: 'XS20260604001', productCode: 'P20260529001', bloodName: '悬浮红细胞', abo: 'A', rh: '阳性', vol: '2.0', unit: 'U', fhNo: 'FX2026060401', deal: '' },
  { bloodSn: 'XS20260604001', productCode: 'P20260529001', bloodName: '悬浮红细胞', abo: 'A', rh: '阳性', vol: '2.0', unit: 'U', fhNo: 'FX2026060401', deal: '' },
  { bloodSn: 'XS20260604001', productCode: 'P20260529001', bloodName: '悬浮红细胞', abo: 'A', rh: '阳性', vol: '2.0', unit: 'U', fhNo: 'FX2026060401', deal: '' },
])
// tab激活
const activeTab = ref('tab1')
// 表单数据
const formData = reactive({
  bloodSn: '',
  fhDate: '0000-00-00 00:00',
  department: '',
  aboBlood: '',
  applyNo: '',
  applyDate: '0000-00-00 00:00',
  bloodType: '',
  rhD: '',
  patientName: '',
  inId: '',
  vol1: '',
  vol2: '',
  regDate: '2026-06-04 15:27',
  docName: '',
  nurse: '管理员',
  speed: '',
  check1: true,
  check2: true,
  check3: true,
  check4: true,
  check5: true,
  startTime: '',
  endTime: '',
  q1Time: '',
  q1Nurse: '管理员',
  qhTime: '',
  qhNurse: '管理员',
  bagDeal: '置入双层黄色垃圾袋',
  checkUser: '',
  record: '无输血不良反应'
})
const queryByFh = () => { console.log('按发血单号查询', searchForm.value.fhNo) }
const queryByIn = () => { console.log('按住院号查找', searchForm.value.inNo) }
</script>
<style scoped lang="scss">
.app-container {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;

  // 搜索卡片
  .search-card {
    background: #fff;
    padding: 16px 20px;
    border-radius: 6px;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.065);

    :deep(.el-form-item) {
      margin-bottom: 0;
    }
  }

  // 上部表格卡片
  .table-top-card {
    background: #fff;
    padding: 16px;
    border-radius: 6px;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.065);

    &:hover {
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12); // 悬停加深阴影
    }

    :deep(.el-table__header th) {
      background: #f5f7fa;
    }
  }

  :deep(.el-tabs__header) {
    margin-bottom: 0;
  }

  // 下方表单卡片
  .form-card {
    background: #fff;
    padding: 12px;
    border-radius: 6px;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.065);

    &:hover {
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12); // 悬停加深阴影
    }

    .form-top-label {

      :deep(.el-form-item__label) {
        padding: 0 0 5px 0;
        margin: 8px 0 0 0;
        font-size: 14px;
      }

      :deep(.el-form-item) {
        margin-bottom: 12px;
      }
    }

    .split-line {
      font-size: 15px;
      font-weight: 600;
      color: #303133;
      margin: 8px 0;
      display: flex;
      align-items: center;

      &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 14px;
        background-color: #409eff;
        margin-right: 8px;
        border-radius: 0 4px 4px 0;
      }
    }

    .form-row {
      display: flex;
      gap: 10px;
      margin-bottom: 0;

      &.four-col {
        >.el-form-item {
          width: 250px;
          margin-bottom: 0;
        }
      }
    }

    .two-input-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .form-row-check {
      display: flex;
      gap: 24px;
      margin-top: 10px;

      .check-col {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 238px;
      }

      .field-col {
        flex: 1;
      }
    }

    :deep(.red-label) {
      .el-form-item__label {
        color: #f53f3f;
        font-weight: bold;
      }

    }
  }
}
</style>