<!--
 * @Author: sjjh
 * @Date: 2025-10-08 23:33:29
 * @Description: 护理记录单
-->
<template>
  <div class="container">
    <div class="header">
      <h2 class="title">乾安县人民医院</h2>
      <h3 class="subtitle">患者护理记录单</h3>
    </div>

    <el-form :model="state.formData" label-position="top" class="nursing-form">
      <!-- 患者基本信息 -->
      <div class="patient-info">
        <el-row :gutter="20">
          <el-col :span="2">
            <el-form-item label="姓名">
              <el-input v-model="state.formData.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="年龄">
              <el-input v-model="state.formData.age" placeholder="请输入年龄"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="性别">
              <el-select v-model="state.formData.gender" placeholder="请选择性别">
                <el-option label="男" value="male"></el-option>
                <el-option label="女" value="female"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="病区">
              <el-input v-model="state.formData.ward" placeholder="请输入病区"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="床号">
              <el-input v-model="state.formData.bedNumber" placeholder="请输入床号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="住院号">
              <el-input
                v-model="state.formData.hospitalNumber"
                placeholder="请输入住院号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="入院诊断">
              <el-input v-model="state.formData.diagnosis" placeholder="请输入入院诊断"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 基本信息记录表格 -->
      <div class="vital-signs-table">
        <el-table :data="state.vitalSigns" border style="width: 100%">
          <el-table-column label="日期" width="100">
            <template #default="scope">
              <el-date-picker
                v-model="scope.row.date"
                type="date"
                placeholder="选择日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              ></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="时间" width="100">
            <template #default="scope">
              <el-time-picker
                v-model="scope.row.time"
                placeholder="选择时间"
                format="HH:mm"
                value-format="HH:mm"
                style="width: 100%"
              ></el-time-picker>
            </template>
          </el-table-column>
          <el-table-column label="基本信息">
            <el-table-column label="意识" width="80">
              <template #default="scope">
                <el-select v-model="scope.row.consciousness" placeholder="选择">
                  <el-option label="清醒" value="清醒"></el-option>
                  <el-option label="嗜睡" value="嗜睡"></el-option>
                  <el-option label="昏迷" value="昏迷"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="体温℃" width="80">
              <template #default="scope">
                <el-input v-model="scope.row.temperature" placeholder="体温"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="心率次/分" width="100">
              <template #default="scope">
                <el-input v-model="scope.row.heartRate" placeholder="心率"></el-input>
              </template>
            </el-table-column>
              <el-table-column label="脉搏次/分" width="100">
              <template #default="scope">
                <el-input v-model="scope.row.heartRate" placeholder="心率"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="呼吸次/分" width="100">
              <template #default="scope">
                <el-input v-model="scope.row.respiratoryRate" placeholder="呼吸"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="血压mmHg" width="120">
              <template #default="scope">
                <el-input v-model="scope.row.bloodPressure" placeholder="血压"></el-input>
              </template>
            </el-table-column>
             <el-table-column label="血氧饱和度" width="120">
              <template #default="scope">
                <el-input v-model="scope.row.bloodPressure" placeholder="血压"></el-input>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="氧疗L/min" width="200">
            <el-table-column label="方式" >
              <template #default="scope">
                <el-select v-model="scope.row.oxygenMethod" placeholder="选择">
                  <el-option label="鼻导管" value="鼻导管"></el-option>
                  <el-option label="面罩" value="面罩"></el-option>
                  <el-option label="无" value="无"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="流量" width="80">
              <template #default="scope">
                <el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
              </template>
            </el-table-column>
          </el-table-column>
           <el-table-column label="入量" width="200">
            <el-table-column label="名称" >
              <template #default="scope">
                <el-select v-model="scope.row.oxygenMethod" placeholder="选择">
                  <el-option label="鼻导管" value="鼻导管"></el-option>
                  <el-option label="面罩" value="面罩"></el-option>
                  <el-option label="无" value="无"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="ml" width="80">
              <template #default="scope">
                <el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
              </template>
            </el-table-column>
                <el-table-column label="途径" width="80">
              <template #default="scope">
                <el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
              </template>
            </el-table-column>
          </el-table-column>
             <el-table-column label="出量" width="200">
            <el-table-column label="名称" >
              <template #default="scope">
                <el-select v-model="scope.row.oxygenMethod" placeholder="选择">
                  <el-option label="鼻导管" value="鼻导管"></el-option>
                  <el-option label="面罩" value="面罩"></el-option>
                  <el-option label="无" value="无"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="ml" width="80">
              <template #default="scope">
                <el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
              </template>
            </el-table-column>
          </el-table-column>
            <el-table-column label="皮肤情况" width="80">
              <template #default="scope">
                <el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
              </template>
            </el-table-column>
                 <el-table-column label="管路护理" width="80">
              <template #default="scope">
                <el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
              </template>
            </el-table-column>
                 <el-table-column label="病情与措施" width="80">
              <template #default="scope">
                <el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
              </template>
            </el-table-column>
          <el-table-column label="护士签名" width="100">
            <template #default="scope">
              <el-input v-model="scope.row.nurseSignature" placeholder="签名"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="scope">
              <el-button type="danger" size="small" @click="removeVitalSign(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="add-row">
          <el-button type="primary" @click="addVitalSign">添加记录</el-button>
        </div>
      </div>

      <!-- 表单底部按钮 -->
      <div class="form-actions">
        <div>
          一、意识:①清醒；②嗜睡；③意识模糊；④昏睡；⑤谗妄；⑥浅昏迷；⑦中度昏迷；⑧深昏迷；⑨全麻未醒；⑩镇静。
        </div>
         <div>
          二、氧疗方式:①鼻导管；②面罩；③HFNC；④HIPPV；⑤IMV。
        </div>
         <div>
          三、皮肤情况:①完好；②压疮；③出血点；④破损；⑤水肿；⑥瘀斑；⑦过敏；⑧其他。
        </div>
         <div>
          四、管路护理:①胃管；②尿导管；③静脉置管；④吸氧管；⑤“T”管；⑥胸腔引流管；⑦腹腔引流管；⑧伤口引流管；⑨脑室引流管；⑩其他。
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup>
defineOptions({
  name: 'NursingRecordSheet',
});
import { getCurrentInstance, onBeforeMount, onMounted, reactive } from 'vue';
const { proxy } = getCurrentInstance();
const emits = defineEmits([]);
const props = defineProps({
  patientId: {
    type: String,
    default: '',
  },
});

