<!--
 * @Author: sjjh
 * @Date: 2025-09-19 13:04:49
 * @Description: 手术患者移交
-->
<template>
  <div class="surgicalPatientHandover-container">
    <div class="handover-form">
      <div class="form-header">
        <h1 class="hospital-name">**医院</h1>
        <h2 class="form-title">手术患者交接单</h2>
      </div>

      <div class="patient-info">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="info-item">日期：{{ state.formData.date }}</div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">姓名：{{ state.formData.patientName }}</div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">性别：{{ state.formData.sex }}</div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">年龄：{{ state.formData.age }}岁</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="info-item">科室：{{ state.formData.department }}</div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">床号：{{ state.formData.bedNumber }}</div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">住院号：{{ state.formData.hospitalNumber }}</div>
          </el-col>
          <el-col :span="6">
            <div class="info-item">术前诊断：{{ state.formData.preDiagnosis }}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="info-item">拟行手术方式：{{ state.formData.surgeryMethod }}</div>
          </el-col>
        </el-row>
      </div>

      <el-form :model="state.formData" label-width="0" class="handover-form-content">
        <!-- 一、病房护士与手术室护士交接记录 -->
        <div class="form-section">
          <div class="section-title">一、病房护士与手术室护士交接记录</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="form-item">
                <span class="item-label">药物过敏史</span>
                <el-radio-group v-model="state.formData.drugAllergy">
                  <el-radio :label="1">无</el-radio>
                  <el-radio :label="2">有</el-radio>
                </el-radio-group>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="form-item">
                <span v-if="state.formData.drugAllergy === 2"
                  >药物名称：
                  <el-input v-model="state.formData.allergyDrugName" class="inline-input"
                /></span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">身份确认</span>
                <el-checkbox-group v-model="state.formData.identityConfirm">
                  <el-checkbox :label="1">患者姓名核实</el-checkbox>
                  <el-checkbox :label="2">病例核实</el-checkbox>
                  <el-checkbox :label="3">腕带核</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">手术标识</span>
                <el-radio-group v-model="state.formData.surgeryMark">
                  <el-radio
                    v-for="item in getStatisticsOptionList('surgeryMark')"
                    :key="item.dictValue"
                    :label="item.dictValue"
                    >{{ item.dictLabel }}</el-radio
                  >
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">药物使用方法</span>
                <el-select
                  v-model="state.formData.drugMethod"
                  placeholder="Select"
                  style="width: 240px"
                >
                  <el-option
                    v-for="item in getStatisticsOptionList('drugMethod')"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  />
                </el-select>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">生命体征</span>
                <span>
                  <el-input v-model="state.formData.temperature" class="inline-input">
                    <template #prepend>T</template>
                    <template #append>℃</template>
                  </el-input>
                </span>
                <span class="ml-20"
                  ><el-input v-model="state.formData.pulse" class="inline-input">
                    <template #prepend>P</template>
                    <template #append>次/分</template>
                  </el-input></span
                >
                <span class="ml-20"
                  ><el-input v-model="state.formData.respiration" class="inline-input">
                    <template #prepend>R</template>
                    <template #append>次/分</template>
                  </el-input></span
                >
                <span class="ml-20"
                  ><el-input v-model="state.formData.respiration" class="inline-input">
                    <template #prepend>BP</template>
                    <template #append>mmHg</template>
                  </el-input></span
                >
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">意识状态</span>
                <el-checkbox-group v-model="state.formData.consciousness">
                  <el-checkbox :label="1">清醒</el-checkbox>
                  <el-checkbox :label="2">嗜睡</el-checkbox>
                  <el-checkbox :label="3">意识模糊</el-checkbox>
                  <el-checkbox :label="4">躁动</el-checkbox>
                  <el-checkbox :label="5">偏瘫</el-checkbox>
                  <el-checkbox :label="6">昏迷</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">皮肤情况</span>
                <el-checkbox-group v-model="state.formData.skinCondition">
                  <el-checkbox :label="1">正常</el-checkbox>
                  <el-checkbox :label="2">破损</el-checkbox>
                  <el-checkbox :label="3">压力性损伤</el-checkbox>
                  <el-checkbox :label="4">其他</el-checkbox>
                </el-checkbox-group>
                <span v-if="state.formData.skinCondition.includes(4)"
                  >其他： <el-input v-model="state.formData.skinOther" class="inline-input"
                /></span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <div class="form-item">
                <span class="item-label">皮肤情况</span>
                <span>部位</span>
                <el-input
                  v-model="state.formData.skinPosition1"
                  class="inline-input"
                  style="width: 50px"
                />
                <span>面积</span>
                <el-input
                  v-model="state.formData.skinArea1"
                  class="inline-input"
                  style="width: 50px"
                />
                <span>×</span>
                <el-input
                  v-model="state.formData.skinArea2"
                  class="inline-input"
                  style="width: 50px"
                />
              </div>
            </el-col>
            <el-col :span="12">
              <div class="form-item">
                <span>部位</span>
                <el-input
                  v-model="state.formData.skinPosition2"
                  class="inline-input"
                  style="width: 50px"
                />
                <span>面积</span>
                <el-input
                  v-model="state.formData.skinArea3"
                  class="inline-input"
                  style="width: 50px"
                />
                <span>×</span>
                <el-input
                  v-model="state.formData.skinArea4"
                  class="inline-input"
                  style="width: 50px"
                />
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">留置管路</span>
                <el-checkbox-group v-model="state.formData.preOperativePipeline">
                  <el-checkbox :label="1">无</el-checkbox>
                  <el-checkbox :label="2">中心静脉置管</el-checkbox>
                  <el-checkbox :label="3">动脉置管</el-checkbox>
                  <el-checkbox :label="4">气管插管</el-checkbox>
                  <el-checkbox :label="5">胃管</el-checkbox>
                  <el-checkbox :label="6">尿管</el-checkbox>
                  <el-checkbox :label="7">引流管</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">外周静脉通路</span>
                <el-input
                  v-model="state.formData.peripheralVein"
                  class="inline-input"
                  style="width: 50px"
                />
                <span>条</span>
                <el-checkbox-group v-model="state.formData.veinPosition" class="ml-20">
                  <el-checkbox :label="1">右上肢</el-checkbox>
                  <el-checkbox :label="2">右下肢</el-checkbox>
                  <el-checkbox :label="3">左上肢</el-checkbox>
                  <el-checkbox :label="4">左下肢</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">确认事项</span>
                <el-checkbox-group v-model="state.formData.confirmItems">
                  <el-checkbox :label="1">禁食水</el-checkbox>
                  <el-checkbox :label="2">备皮</el-checkbox>
                  <el-checkbox :label="3">无活动义齿</el-checkbox>
                  <el-checkbox :label="4">无随形眼镜</el-checkbox>
                  <el-checkbox :label="5">摘首饰</el-checkbox>
                  <el-checkbox :label="6">非月经期</el-checkbox>
                  <el-checkbox :label="7">病员服</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">携带物品</span>
                <el-checkbox-group v-model="state.formData.carryItems">
                  <el-checkbox :label="1">病例</el-checkbox>
                  <el-checkbox :label="2">药物</el-checkbox>
                  <el-checkbox :label="3">影像资料</el-checkbox>
                  <el-checkbox :label="4">胸/腹带</el-checkbox>
                  <el-checkbox :label="5">血制品</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <div class="form-item">
                <span class="item-label">病房护士签名</span>
                <el-input v-model="state.formData.wardNurseName" class="inline-input" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="form-item">
                <span class="item-label">手术护士签名</span>
                <el-input v-model="state.formData.surgeryNurseName" class="inline-input" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="form-item">
                <span class="item-label">交接时间</span>
                <el-input v-model="state.formData.handoverTime" class="inline-input" />
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 二、手术室护士与麻醉复苏室护士/病房护士交接记录 -->
        <div class="form-section">
          <div class="section-title">二、手术室护士与麻醉复苏室护士/病房护士交接记录</div>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">生命体征</span>
                <span>P</span>
                <el-input
                  v-model="state.formData.postPulse"
                  class="inline-input"
                  style="width: 50px"
                />
                <span>次/分</span>
                <span class="ml-20">R</span>
                <el-input
                  v-model="state.formData.postRespiration"
                  class="inline-input"
                  style="width: 50px"
                />
                <span>次/分</span>
                <span class="ml-20">BP</span>
                <el-input v-model="state.formData.postBloodPressure" class="inline-input" />
                <span>mmHg</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">意识状态</span>
                <el-checkbox-group v-model="state.formData.postConsciousness">
                  <el-checkbox :label="1">清醒</el-checkbox>
                  <el-checkbox :label="2">未清醒</el-checkbox>
                  <el-checkbox :label="3">其他</el-checkbox>
                </el-checkbox-group>
                <span v-if="state.formData.postConsciousness.includes(3)"
                  >其他：
                  <el-input v-model="state.formData.postConsciousnessOther" class="inline-input"
                /></span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">皮肤情况</span>
                <el-checkbox-group v-model="state.formData.postSkinCondition">
                  <el-checkbox :label="1">正常</el-checkbox>
                  <el-checkbox :label="2">破损</el-checkbox>
                  <el-checkbox :label="3">压力性损伤</el-checkbox>
                  <el-checkbox :label="4">其他</el-checkbox>
                </el-checkbox-group>
                <span v-if="state.formData.postSkinCondition.includes(4)"
                  >其他： <el-input v-model="state.formData.postSkinOther" class="inline-input"
                /></span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <div class="form-item">
                <span class="item-label">皮肤情况</span>
                <span>部位</span>
                <el-input
                  v-model="state.formData.postSkinPosition1"
                  class="inline-input"
                  style="width: 50px"
                />
                <span>面积</span>
                <el-input
                  v-model="state.formData.postSkinArea1"
                  class="inline-input"
                  style="width: 50px"
                />
                <span>×</span>
                <el-input
                  v-model="state.formData.postSkinArea2"
                  class="inline-input"
                  style="width: 50px"
                />
              </div>
            </el-col>
            <el-col :span="12">
              <div class="form-item">
                <span>部位</span>
                <el-input
                  v-model="state.formData.postSkinPosition2"
                  class="inline-input"
                  style="width: 50px"
                />
                <span>面积</span>
                <el-input
                  v-model="state.formData.postSkinArea3"
                  class="inline-input"
                  style="width: 50px"
                />
                <span>×</span>
                <el-input
                  v-model="state.formData.postSkinArea4"
                  class="inline-input"
                  style="width: 50px"
                />
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">术后管路</span>
                <el-checkbox-group v-model="state.formData.postOperativePipeline">
                  <el-checkbox :label="1">无</el-checkbox>
                  <el-checkbox :label="2">中心静脉置管</el-checkbox>
                  <el-checkbox :label="3">动脉置管</el-checkbox>
                  <el-checkbox :label="4">气管插管</el-checkbox>
                  <el-checkbox :label="5">胃管</el-checkbox>
                  <el-checkbox :label="6">尿管</el-checkbox>
                  <el-checkbox :label="7">引流管</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">外周静脉通路</span>
                <el-input
                  v-model="state.formData.postPeripheralVein"
                  class="inline-input"
                  style="width: 50px"
                />
                <span>条</span>
                <el-checkbox-group v-model="state.formData.postVeinPosition" class="ml-20">
                  <el-checkbox :label="1">右上肢</el-checkbox>
                  <el-checkbox :label="2">右下肢</el-checkbox>
                  <el-checkbox :label="3">左上肢</el-checkbox>
                  <el-checkbox :label="4">左下肢</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">携带物品</span>
                <el-checkbox-group v-model="state.formData.postCarryItems">
                  <el-checkbox :label="1">病历</el-checkbox>
                  <el-checkbox :label="2">药物</el-checkbox>
                  <el-checkbox :label="3">影像资料</el-checkbox>
                  <el-checkbox :label="4">胸/腹带</el-checkbox>
                  <el-checkbox :label="5">血制品</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <span class="item-label">镇痛泵</span>
                <el-radio-group v-model="state.formData.painPump">
                  <el-radio :label="1">无</el-radio>
                  <el-radio :label="2">有</el-radio>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <div class="form-item">
                <span class="item-label" style="width: 220px">手术室/麻醉复苏室护士签名</span>
                <el-input v-model="state.formData.surgeryRecoveryNurseName" class="inline-input" />
              </div>
            </el-col>
            <el-col :span="12">
              <div class="form-item">
                <span class="item-label">病房护士签名</span>
                <el-input v-model="state.formData.postWardNurseName" class="inline-input" />
              </div>
            </el-col>
            <el-col :span="12">
              <div class="form-item">
                <span class="item-label">病房护士填写</span>
                <span>P</span>
                <el-input
                  v-model="state.formData.wardNursePulse"
                  class="inline-input"
                  style="width: 50px"
                />
                <span>次/分</span>
                <span class="ml-10">BP</span>
                <el-input
                  v-model="state.formData.wardNurseBloodPressure"
                  class="inline-input"
                  style="width: 80px"
                />
                <span>mmHg</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="form-item">
                <span class="item-label">交接时间</span>
                <el-input v-model="state.formData.postHandoverTime" class="inline-input" />
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 其他 -->
        <div class="form-section">
          <div class="section-title">其他</div>
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="form-item">
                <el-checkbox-group v-model="state.formData.otherItems">
                  <el-checkbox :label="1">离院</el-checkbox>
                  <el-checkbox :label="2">死亡</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script setup>
