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

<template>
  <div class="box-container">
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <el-button type="primary" plain>新增</el-button>
      <el-button type="danger" plain>删除</el-button>
      <el-button type="success" plain>保存</el-button>
      <el-button>电子病历</el-button>
      <el-button>审核</el-button>
      <el-button>取消审核</el-button>
      <el-button>作废</el-button>
      <el-button type="warning" plain>打印输血申请单</el-button>
      <el-button>患者输血历史</el-button>
      <el-button type="warning" plain>打印大量输血审批单</el-button>
      <el-button type="warning" plain>打印输血知情同意书</el-button>
    </div>

    <!-- 主体区域 左2 : 右1 -->
    <div class="main-content">
      <!-- 左侧区域 占2份 -->
      <div class="left-wrap">
        <!-- 包裹整个表单内容 -->
        <el-form ref="formRef" :model="formData" label-width="auto" size="small" class="blood-transfusion-form">
          <!-- 申请信息 -->
          <div class="box-item">
            <div class="box-title">申请信息</div>
            <el-row>
              <el-col :span="6">
                <el-form-item label="申请单号" prop="applyNo">
                  <el-input v-model="formData.applyNo" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="申请日期" prop="applyDate">
                  <el-date-picker v-model="formData.applyDate" type="datetime" style="width:100%" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="申请医师" prop="applyDoctor">
                  <el-input v-model="formData.applyDoctor" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="主治医师" prop="attendingDoctor">
                  <el-input v-model="formData.attendingDoctor" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="上级医师" prop="superiorDoctor">
                  <el-input v-model="formData.superiorDoctor" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 患者信息 -->
          <div class="box-item">
            <div class="box-title">患者信息</div>
            <el-row :gutter="10">
              <el-col :span="6">
                <el-form-item label="住院号/ID号" prop="hospitalNo">
                  <el-input v-model="formData.hospitalNo" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="formData.name" />
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="性别" prop="patient_sex">
                  <el-select v-model="formData.patient_sex" style="width:100%">
                    <el-option label="男" value="男" />
                    <el-option label="女" value="女" />
                    <el-option label="未知" value="未知" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="血型" prop="bloodType">
                  <el-input v-model="formData.bloodType" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="年龄" prop="age">
                  <el-input v-model="formData.age" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="科室" prop="dept">
                  <el-input v-model="formData.dept" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="病区" prop="ward">
                  <el-input v-model="formData.ward" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="Rh(D)" prop="rhd">
                  <el-input v-model="formData.rhd" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="床位号" prop="bedNo">
                  <el-input v-model="formData.bedNo" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="科室类型" prop="deptType">
                  <el-input v-model="formData.deptType" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="单病种" prop="singleDisease">
                  <el-input v-model="formData.singleDisease" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="临床诊断" prop="diagnosis">
                  <el-input v-model="formData.diagnosis" />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="输血目的" prop="transPurpose">
                  <el-select v-model="formData.transPurpose" style="width:100%">
                    <el-option label="选项1" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="输血指征" prop="transIndication">
                  <el-select v-model="formData.transIndication" style="width:100%">
                    <el-option label="选项1" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手术名称" prop="operationName">
                  <el-input v-model="formData.operationName" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手术级别" prop="operationLevel">
                  <el-input v-model="formData.operationLevel" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="" prop="signedConsent">
                  <el-checkbox v-model="formData.signedConsent">病人/病人家属是否签署输血同意书</el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="输血史" prop="hasTransfusionHistory">
                  <el-radio-group v-model="formData.hasTransfusionHistory">
                    <el-radio :value="1">有</el-radio>
                    <el-radio :value="0">无</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="反应史" prop="hasReactionHistory">
                  <el-radio-group v-model="formData.hasReactionHistory">
                    <el-radio :value="1">有</el-radio>
                    <el-radio :value="0">无</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="移植配型史" prop="hasTransplantHistory">
                  <el-radio-group v-model="formData.hasTransplantHistory">
                    <el-radio :value="1">有</el-radio>
                    <el-radio :value="0">无</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="妊娠史" prop="hasPregnancyHistory">
                  <el-radio-group v-model="formData.hasPregnancyHistory">
                    <el-radio :value="1">有</el-radio>
                    <el-radio :value="0">无</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分娩史" prop="hasDeliveryHistory">
                  <el-radio-group v-model="formData.hasDeliveryHistory">
                    <el-radio :value="1">有</el-radio>
                    <el-radio :value="0">无</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="申请类型" prop="hasDeliveryHistory">
                  <el-radio-group v-model="formData.applyType">
                    <el-radio :value="1">常规用血</el-radio>
                    <el-radio :value="2">手术备血</el-radio>
                    <el-radio :value="3">紧急</el-radio>
                    <el-radio :value="4">大量</el-radio>
                    <el-radio :value="5">紧急非同型</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="单据类型" prop="type">
                  <el-select v-model="formData.type">
                    <el-option label="选项1" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预定输血日期" prop="preTransfusionDate">
                  <el-date-picker v-model="formData.preTransfusionDate" type="date" placeholder="选择日期" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 检查结果（添加单位后缀） -->
          <div class="box-item">
            <div class="box-title">患者最近检查结果</div>
            <el-row :gutter="10">
              <el-col :span="6">
                <el-form-item label="HGB" prop="hgb">
                  <el-input v-model="formData.hgb">
                    <template #suffix>g/L</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="HCT" prop="hct">
                  <el-input v-model="formData.hct">
                    <template #suffix>%</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="PLT" prop="plt">
                  <el-input v-model="formData.plt">
                    <template #suffix>×10^9/L</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="ALT" prop="alt">
                  <el-input v-model="formData.alt">
                    <template #suffix>U/L</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="HBsAg" prop="hbsag">
                  <el-input v-model="formData.hbsag">
                    <template #suffix>ng/ml</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="TP" prop="tp">
                  <el-input v-model="formData.tp">
                    <template #suffix>g/L</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="Anti-HCV" prop="antiHcv">
                  <el-input v-model="formData.antiHcv">
                    <template #suffix>S/CO</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="Anti-HIV" prop="antiHiv">
                  <el-input v-model="formData.antiHiv">
                    <template #suffix>S/CO</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="PT" prop="pt">
                  <el-input v-model="formData.pt">
                    <template #suffix>秒</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="APTT" prop="aptt">
                  <el-input v-model="formData.aptt">
                    <template #suffix>秒</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="FIB" prop="fib">
                  <el-input v-model="formData.fib">
                    <template #suffix>g/L</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="INR" prop="inr">
                  <el-input v-model="formData.inr">
                    <template #suffix>（无单位）</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 血液品种 -->
          <div class="box-item">
            <div class="box-title">
              <span>血液品种</span>
              <div class="title-btn">
                <el-button type="primary" @click="openBloodDialog">增加</el-button>
              </div>
            </div>
            <el-table :data="bloodList" border height="120">
              <el-table-column prop="bloodType" label="血液品种" align="center" />
              <el-table-column prop="volume" label="申请血量" align="center" />
              <el-table-column prop="unit" label="单位" align="center" />
              <el-table-column prop="perVolume" label="每次血量" align="center" />
              <el-table-column prop="applyBloodType" label="申请血型" align="center" />
              <el-table-column prop="transPurpose" label="输血目的" align="center" />
              <el-table-column prop="transIndication" label="输血指征" align="center" />
              <el-table-column label="操作" align="center" width="120">
                <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>
        </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">
            <el-radio :value="0">当前病人</el-radio>
            <el-radio :value="1">病人列表</el-radio>
            <el-radio :value="2">当前医生</el-radio>
          </el-radio-group>
          <div class="date-filter">
            <span>单据状态：</span>
            <el-select v-model="filterStatus" style="width:110px" size="small">
              <el-option label="全部" value="" />
            </el-select>
            <el-input-number v-model="filterDays" :min="1" :max="30" style="width:80px" class="ml10" size="small" />天内
          </div>
        </div>
        <el-table :data="orderList" border style="width:100%" height="calc(100vh - 260px)">
          <el-table-column prop="name" label="血液品种" align="center" width="150" />
          <el-table-column prop="applyBloodVolume" label="申请血量" align="center" />
          <el-table-column prop="unit" label="单位" align="center" />
          <el-table-column prop="perBloodVolume" label="每次血量" align="center" />
          <el-table-column prop="applyBloodType" label="申请血型" align="center" />
          <el-table-column prop="transPurpose" label="输血目的" align="center" width="150" />
          <el-table-column prop="indication" label="输血指征" align="center" width="150" />
          <el-table-column prop="specialTreatment" label="特殊处理" align="center" width="150" />
          <el-table-column prop="alternativeBloodType" label="替代血液品种" align="center" width="150" />
          <el-table-column prop="remark" label="备注" align="center" />
        </el-table>
      </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="bloodType">
              <el-input v-model="bloodForm.bloodType" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请血量" prop="volume">
              <el-input v-model="bloodForm.volume" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位" prop="unit">
              <el-input v-model="bloodForm.unit" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="每次血量" prop="perVolume">
              <el-input v-model="bloodForm.perVolume" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请血型" prop="applyBloodType">
              <el-input v-model="bloodForm.applyBloodType" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="输血目的" prop="transPurpose">
              <el-input v-model="bloodForm.transPurpose" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="输血指征" prop="transIndication">
              <el-input v-model="bloodForm.transIndication" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="特殊处理" prop="specialTreatment">
              <el-input v-model="bloodForm.specialTreatment" placeholder="请输入特殊处理" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="替代血液品种" prop="alternativeBloodType">
              <el-input v-model="bloodForm.alternativeBloodType" placeholder="请输入替代血液品种" />
            </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>
  </div>
