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

<template>
  <div class="app-container">
    <!-- 基础信息 -->
    <div class="section">
      <div class="section-title">基础信息</div>
      <div class="form-row three-col">
        <div class="form-item">
          <label>评估单号：</label>
          <el-input v-model="baseInfo.assessmentNo" disabled placeholder="" />
        </div>
        <div class="form-item">
          <label>姓 名：</label>
          <el-input v-model="baseInfo.name" placeholder="" />
        </div>
        <div class="form-item">
          <label>科 室：</label>
          <el-input v-model="baseInfo.department" placeholder="" />
        </div>
      </div>
      <div class="form-row three-col">
        <div class="form-item">
          <label>评估日期：</label>
          <el-input v-model="baseInfo.assessmentDate" readonly placeholder="" />
        </div>
        <div class="form-item">
          <label>床位号：</label>
          <el-input v-model="baseInfo.bedNo" placeholder="" />
        </div>
        <div class="form-item">
          <label>病 区：</label>
          <el-input v-model="baseInfo.ward" placeholder="" />
        </div>
      </div>
      <div class="form-row three-col">
        <div class="form-item">
          <label>评估医师：</label>
          <el-input v-model="baseInfo.doctorName" readonly placeholder="" />
        </div>
        <div class="form-item">
          <label>年 龄：</label>
          <el-input v-model="baseInfo.age" type="number" placeholder="" />
        </div>
        <div class="form-item">
          <label>血 型：</label>
          <div>
            {{ baseInfo.bloodType }}
          </div>
        </div>
      </div>
      <div class="form-row three-col">
        <div class="form-item">
          <label>住院号/ID号：</label>
          <el-input v-model="baseInfo.hospitalId" placeholder="" />
        </div>
        <div class="form-item">
          <label>临床诊断：</label>
          <el-input v-model="baseInfo.diagnosis" placeholder="" />
        </div>
        <div class="form-item">
          <label>Rh(D)：</label>
          <div>
            {{ baseInfo.rhD }}
          </div>
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="section">
      <div class="two-col">
        <div class="form-item-column">
          <div class="text">出血量：</div>
          <el-input v-model="formData.bleedingVolume" placeholder="" />
        </div>
        <div class="form-item-column">
          <div class="text">输血目的：</div>
          <el-input v-model="formData.purpose" placeholder="" />
        </div>
        <div class="form-item-column">
          <div class="text">贫血程度：</div>
          <el-input v-model="formData.anemiaDegree" placeholder="" />
        </div>
        <div class="form-item-column">
          <div class="text">血液品种：</div>
          <el-input v-model="formData.bloodType" placeholder="" />
        </div>
        <div class="form-item-column">
          <div class="text">血量：</div>
          <el-input v-model="formData.bloodVolume" placeholder="" />
        </div>
      </div>
      <div class="form-row checkbox-row">
        <el-checkbox v-model="formData.hbLow">病人/病人家属是否签署输血同意书</el-checkbox>
      </div>
      <div>
        <div class="tips">病情概要
          (病人基本情况、贫血程度、凝血障碍、有无创面弥漫性渗血、心肺代偿功能、有无代谢率增高、年龄因素、输血目的等。)</div>
        <el-input v-model="formData.otherReason" type="textarea" :rows="3" placeholder="" />
      </div>
    </div>

    <div class="section">
      <div class="section-title">病人最近检查结果</div>
      <div class="two-col">
        <div class="form-item-column">
          <div class="text">HGB：</div>
          <div class="input-with-unit">
            <el-input v-model="formData.hgbValue" placeholder="">
              <template #suffix>
                g/L
              </template>
            </el-input>
          </div>
        </div>

        <div class="form-item-column">
          <div class="text">HCT：</div>
          <div class="input-with-unit">
            <el-input v-model="formData.hgbExpect" placeholder="">
              <template #suffix>
                %
              </template>
            </el-input>
          </div>
        </div>
        <div class="form-item-column">
          <div class="text">PLT：</div>
          <div class="input-with-unit">
            <el-input v-model="formData.estimatedVolume" placeholder="">
              <template #suffix>
                X10^9/L
              </template>
            </el-input>
          </div>
        </div>
        <div class="form-item-column">
          <div class="text">APTT：</div>
          <div class="input-with-unit">
            <el-input v-model="formData.aptt" placeholder="">
              <template #suffix>
                秒
              </template>
            </el-input>
          </div>
        </div>
      </div>
      <div class="two-col">
        <div class="form-item-column">
          <div class="text">ALT：</div>
          <div class="input-with-unit">
            <el-input v-model="formData.altValue" placeholder="">
              <template #suffix>
                U/L
              </template>
            </el-input>
          </div>
        </div>
        <div class="form-item-column">
          <div class="text">HBsAg：</div>
          <div class="input-with-unit">
            <el-select v-model="formData.hbsAg" placeholder="请选择">
              <el-option label="阴性" value="negative" />
              <el-option label="阳性" value="positive" />
            </el-select>
          </div>
        </div>
        <div class="form-item-column">
          <div class="text">TP：</div>
          <div class="input-with-unit">
            <el-select v-model="formData.tp" placeholder="请选择">
              <el-option label="阴性" value="negative" />
              <el-option label="阳性" value="positive" />
            </el-select>
          </div>
        </div>
        <div class="form-item-column">
          <div class="text">FIB：</div>
          <div class="input-with-unit">
            <el-input v-model="formData.fib" placeholder="">
              <template #suffix>
                g/L
              </template>
            </el-input>
          </div>
        </div>
      </div>
      <div class="two-col">
        <div class="form-item-column">
          <div class="text">Anti-HCV：</div>
          <div class="input-with-unit">
            <el-select v-model="formData.antiHcv" placeholder="请选择">
              <el-option label="阴性" value="negative" />
              <el-option label="阳性" value="positive" />
            </el-select>
          </div>
        </div>
        <div class="form-item-column">
          <div class="text">Anti-HIV：</div>
          <div class="input-with-unit">
            <el-select v-model="formData.antiHiv" placeholder="请选择">
              <el-option label="阴性" value="negative" />
              <el-option label="阳性" value="positive" />
            </el-select>
          </div>
        </div>
        <div class="form-item-column">
          <div class="text">PT：</div>
          <div class="input-with-unit">
            <el-input v-model="formData.pt" placeholder="">
              <template #suffix>
                U
              </template>
            </el-input>
          </div>
        </div>
        <div class="form-item-column">
          <div class="text">INR：</div>
          <div class="input-with-unit">
            <el-input v-model="formData.inr" placeholder="" />
          </div>
        </div>
      </div>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确定</el-button>
        <el-button @click="visible = false">取消</el-button>
      </div>
    </div>


  </div>