defineOptions({
  name: 'SurgicalPatientHandover',
});
import { getCurrentInstance, onBeforeMount, onMounted, reactive } from 'vue';
import { ElMessageBox, ElMessage, ElLoading, ElTree } from 'element-plus';
import useOptionsList from './useOptionsList';
// import { A } from '../../dist/assets/api-DmiMW8YF';
const { statisticsOptionList, getStatisticsOptionList } = useOptionsList();
const { proxy } = getCurrentInstance();
const emits = defineEmits(['submitOk']);
const props = defineProps({});
const state = reactive({
  formData: {
    // 患者基本信息
    date: '2025/8/13 13:36:41',
    patientName: '于学斌',
    sex: '男',
    age: '46',
    department: '普外科门诊区',
    bedNumber: '035',
    hospitalNumber: '2508000328',
    preDiagnosis: '胆囊结石',
    surgeryMethod: '腹腔镜胆囊切除术',
    // 术前交接记录
    drugAllergy: 1, // 1-无, 2-有
    allergyDrugName: '',
    identityConfirm: [1, 2, 3], // 1-患者姓名核实, 2-病例核实, 3-腕带核
    surgeryMark: 1, // 1-无, 2-有
    temperature: '37.5',
    pulse: '78',
    respiration: '19',
    bloodPressure: '124/76',
    consciousness: [1], // 1-清醒, 2-嗜睡, 3-意识模糊, 4-躁动, 5-偏瘫, 6-昏迷
    skinCondition: [1], // 1-正常, 2-破损, 3-压力性损伤, 4-其他
    skinOther: '',
    skinPosition1: '',
    skinArea1: '',
    skinPosition2: '',
    skinArea2: '',
    preOperativePipeline: [1], // 1-无, 2-中心静脉置管, 3-动脉置管, 4-气管插管, 5-胃管, 6-尿管, 7-引流管
    peripheralVein: '1',
    veinPosition: [1], // 1-右上肢, 2-右下肢, 3-左上肢, 4-左下肢
    confirmItems: [1, 2], // 1-禁食水, 2-备皮, 3-无活动义齿, 4-无随形眼镜, 5-摘首饰, 6-非月经期, 7-病员服
    carryItems: [1, 2], // 1-病例, 2-药物, 3-影像资料, 4-胸/腹带, 5-血制品
    wardNurseName: '周春贺',
    surgeryNurseName: '',
    handoverTime: '2025/8/13 13:40:37',
    // 术后交接记录
    postPulse: '',
    postRespiration: '',
    postBloodPressure: '',
    postConsciousness: [], // 1-清醒, 2-未清醒, 3-其他
    postConsciousnessOther: '',
    postSkinCondition: [], // 1-正常, 2-破损, 3-压力性损伤, 4-其他
    postSkinOther: '',
    postSkinPosition1: '',
    postSkinArea1: '',
    postSkinPosition2: '',
    postSkinArea2: '',
    postOperativePipeline: [], // 1-无, 2-中心静脉置管, 3-动脉置管, 4-气管插管, 5-胃管, 6-尿管, 7-引流管
    postPeripheralVein: '',
    postVeinPosition: [], // 1-右上肢, 2-右下肢, 3-左上肢, 4-左下肢
    postCarryItems: [], // 1-病历, 2-药物, 3-影像资料, 4-胸/腹带, 5-血制品
    painPump: 1, // 1-无, 2-有
    surgeryRecoveryNurseName: '',
    postWardNurseName: '',
    wardNursePulse: '',
    wardNurseBloodPressure: '',
    postHandoverTime: '',
    // 其他
    otherItems: [], // 1-离院, 2-死亡
  },
});

