<template>
  <div class="medical-form">
    <div class="patient-name">
      患者姓名：{{ patient?.patientName || '未知' }} &nbsp;&nbsp; 病历号：{{
        patient?.busNo || '未知'
      }}
    </div>
    <h2 style="text-align: center">{{ userStore.hospitalName }}</h2>

    <h2 style="text-align: center">门诊病历</h2>

    <!-- 滚动内容区域 -->
    <div class="form-scroll-container">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
        label-align="left"
        class="medical-full-form"
      >
        <h4 class="section-title">基础信息</h4>
        <!-- 1. 基础信息：单行自适应排列 -->
        <el-form-item class="form-section">
          <div class="single-row-layout">
            <el-form-item label="呼吸" prop="breathe" class="row-item">
              <div class="input-with-unit">
                <el-input v-model="formData.breathe" type="text" placeholder="请输入" />
                <span class="unit">次/分</span>
              </div>
            </el-form-item>
            <!-- <el-form-item label="血压" prop="blood" class="row-item">
              <div class="input-with-unit">
                <el-input v-model="formData.blood" type="text" placeholder="请输入" />
                <span class="unit">mmHg</span>
              </div>
            </el-form-item> -->
            <el-form-item label="血压" prop="blood" class="row-item">
              <div class="input-with-unit blood-input-group">
                <el-input
                  v-model="formData.bloodHigh"
                  type="text"
                  placeholder="高压"
                  style="width: 80px"
                />
                <span class="divider">/</span>
                <el-input
                  v-model="formData.bloodLow"
                  type="text"
                  placeholder="低压"
                  style="width: 80px"
                />
                <span class="unit">(高/低)mmHg</span>
              </div>
            </el-form-item>
            <el-form-item label="体温" prop="temperature" class="row-item">
              <div class="input-with-unit">
                <el-input v-model="formData.temperature" type="text" placeholder="请输入" />
                <span class="unit">℃</span>
              </div>
            </el-form-item>
            <el-form-item label="脉搏" prop="pulse" class="row-item">
              <div class="input-with-unit">
                <el-input v-model="formData.pulse" type="text" placeholder="请输入" />
                <span class="unit">次/分</span>
              </div>
            </el-form-item>
            <el-form-item label="就诊日期" prop="onsetDate" class="row-item">
              <el-date-picker
                v-model="formData.onsetDate"
                type="date"
                placeholder="选择就诊日期"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
              <!-- <el-input v-model="formData.onsetDate" type="date" /> -->
            </el-form-item>
          </div>
        </el-form-item>
        <h4 class="section-title">病史信息</h4>
        <!-- 2. 病史信息：单行自适应排列（新增调整） -->
        <el-form-item class="form-section">
          <div class="single-row-layout">
            <el-form-item label="现病史" prop="presentIllness" class="row-item history-item">
              <el-input
                v-model="formData.presentIllness"
                type="textarea"
                placeholder="无"
                autosize
              />
            </el-form-item>
            <el-form-item label="既往史" prop="pastIllness" class="row-item history-item">
              <el-input v-model="formData.pastIllness" type="textarea" placeholder="无" autosize />
            </el-form-item>
            <el-form-item label="个人史" prop="personalHistory" class="row-item history-item">
              <el-input
                v-model="formData.personalHistory"
                type="textarea"
                placeholder="无"
                autosize
              />
            </el-form-item>
            <el-form-item label="过敏史" prop="allergyHistory" class="row-item history-item">
              <el-input
                v-model="formData.allergyHistory"
                type="textarea"
                placeholder="无"
                autosize
              />
            </el-form-item>
            <el-form-item label="家族史" prop="familyHistory" class="row-item history-item">
              <el-input
                v-model="formData.familyHistory"
                type="textarea"
                placeholder="无"
                autosize
              />
            </el-form-item>
          </div>
        </el-form-item>
        <h4 class="section-title">主诉、处置、辅助检查</h4>
        <!-- 3. 主诉（必填） -->
        <el-form-item label="主诉" prop="complaint" class="required form-item-single">
          <el-input
            v-model="formData.complaint"
            type="textarea"
            placeholder="请输入主诉"
            class="tall-textarea"
            autosize
          />
        </el-form-item>
        <!-- 4. 查体、处理、辅助检查 -->
        <!-- <el-form-item label="查体(治疗)" prop="physicalExam" class="form-item-single">
          <el-input
            v-model="formData.physicalExam"
            type="textarea"
            placeholder="请输入查体结果"
            class="tall-textarea"
            autosize
          />
        </el-form-item> -->

        <el-form-item label="处置" prop="treatment" class="form-item-single">
          <el-input
            v-model="formData.treatment"
            type="textarea"
            placeholder="请输入处理方案"
            class="tall-textarea"
            autosize
          />
        </el-form-item>

        <el-form-item label="辅助检查" prop="auxiliaryExam" class="form-item-single">
          <el-input
            v-model="formData.auxiliaryExam"
            type="textarea"
            placeholder="请输入辅助检查结果"
            class="tall-textarea"
            autosize
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {onBeforeMount, onMounted, reactive, ref, watch} from 'vue';
import useUserStore from '../store/modules/user';
import {ElForm, ElFormItem, ElInput, ElMessage} from 'element-plus';
import {patientInfo} from '../views/doctorstation/components/store/patient';