</template>

<script setup lang="ts">
import type { ElForm, ElTable } from 'element-plus'
import { ElMessageBox, ElMessage } from 'element-plus'

// 定义表单Ref
const formRef = ref<InstanceType<typeof ElForm>>()
const bloodFormRef = ref<InstanceType<typeof ElForm>>()

const formData = reactive({
  applyNo: '',
  applyDate: new Date(),
  applyDoctor: '管理员',
  attendingDoctor: '',
  superiorDoctor: '',
  hospitalNo: '',
  name: '',
  bloodType: '',
  patient_sex: '',
  age: '',
  rhd: '',
  dept: '',
  ward: '',
  bedNo: '',
  deptType: '',
  singleDisease: '',
  diagnosis: '',
  transPurpose: '',
  transIndication: '',
  hasTransfusionHistory: '0',
  hasReactionHistory: '0',
  hasTransplantHistory: '0',
  hasPregnancyHistory: '0',
  hasDeliveryHistory: '0',
  operationName: '',
  operationLevel: '',
  signedConsent: true,
  hgb: '',
  hct: '',
  plt: '',
  alt: '',
  hbsag: '',
  tp: '',
  antiHcv: '',
  antiHiv: '',
  pt: '',
  aptt: '',
  fib: '',
  inr: ''
})