// 表单数据
const state = reactive({
  formData: {
    name: '',
    age: '',
    gender: '',
    ward: '',
    bedNumber: '',
    hospitalNumber: '',
    diagnosis: '',
  },
  vitalSigns: [
    {
      date: new Date().toISOString().split('T')[0],
      time: new Date().toTimeString().slice(0, 5),
      consciousness: '清醒',
      temperature: '',
      heartRate: '',
      respiratoryRate: '',
      bloodPressure: '',
      oxygenMethod: '无',
      flowRate: '',
      nurseSignature: '',
    },
  ],
  
});

// 添加生命体征记录
const addVitalSign = () => {
  state.vitalSigns.push({
    date: new Date().toISOString().split('T')[0],
    time: new Date().toTimeString().slice(0, 5),
    consciousness: '清醒',
    temperature: '',
    heartRate: '',
    respiratoryRate: '',
    bloodPressure: '',
    oxygenMethod: '无',
    flowRate: '',
    nurseSignature: '',
  });
};

// 删除生命体征记录
const removeVitalSign = (index) => {
  state.vitalSigns.splice(index, 1);
  if (state.vitalSigns.length === 0) {
    addVitalSign();
  }
};



// 重置表单
const resetForm = () => {
  state.formData = {
    name: '',
    age: '',
    gender: '',
    ward: '',
    bedNumber: '',
    hospitalNumber: '',
    diagnosis: '',
  };
  state.vitalSigns = [
    {
      date: new Date().toISOString().split('T')[0],
      time: new Date().toTimeString().slice(0, 5),
      consciousness: '清醒',
      temperature: '',
      heartRate: '',
      respiratoryRate: '',
      bloodPressure: '',
      oxygenMethod: '无',
      flowRate: '',
      nurseSignature: '',
    },
  ];
};

onBeforeMount(() => {
  // 如果有patientId，可以在这里加载患者数据
  if (props.patientId) {
    // 加载患者数据的逻辑
  }
});

onMounted(() => {
  // 组件挂载后的逻辑
});

defineExpose({ state });
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  background-color: #fff;
}

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

  .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
  }

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

.nursing-form {
  .patient-info {
    padding: 15px; 
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }

  .vital-signs-table
  {
    margin-bottom: 20px;

    h4 {
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: bold;
    }

    .add-row {
      margin-top: 10px;
      text-align: center;
    }
  }

  .form-actions {
    margin-top: 30px;
    text-align: left;
  }
}
</style>
