/**
* @file index.vue
* @description: 交叉配血
* @author: w
* @since: 2026-06-18
*/
<template>
  <div class="box-container">
    <!-- 顶部操作按钮栏 -->
    <div class="card-box">
      <el-button type="primary" plain @click="openJsHandle">检索</el-button>
      <el-button type="primary" plain>新增单据</el-button>
      <el-button type="danger" plain>删除单据</el-button>
      <el-button type="danger" plain>作废整单</el-button>
      <el-button type="primary" plain>血液库存</el-button>
      <el-button type="primary" plain>检验结果</el-button>
      <el-button type="success" plain>保存</el-button>
      <el-button type="warning" plain>打印</el-button>
    </div>

    <!-- 主体左右分栏容器 -->
    <div class="main-wrap">
      <!-- 左侧主表单区域 -->
      <el-row :gutter="10">
        <el-col :span="15">
          <!-- 申请单信息卡片 -->
          <div class="card-box">
            <div class="section-title">申请单信息</div>
            <el-form :model="formData" label-width="auto">
              <!-- 使用el-row实现一行四个表单项 -->
              <el-row :gutter="10">
                <el-col :span="6">
                  <el-form-item label="申请单号">
                    <DropdownTableSelect v-model="formData.applyBillNo" :column-list="applyColumns"
                      labelField="applyBillNo" :table-data="applyTableData" @open="loadApplyData"
                      @search="handleSearch" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <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" placeholder="0000-00-00 00:00" style="width: 100%;" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="姓 名">
                    <el-input v-model="formData.patientName" placeholder="" style="width: 100%;" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="血型">
                    <el-input v-model="formData.bloodType" placeholder="" style="width: 100%;" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="10">
                <el-col :span="6">
                  <el-form-item label="性 别">
                    <el-select v-model="formData.gender" placeholder="请选择">
                      <el-option label="男" value="男"></el-option>
                      <el-option label="女" value="女"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="年 龄">
                    <el-input v-model="formData.age" placeholder="" style="width: 100%;" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="住院号/ID号">
                    <el-input v-model="formData.hospitalId" placeholder="" style="width: 100%;" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="Rh(D)">
                    <el-input v-model="formData.rhD" placeholder="" style="width: 100%;" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="10">
                <el-col :span="6">
                  <el-form-item label="病 区">
                    <el-input v-model="formData.ward" placeholder="" style="width: 100%;" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="科 室">
                    <el-input v-model="formData.department" placeholder="" style="width: 100%;" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="床位号">
                    <el-input v-model="formData.bedNo" placeholder="" style="width: 100%;" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="临床诊断">
                    <el-input v-model="formData.diagnosis" placeholder="" style="width: 100%;" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="输血目的">
                    <el-input v-model="formData.transPurpose" placeholder="" style="width: 100%;" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="10">
                <el-col :span="5">
                  <el-form-item label="申请血型">
                    <el-input v-model="formData.applyBloodType" placeholder="" style="width: 100%;" />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="ABO复核">
                    <el-input v-model="formData.aboCheck" placeholder="" style="width: 100%;" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="亚型">
                    <el-input v-model="formData.subType" placeholder="" style="width: 100%;" />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="Rh(D)复核">
                    <el-input v-model="formData.rhDCheck" placeholder="" style="width: 100%;" />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="抗体筛选">
                    <el-input v-model="formData.antibodyScreen" placeholder="" style="width: 100%;" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="10">
                <el-col :span="15">
                  <el-form-item label=" ">
                    <div class="checkbox-group">
                      <el-checkbox v-model="formData.transReactionHis">输血反应史</el-checkbox>
                      <el-checkbox v-model="formData.transHistory">输血史</el-checkbox>
                      <el-checkbox v-model="formData.deliverHistory">分娩史</el-checkbox>
                      <el-checkbox v-model="formData.pregnancyHistory">妊娠史</el-checkbox>
                      <el-checkbox v-model="formData.matchHistory">配型史</el-checkbox>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="预定输血日期">
                    <el-date-picker v-model="formData.preTransDate" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                      value-format="YYYY-MM-DD HH:mm:ss" placeholder="0000-00-00 00:00" style="width: 100%;" />
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>

            <!-- 血液申请表格 - 固定高度确保一屏展示 -->
            <el-table :data="bloodApplyTable" border height="160">
              <el-table-column label="血液品种" prop="bloodKind" align="center" />
              <el-table-column label="申请血量" prop="applyNum" align="center" />
              <el-table-column label="单位" prop="unit" align="center" />
              <el-table-column label="申请血型" prop="applyBlood" align="center" />
              <el-table-column label="替代血液品种" prop="replaceBlood" align="center" />
              <el-table-column label="输血目的" prop="transGoal" align="center" />
              <el-table-column label="输血指征" prop="transIndex" align="center" />
            </el-table>
          </div>

          <!-- 配血记录卡片 - 固定高度确保一屏展示 -->
          <div class="card-box" style="margin-bottom: 0px;">
            <div class="section-title">配血记录</div>
            <div class="mb10">
              <el-select v-model="matchSelect" placeholder="请选择" style="width: 150px">
                <el-option label="增加配血血液" value="add" />
                <el-option label="取消配血血液" value="cancel" />
              </el-select>
              <el-input v-model="searchText" placeholder="" style="width: 250px;margin-left: 20px;" />
            </div>
            <el-table :data="matchTable" border height="200" stripe>
              <el-table-column label="序号" prop="index" align="center" width="60" />
              <el-table-column label="复核者" prop="checkUser" align="center" />
              <el-table-column label="血液流水号" prop="bloodSerial" align="center" width="120" />
              <el-table-column label="产品码" prop="productCode" align="center" />
              <el-table-column label="血液品种" prop="bloodType" align="center" />
              <el-table-column label="血型" prop="abo" align="center" />
              <el-table-column label="Rh(D)" prop="rh" align="center" />
              <el-table-column label="容量" prop="capacity" align="center" />
              <el-table-column label="供者血型复核" prop="donorAbo" align="center" width="120" />
              <el-table-column label="供者Rh(D)复核" prop="donorRh" align="center" width="120" />
              <el-table-column label="配血方法" prop="donorRh" align="center" />
              <el-table-column label="复核配血方法" prop="donorRh" align="center" width="120" />
              <el-table-column label="主侧" prop="donorRh" align="center" />
              <el-table-column label="次侧" prop="donorRh" align="center" />
              <el-table-column label="结果" prop="donorRh" align="center" />
              <el-table-column label="配血日期" prop="donorRh" align="center" />
              <el-table-column label="配血者" prop="donorRh" align="center" />
              <el-table-column label="血液存放位子" prop="donorRh" align="center" width="120" />
              <el-table-column label="标本存放位子" prop="donorRh" align="center" width="120" />
            </el-table>
          </div>
        </el-col>

        <!-- 右侧筛选+结果表格区域 -->
        <el-col :span="9">
          <div class="card-box" style="margin-bottom: 0px;">
            <el-form :model="filterForm" inline>
              <div>
                <el-form-item label="姓名：">
                  <el-input v-model="filterForm.name" placeholder="" style="width: 120px" />
                </el-form-item>
                <el-form-item label="状态：">
                  <el-select v-model="filterForm.status" placeholder="全部" style="width: 150px">
                    <el-option label="全部" value="" />
                  </el-select>
                </el-form-item>
                <el-form-item label="">
                  <el-button type="primary" plain @click="handleRefresh">刷新</el-button>
                </el-form-item>
              </div>

              <div>
                <el-form-item label="时间：">
                  <el-date-picker v-model="filterForm.startTime" type="date" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" />
                  <span class="timesplit">-</span>
                  <el-date-picker v-model="filterForm.endTime" type="date" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" />
                </el-form-item>
              </div>
            </el-form>

            <div class="result-table-card">
              <el-table :data="resultTable" border height="645px">
                <el-table-column label="配血日期" prop="matchDate" align="center" />
                <el-table-column label="患者姓名" prop="patName" align="center" />
                <el-table-column label="单据状态" prop="billStatus" align="center" />
                <el-table-column label="配血单号" prop="matchNo" align="center" />
                <el-table-column label="申请单号" prop="applyBillNo" align="center" />
                <el-table-column label="科室" prop="dept" align="center" />
                <el-table-column label="ABO复核" prop="aboResult" align="center" />
                <el-table-column label="Rh(D)复核" prop="rhResult" align="center" />
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog title="常规配血单检索" v-model="visible" width="1200px" :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="10">
          <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">-</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.bill_no" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="科室">
              <!-- <el-input v-model="searchForm.ks" placeholder="" /> -->
              <SelectTable v-model:data="searchForm.ks" :tableData="dictData.ks" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <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-row>
      </el-form>

      <!-- 结果表格区 -->
      <el-table :data="tableData" border height="350" @row-click="handleRowClick" highlight-current-row>
        <el-table-column prop="patient_name" label="患者姓名" align="center" />
        <el-table-column prop="patient_name" label="单据状态" align="center" />
        <el-table-column prop="bill_no" label="配血单号" align="center" width="150" />
        <el-table-column prop="bill_no" label="申请单号" align="center" width="150" />
        <el-table-column prop="bill_no" label="住院号/ID号" align="center" width="150" />
        <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="assess_data" label="配血日期" width="150" align="center" />
        <el-table-column prop="beinhos_id" label="ABO复核" align="center" />
        <el-table-column prop="assess_person" label="Rh(D)复核" align="center" />
      </el-table>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import DropdownTableSelect, { type TableColumnItem, type TableRowItem } from '@/components/DropdownTableSelect/index.vue'