// 血液品种列表
const bloodList = ref([
  { bloodType: '', volume: 'test1', unit: '', perVolume: '', applyBloodType: '', transPurpose: '', transIndication: '' }
])

const orderList = ref([
  { status: '', name: 'test1', hospitalNo: '', applyNo: '', dept: '', bloodType: '', rhd: '', bloodTypeDetail: '', quantity: '', unit: '', applyDate: '', applyDoctor: '' }
])

const useBarcode = ref(false)
const listScope = ref(0)
const filterStatus = ref('')
const filterDays = ref(3)

// 血液品种弹窗相关
const bloodDialogVisible = ref(false)
const editIndex = ref(-1)
const bloodForm = reactive({
  bloodType: '',
  volume: '',
  unit: '',
  perVolume: '',
  applyBloodType: '',
  transPurpose: '',
  transIndication: ''
})

// 血液品种表单验证规则
const bloodFormRules = reactive({
  bloodType: [{ required: true, message: '请输入血液品种', trigger: 'blur' }],
  volume: [{ required: true, message: '请输入申请血量', trigger: 'blur', type: 'number' }],
  unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
  applyBloodType: [{ required: true, message: '请输入申请血型', trigger: 'blur' }]
})

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

// 重置弹窗表单
const resetBloodForm = () => {
  if (bloodFormRef.value) {
    bloodFormRef.value.clearValidate()
  }
  Object.assign(bloodForm, {
    bloodType: '',
    volume: '',
    unit: '',
    perVolume: '',
    applyBloodType: '',
    transPurpose: '',
    transIndication: ''
  })
}

// 编辑血液品种
const editBlood = (row: any, index: number) => {
  editIndex.value = index
  // 深拷贝行数据到表单
  Object.assign(bloodForm, row)
  bloodDialogVisible.value = true
}

// 保存血液品种表单
const saveBloodForm = async () => {
  if (!bloodFormRef.value) return
  try {
    // 表单验证
    await bloodFormRef.value.validate()
    if (editIndex.value === -1) {
      // 新增
    } else {
      // 编辑

    }
    bloodDialogVisible.value = false
    ElMessage.success(editIndex.value === -1 ? '新增成功' : '编辑成功')
  } catch (error) {
    console.error('表单验证失败:', error)
    ElMessage.error('请完善必填信息')
  }
}

// 删除单条血液品种
const deleteSingleBlood = (index: number) => {
  ElMessageBox.confirm(
    '确定要删除这条血液品种信息吗？',
    '提示',
    {
      type: 'warning',
      size: 'small'
    }
  ).then(() => {
    bloodList.value.splice(index, 1)
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 批量删除（原删除按钮，保留）
const deleteBlood = () => {
  if (bloodList.value.length === 0) {
    ElMessage.warning('暂无可删除的血液品种信息')
    return
  }
  ElMessageBox.confirm(
    '确定要删除最后一条血液品种信息吗？',
    '提示',
    {
      type: 'warning',
      size: 'small'
    }
  ).then(() => {
    bloodList.value.pop()
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 可选：添加表单验证和提交方法
const validateForm = async () => {
  if (!formRef.value) return false
  try {
    const valid = await formRef.value.validate()
    return valid
  } catch (err) {
    console.error('表单验证失败:', err)
    return false
  }
}

const submitForm = async () => {
  const isValid = await validateForm()
  if (isValid) {
    // 表单验证通过，执行提交逻辑
    console.log('表单提交数据:', formData)
    // 这里可以添加接口请求等逻辑
  }
}
</script>

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

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

  .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;
      gap: 6px;
      overflow-y: auto;

      .blood-transfusion-form {
        width: 100%;
      }

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

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

      }
    }

    /* 右侧 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;
      }
    }
  }
}
</style>