</template>

<script setup lang="ts">
import dayjs from 'dayjs'

const type = ref<'operation' | 'nonOperation'>('operation')

// 基础信息数据
const baseInfo = reactive({
  assessmentNo: '',
  name: '',
  department: '',
  assessmentDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  bedNo: '',
  ward: '',
  doctorName: '',
  age: '',
  bloodType: '',
  hospitalId: '',
  diagnosis: '',
  rhD: '待查' // Rh(D)
})

// 表单数据
const formData = reactive({
  bleedingVolume: '',
  purpose: '',
  anemiaDegree: '',
  bloodType: '', // 血液品种
  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, {
    name: '',
    department: '',
    assessmentDate: new Date().toLocaleString(),
    bedNo: '',
    ward: '',
    age: '',
    bloodType: '',
    hospitalId: '',
    diagnosis: '',
    rhD: ''
  })
  // 重置表单
  Object.assign(formData, {
    bleedingVolume: '',
    purpose: '',
    anemiaDegree: '',
    bloodType: '',
    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 handleSubmit = () => {
  console.log('基础信息：', baseInfo)
  console.log('表单数据：', formData)
}

</script>

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

  .tab-switch {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;

    .tab-item {
      width: 120px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: #f5f7fa;
      border: 1px solid #dcdfe6;
      cursor: pointer;
      position: relative;

      &:first-child {
        border-radius: 4px 0 0 4px;
        border-right: none;
      }

      &:last-child {
        border-radius: 0 4px 4px 0;
      }

      &.active {
        background: #e6f7ff;
        border-color: #91d5ff;
        color: #1890ff;
      }

      .check-icon {
        position: absolute;
        right: 4px;
        bottom: 2px;
        font-size: 12px;
        color: #1890ff;
      }
    }
  }

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

    .section-title {
      font-size: 14px;
      font-weight: 600;
      color: #303133;
      padding: 6px 0;
      // margin-bottom: 8px;

      &::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: 20px;
      margin-bottom: 8px;

      &.three-col {
        .form-item {
          flex: 1;
        }
      }

      &.checkbox-row {
        align-items: center;

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

    .two-col {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;

      .form-item-column {
        flex: 1;

        .text {
          color: #80868d;
          font-weight: 700;
          margin: 6px 0;
        }
      }
    }

    .tips {
      color: #f00;
    }

    .form-item {
      display: flex;
      align-items: center;
      gap: 8px;

      &.full-width {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;

        label {
          margin-bottom: 6px;
        }

        .el-textarea {
          width: 100%;
        }
      }

      label {
        width: 80px;
        text-align: right;
        color: #686f77;
        white-space: nowrap;
        font-weight: 500;
      }

      span {
        font-weight: 700;
        color: #284160;
        padding-left: 30px;
      }

      .el-input,
      .el-select,
      .el-date-picker {
        flex: 1;
      }
    }

    .input-with-unit {
      display: flex;
      align-items: center;
      flex: 1;

      .el-input {
        flex: 1;
      }

      .input-unit {
        color: #5a616a;
      }
    }

    .checkbox-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .mt-10 {
      margin-top: 10px;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
}
</style>