import dayjs from 'dayjs'
import { getDictData, formatDict, dictData } from '@/hooks'

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: ''
})

const tableData = ref([])

const applyColumns = ref<TableColumnItem[]>([
  { label: '申请单号', prop: 'applyBillNo' },
  { label: '患者姓名', prop: 'patientName' },
  { label: '科室', prop: 'dept' },
  { label: '申请品种', prop: 'bloodKind' }
])
const applyTableData = ref<TableRowItem[]>([])
const searchText = ref('')
const matchSelect = ref('add')

// 主表单数据
const formData = ref({})

// 右侧筛选表单
const filterForm = reactive({
  name: '',
  status: '',
  startTime: dayjs().format('YYYY-MM-DD'),
  endTime: dayjs().format('YYYY-MM-DD'),
})

// 配血操作单选
const matchRadio = ref('add')

// 血液申请表格
const bloodApplyTable = ref([])
// 配血记录表格
const matchTable = ref([])
// 右侧结果列表
const resultTable = ref([])

const openJsHandle = () => {
  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: ''
  }
}
const handleConfirm = () => {
}
const handleRowClick = (row: any) => {
  console.log('点击行', row)
}

// 刷新右侧列表
const handleRefresh = () => {
  console.log('刷新右侧配血列表', filterForm)
}

const loadApplyData = () => {
}
const handleSearch = () => {

}

onMounted(() => {
  getDictData('ks')
})
</script>

<style scoped lang="scss">
.box-container {
  overflow-y: auto;


  // 主体左右容器
  .main-wrap {
    height: calc(100% - 70px);

    .timesplit {
      margin: 0 5px;
      color: #999;
    }
  }

  // 通用卡片样式（对齐规范）
  .card-box {
    :deep(.el-form-item) {
      margin-bottom: 8px;
    }

    .space-item {
      margin-right: 10px;
    }
  }

}
</style>