const submit = () => {
  // ElMessage.success('提交成功');
  emits('submitOk', state.formData);
};
const setFormData = (data) => {
  if (data) {
    state.formData = data;
  }
};

onBeforeMount(() => {});
onMounted(() => {
  // { statisticsOptionList,getStatisticsOptionList } =await useOptionsList();
});

defineExpose({ state, submit, setFormData });
</script>
<style lang="scss" scoped>
.surgicalPatientHandover-container {
  padding: 20px;

  .handover-form {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 20px;
    background-color: #fff;

    .form-header {
      text-align: center;
      margin-bottom: 20px;

      .hospital-name {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .form-title {
        font-size: 20px;
        font-weight: bold;
      }
    }

    .patient-info {
      margin-bottom: 20px;

      .info-item {
        line-height: 30px;
      }
    }

    .handover-form-content {
      .form-section {
        margin-bottom: 20px;
        border: 1px solid #ddd;

        .section-title {
          font-weight: bold;
          padding: 10px;
          background-color: #f5f5f5;
          border-bottom: 1px solid #ddd;
        }

        .form-item {
          padding: 10px;
          border-bottom: 1px solid #eee;
          display: flex;
          align-items: center;
          &:last-child {
            border-bottom: none;
          }

          .item-label {
            display: inline-block;
            width: 120px;
            font-weight: bold;
          }

          .inline-input {
            width: 150px;
            margin: 0 5px;
          }

          .ml-10 {
            margin-left: 10px;
          }

          .ml-20 {
            margin-left: 20px;
          }
        }
      }
    }
    :deep(.el-input-group__prepend) {
      padding: 0 8px;
    }
    :deep(.el-input-group__append) {
      padding: 0 8px;
    }
  }
}
</style>