defineOptions({
  name: 'OutpatientMedicalRecord1.1',
  components: { ElInput, ElMessage, ElForm, ElFormItem },
});

// // Props与事件,去掉props.patientInfo改为直接从store获取
// const props = defineProps({
//   patientInfo: {
//     type: Object,
//     required: true,
//   },
// });
const props = defineProps({});
const emits = defineEmits(['submitOk']);

// 数据初始化
const userStore = useUserStore();
const patient = ref(null);
const formRef = ref(null);

// 表单数据（全部字符类型）
const formData = reactive({
  breathe: '', // 呼吸
  bloodHigh: '', //高压
  bloodLow: '', //低压
  temperature: '', // 体温
  pulse: '', // 脉搏
  onsetDate: '', // 就诊日期
  complaint: '', // 主诉（必填）
  presentIllness: '', // 现病史
  pastIllness: '', // 既往史
  personalHistory: '', // 个人史
  allergyHistory: '', // 过敏史
  physicalExam: '', // 查体
  treatment: '', // 处理
  auxiliaryExam: '', // 辅助检查
  familyHistory: '', // 家族史
});

// 表单校验规则
const rules = reactive({
  complaint: [
    {
      required: true,
      message: '请填写主诉',
      trigger: ['blur', 'submit'],
    },
  ],
});

// 提交函数
const submit = () => {
  formRef.value.validate((isValid) => {
    if (isValid) {
      emits('submitOk', formData);
    }
  });
};
// 日期格式化工具
const formatDateTime = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hour = String(date.getHours()).padStart(2, '0');
  const minute = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${minute}`;
};
// 表单数据赋值
const setFormData = (data) => {
  if (data) {
    Object.assign(formData, data);
  }
};

// 生命周期
onBeforeMount(() => {});
onMounted(() => {
  console.log('当前患者信息:', patientInfo);
  patient.value = patientInfo.value;
  // 初始化发病日期为当前时间
  if (!formData.onsetDate) {
    formData.onsetDate = formatDateTime(new Date());
  }
});

// 监听患者信息变化，实现联动显示
watch(
  () => patientInfo.value,
  (newPatientInfo) => {
    patient.value = newPatientInfo;
  },
  { deep: true }
);

// 暴露接口
defineExpose({ formData, submit, setFormData });
</script>

<style scoped>
/* 表单外层容器 */
.medical-form {
  max-width: 1200px;
  width: 100%;
  min-height: 800px;
  height: 900px;
  margin: 15px auto;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  overflow: visible;
}

/* 顶部姓名样式 */
.patient-name {
  display: inline-block;
  margin-bottom: 15px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* 滚动内容容器 */
.form-scroll-container {
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f5f5f5;
}
.form-scroll-container::-webkit-scrollbar {
  width: 6px;
}
.form-scroll-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}
.form-scroll-container::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

/* 完整表单容器 */
.medical-full-form {
  width: 100%;
}

/* 区域通用样式 */
.form-section {
  margin-bottom: 20px;
}
.section-title {
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
  font-size: 16px;
  font-weight: bold;
}

/* 通用单行自适应布局（基础信息+病史信息共用） */
.single-row-layout {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  align-items: flex-start; /* 顶部对齐，适配文本域高度 */
  gap: 15px; /* 统一元素间距 */
}
.row-item {
  margin-bottom: 0; /* 取消底部间距，避免换行重叠 */
  display: flex;
  flex-direction: column;
}
.blood-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.blood-input-group .el-input {
  flex: none;
}

.divider {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}

.unit {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  font-size: 14px;
}

/* 基础信息项：适配短输入框 */
.row-item:not(.history-item) {
  min-width: 160px; /* 基础信息项最小宽度 */
}

/* 病史信息项：适配文本域，设置更大最小宽度 */
.history-item {
  min-width: 220px; /* 确保文本域有足够宽度 */
}

/* 带单位的输入框样式 */
.input-with-unit {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.input-with-unit .el-input {
  flex: 1;
}
.unit {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  font-size: 14px;
}

/* 单行表单项样式（主诉、查体等） */
.form-item-single {
  margin-bottom: 18px;
}

/* 文本域高度控制 */
.tall-textarea {
  --el-input-textarea-min-height: 100px;
}
/* 病史信息文本域：适当降低高度，适配单行布局 */
.history-item .el-input__inner {
  --el-input-textarea-min-height: 60px;
}

/* 必填项红色星号 */
.required .el-form-item__label::before {
  content: '* ';
  color: #ff4d4f;
}

/* 输入框统一样式 */
.el-form-item .el-input,
.el-form-item .el-input__wrapper {
  width: 100%;
  box-sizing: border-box;
}
.el-form-item .el-input__inner {
  font-size: 14px;
  padding: 8px 12px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .medical-form {
    height: 80vh;
    padding: 10px;
  }
  .form-scroll-container {
    height: calc(100% - 35px);
  }
  .el-form {
    label-width: 70px !important;
  }
  .row-item:not(.history-item) {
    min-width: 130px;
  }
  .history-item {
    min-width: 100%; /* 移动端病史信息全屏宽度，单行显示 */
  }
  .form-item-single,
  .form-section {
    margin-bottom: 15px;
  }
  .tall-textarea {
    --el-input-textarea-min-height: 80px;
  }
}
</style>
