/**
* @file bloodTransfusionAssessment.vue
* @description: 输血评估
* @author: w
* @since: 2026-06-04
*/

<template>
  <div class="app-container">
    <div class="section">
      <el-button type="primary" plain>检索</el-button>
      <el-button type="primary" plain>新增</el-button>
      <el-button type="primary" plain>保存</el-button>
      <el-button type="primary" plain>输血申请</el-button>
      <el-button type="warning" plain>打印</el-button>
      <el-button type="warning" plain>打印输血知情同意书</el-button>
    </div>

    <el-form :model="form" label-width="auto">
      <!-- 基础信息 -->
      <div class="section">
        <div class="title">基础信息</div>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="评估单号">
              <el-input v-model="baseInfo.assessmentNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="住院号/ID号">
              <el-input v-model="baseInfo.beinhos_id" @change="handleChange" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="姓 名">
              <el-input v-model="baseInfo.patient_name" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="血 型">
              <el-input v-model="baseInfo.abo" disabled :value="baseInfo.abo" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="评估日期">
              <el-input v-model="baseInfo.assessmentDate" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="科 室">
              <SelectTable v-model:data="baseInfo.dept_id" :tableData="dictData.ks" />
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="床位号">
              <el-input v-model="baseInfo.patient_bed" />
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="Rh(D)">
              <el-input v-model="baseInfo.rh" disabled :value="baseInfo.rh" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="评估医师">
              <el-input v-model="baseInfo.doctorname" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="病 区">
              <el-input v-model="baseInfo.zone_id" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="年 龄">
              <el-input v-model="baseInfo.age" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="临床诊断">
              <el-input v-model="baseInfo.diagnosis" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="出血量">
              <el-input v-model="formData.bleedingVolume" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="输血目的">
              <el-input v-model="formData.intent" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="贫血程度">
              <el-input v-model="formData.anemiaDegree" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="血液品种">
              <el-input v-model="formData.abo" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="血量">
              <el-input v-model="formData.bloodVolume" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label=" ">
              <el-checkbox v-model="formData.hbLow" class="text-danger">
                病人/病人家属是否签署输血同意书
              </el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="病情概要" class="tips-label">
              <span class="tips">
                (病人基本情况、贫血程度、凝血障碍、有无创面弥漫性渗血、心肺代偿功能、有无代谢率增高、年龄因素、输血目的等。)
              </span>
              <el-input v-model="formData.otherReason" type="textarea" :rows="3" style="margin-top: 8px" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="section">
        <div class="title">病人最近检查结果</div>

        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="HGB">
              <el-input v-model="formData.hgbValue" placeholder="">
                <template #suffix>
                  g/L
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="HCT">
              <el-input v-model="formData.hgbExpect" placeholder="">
                <template #suffix>
                  %
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="PLT">
              <el-input v-model="formData.estimatedVolume" placeholder="">
                <template #suffix>
                  X10^9/L
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="APTT">
              <el-input v-model="formData.aptt" placeholder="">
                <template #suffix>
                  秒
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="ALT">
              <el-input v-model="formData.altValue" placeholder="">
                <template #suffix>
                  U/L
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="HBsAg">
              <el-select v-model="formData.hbsAg" placeholder="请选择">
                <el-option label="阴性" value="negative" />
                <el-option label="阳性" value="positive" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="TP">
              <el-select v-model="formData.tp" placeholder="请选择">
                <el-option label="阴性" value="negative" />
                <el-option label="阳性" value="positive" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="FIB">
              <el-input v-model="formData.fib" placeholder="">
                <template #suffix>
                  g/L
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="Anti-HCV">
              <el-select v-model="formData.antiHcv" placeholder="请选择">
                <el-option label="阴性" value="negative" />
                <el-option label="阳性" value="positive" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="Anti-HIV">
              <el-select v-model="formData.antiHiv" placeholder="请选择">
                <el-option label="阴性" value="negative" />
                <el-option label="阳性" value="positive" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="PT">
              <el-input v-model="formData.pt" placeholder="">
                <template #suffix>
                  U
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="INR">
              <el-input v-model="formData.inr" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { queryPatInfo } from '@/api/doctor/assessment'
import { getDictData, formatDict, dictData } from '@/hooks'
const type = ref<'operation' | 'nonOperation'>('operation')

// 表单聚合（统一Form模型）
const form = reactive({})

// 基础信息数据
const baseInfo = ref({
  assessmentNo: '',
  patient_name: '',
  dept_id: '',
  assessmentDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  patient_bed: '',
  zone_id: '',
  doctorName: '',
  age: '',
  abo: '',
  beinhos_id: '',
  diagnosis: '',
  rh: ''
})

// 表单数据
const formData = reactive({
  bleedingVolume: '',
  intent: '',
  anemiaDegree: '',
  abo: '', // 血液品种
  bloodVolume: '', // 血量
  hbLow: false,
  otherReason: '',
  height: '',
  weight: '',
  hgbValue: '',
  hgbExpect: '',
  estimatedVolume: '',
  altValue: '', // ALT值
  hbsAg: '', // HBsAg
  tp: '', // TP
  antiHcv: '', // Anti-HCV
  antiHiv: '', // Anti-HIV
  pt: '', // PT
  aptt: '', // APTT
  fib: '', // FIB
  inr: '', // INR
  intraHemorrhage: false,
  nonTraumaBleeding: '',
  traumaBleeding: '',
  bloodLoss: '',
  hemolysisCondition: '',
  heartLungOxygen: false,
  anemiaCondition: false,
  crystalloidBefore: false,
  colloidBefore: false
})


onMounted(() => {

})

// 关闭弹窗
const handleClose = () => {
  Object.assign(baseInfo.value, {
    name: '',
    dept_id: '',
    assessmentDate: new Date().toLocaleString(),
    patient_bed: '',
    zone_id: '',
    age: '',
    abo: '',
    beinhos_id: '',
    diagnosis: '',
    rh: ''
  })
  // 重置表单
  Object.assign(formData, {
    bleedingVolume: '',
    intent: '',
    anemiaDegree: '',
    abo: '',
    bloodVolume: '',
    hbLow: false,
    otherReason: '',
    height: '',
    weight: '',
    hgbValue: '',
    hgbExpect: '',
    estimatedVolume: '',
    altValue: '',
    hbsAg: '',
    tp: '',
    antiHcv: '',
    antiHiv: '',
    pt: '',
    aptt: '',
    fib: '',
    inr: '',
    intraHemorrhage: false,
    nonTraumaBleeding: '',
    traumaBleeding: '',
    bloodLoss: '',
    hemolysisCondition: '',
    heartLungOxygen: false,
    anemiaCondition: false,
    crystalloidBefore: false,
    colloidBefore: false
  })
  type.value = 'operation'
}

const handleChange = (val) => {
  queryPatInfo({ patNo: val }).then((res) => {
    baseInfo.value = res.data.xkPatientInfo
  })
}

// 提交
const handleSubmit = () => {
  console.log('基础信息', baseInfo)
  console.log('表单数据', formData)
}

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

<style scoped lang="scss">
.app-container {
  overflow-y: auto;
  font-size: 14px;
  padding: 10px;
}

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

  .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;
    }
  }

  .el-form-item {
    margin-bottom: 6px;

    :deep(.el-form-item__label) {
      font-weight: 700;
    }
  }
}




.tips-label {
  label {
    display: none !important;
  }
}

.tips {
  color: #f00;
  font-size: 12px;
  display: block;
}

.text-danger {
  color: #f00 !important;

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