<template>
  <div class="medical-form">
    <h2 style="text-align: center;">{{ userStore.hospitalName || '长春市朝阳区中医院' }} -入院记录</h2>
    
    <!-- 滚动内容区域 -->
    <div class="form-scroll-container">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="80px"
        label-align="left"
        class="medical-full-form"
      >
        <!-- 1. 基础信息区域（自适应两列布局） -->
        <h4 class="section-title">基础信息</h4>
        <div class="adaptive-grid form-section">
          <el-form-item label="姓名" prop="patientName" class="grid-item required">
            <el-input 
              v-model="formData.patientName" 
              placeholder="请输入姓名" 
              clearable
            />
          </el-form-item>
          <el-form-item label="住院号" prop="hospitalNo" class="grid-item required">
            <el-input 
              v-model="formData.hospitalNo" 
              placeholder="请输入住院号" 
              clearable
            />
          </el-form-item>
          <el-form-item label="性别" prop="gender" class="grid-item required">
            <el-select v-model="formData.gender" placeholder="请选择" style="width: 100%;">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年龄" prop="age" class="grid-item required">
            <div class="input-with-unit">
              <el-input 
                v-model.number="formData.age" 
                placeholder="请输入年龄" 
                clearable
              />
              <span class="unit">岁</span>
            </div>
          </el-form-item>
          <el-form-item label="民族" prop="nation" class="grid-item">
            <el-input 
              v-model="formData.nation" 
              placeholder="请输入民族" 
              clearable
            />
          </el-form-item>
          <el-form-item label="职业" prop="occupation" class="grid-item">
            <el-input 
              v-model="formData.occupation" 
              placeholder="请输入职业" 
              clearable
            />
          </el-form-item>
          <el-form-item label="婚姻状况" prop="marriage" class="grid-item">
            <el-select v-model="formData.marriage" placeholder="请选择" clearable style="width: 100%;">
              <el-option label="已婚" value="已婚"></el-option>
              <el-option label="未婚" value="未婚"></el-option>
              <el-option label="离异" value="离异"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生地" prop="birthplace" class="grid-item">
            <el-input 
              v-model="formData.birthplace" 
              placeholder="请输入出生地" 
              clearable
            />
          </el-form-item>
          <el-form-item label="入院时间" prop="admissionTime" class="grid-item required">
            <el-date-picker 
              v-model="formData.admissionTime" 
              type="datetime" 
              placeholder="选择入院时间" 
              value-format="YYYY-MM-DD HH:mm"
              style="width: 100%;"
            />
          </el-form-item>
          <el-form-item label="记录时间" prop="recordTime" class="grid-item required">
            <el-date-picker 
              v-model="formData.recordTime" 
              type="datetime" 
              placeholder="选择记录时间" 
              value-format="YYYY-MM-DD HH:mm"
              style="width: 100%;"
            />
          </el-form-item>
          <el-form-item label="病史陈述者" prop="historyReporter" class="grid-item">
            <el-input 
              v-model="formData.historyReporter" 
              placeholder="请输入陈述者" 
              clearable
            />
          </el-form-item>
          <el-form-item label="可靠程度" prop="reliability" class="grid-item">
            <el-select v-model="formData.reliability" placeholder="请选择" style="width: 100%;">
              <el-option label="可靠" value="可靠"></el-option>
              <el-option label="基本可靠" value="基本可靠"></el-option>
              <el-option label="不可靠" value="不可靠"></el-option>
            </el-select>
          </el-form-item>
        </div>

        <!-- 2. 病史信息 -->
        <h4 class="section-title">病史信息</h4>
        <div class="form-section">
          <el-form-item label="主诉" prop="complaint" class="history-item required">
            <el-input 
              v-model="formData.complaint" 
              type="textarea" 
              placeholder="请输入主诉" 
              autosize
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
          
          <el-form-item label="现病史" prop="presentIllness" class="history-item">
            <el-input 
              v-model="formData.presentIllness" 
              type="textarea" 
              placeholder="请详细描述现病史" 
              autosize
              maxlength="1000"
              show-word-limit
            />
          </el-form-item>
          
          <el-form-item label="既往史" prop="pastHistory" class="history-item">
            <el-input 
              v-model="formData.pastHistory" 
              type="textarea" 
              placeholder="请输入既往史" 
              autosize
              maxlength="800"
              show-word-limit
            />
          </el-form-item>
          
          <el-form-item label="个人史" prop="personalHistory" class="history-item">
            <el-input 
              v-model="formData.personalHistory" 
              type="textarea" 
              placeholder="请输入个人史" 
              autosize
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
          
          <el-form-item label="婚育史" prop="maritalHistory" class="history-item">
            <el-input 
              v-model="formData.maritalHistory" 
              type="textarea" 
              placeholder="请输入婚育史" 
              autosize
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
          
          <el-form-item label="月经史" prop="menstrualHistory" class="history-item">
            <el-input 
              v-model="formData.menstrualHistory" 
              type="textarea" 
              placeholder="请输入月经史" 
              autosize
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
          
          <el-form-item label="家族史" prop="familyHistory" class="history-item">
            <el-input 
              v-model="formData.familyHistory" 
              type="textarea" 
              placeholder="请输入家族史" 
              autosize
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
        </div>

        <!-- 3. 中医望闻问切 -->
        <h4 class="section-title">中医望闻问切</h4>
        <div class="form-section">
          <el-form-item label="望闻问切" prop="tcmInfo" class="history-item">
            <el-input 
              v-model="formData.tcmInfo" 
              type="textarea" 
              placeholder="请输入中医望闻问切结果" 
              autosize
              maxlength="600"
              show-word-limit
            />
          </el-form-item>
        </div>

        <!-- 4. 体格检查 -->
        <h4 class="section-title">体格检查</h4>
        <div class="form-section">
          <div class="adaptive-grid">
            <el-form-item label="体温" prop="temp" class="grid-item">
              <div class="input-with-unit">
                <el-input 
                  v-model.number="formData.temp" 
                  type="number" 
                  step="0.1" 
                  placeholder="如36.0" 
                  clearable
                />
                <span class="unit">℃</span>
              </div>
            </el-form-item>
            
            <el-form-item label="脉搏" prop="pulse" class="grid-item">
              <div class="input-with-unit">
                <el-input 
                  v-model.number="formData.pulse" 
                  type="number" 
                  placeholder="如76" 
                  clearable
                />
                <span class="unit">次/分</span>
              </div>
            </el-form-item>
            
            <el-form-item label="呼吸" prop="respiration" class="grid-item">
              <div class="input-with-unit">
                <el-input 
                  v-model.number="formData.respiration" 
                  type="number" 
                  placeholder="如16" 
                  clearable
                />
                <span class="unit">次/分</span>
              </div>
            </el-form-item>
            
            <el-form-item label="血压" prop="bp" class="grid-item">
              <div class="input-with-unit">
                <el-input 
                  v-model="formData.bp" 
                  placeholder="如188/94" 
                  clearable
                  @blur="validateBloodPressure"
                />
                <span class="unit">mmHg</span>
              </div>
            </el-form-item>
            
            <el-form-item label="身高" prop="height" class="grid-item">
              <div class="input-with-unit">
                <el-input 
                  v-model.number="formData.height" 
                  type="number" 
                  placeholder="如165" 
                  clearable
                />
                <span class="unit">cm</span>
              </div>
            </el-form-item>
            
            <el-form-item label="体重" prop="weight" class="grid-item">
              <div class="input-with-unit">
                <el-input 
                  v-model.number="formData.weight" 
                  type="number" 
                  placeholder="如79" 
                  clearable
                />
                <span class="unit">kg</span>
              </div>
            </el-form-item>
            
            <el-form-item label="BMI" prop="bmi" class="grid-item">
              <div class="input-with-unit">
                <el-input 
                  v-model="formData.bmi" 
                  placeholder="如29.02" 
                  readonly
                />
                <span class="unit">kg/m²</span>
              </div>
            </el-form-item>
          </div>

          <el-form-item label="一般情况" prop="general" class="history-item">
            <el-input 
              v-model="formData.general" 
              type="textarea" 
              placeholder="请输入一般情况" 
              autosize
              maxlength="300"
              show-word-limit
            />
          </el-form-item>
          
          <el-form-item label="皮肤粘膜" prop="skin" class="history-item">
            <el-input 
              v-model="formData.skin" 
              type="textarea" 
              placeholder="请输入皮肤粘膜情况" 
              autosize
              maxlength="300"
              show-word-limit
            />
          </el-form-item>
          
          <el-form-item label="胸部（心、肺）" prop="chest" class="history-item">
            <el-input 
              v-model="formData.chest" 
              type="textarea" 
              placeholder="请输入胸部检查结果" 
              autosize
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
          
          <el-form-item label="腹部" prop="abdomen" class="history-item">
            <el-input 
              v-model="formData.abdomen" 
              type="textarea" 
              placeholder="请输入腹部检查结果" 
              autosize
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
          
          <el-form-item label="四肢/神经系统" prop="limbsNervous" class="history-item">
            <el-input 
              v-model="formData.limbsNervous" 
              type="textarea" 
              placeholder="请输入四肢及神经系统检查结果" 
              autosize
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
        </div>

        <!-- 5. 辅助检查 -->
        <h4 class="section-title">辅助检查</h4>
        <div class="form-section">
          <el-form-item label="检查结果" prop="auxExam" class="history-item">
            <el-input 
              v-model="formData.auxExam" 
              type="textarea" 
              placeholder="请输入辅助检查结果" 
              autosize
              maxlength="1000"
              show-word-limit
            />
          </el-form-item>
        </div>

        <!-- 6. 初步诊断 -->
        <h4 class="section-title">初步诊断</h4>
        <div class="form-section">
          <el-form-item label="中医诊断" prop="tcmDiagnosis" class="history-item">
            <el-input 
              v-model="formData.tcmDiagnosis" 
              type="textarea" 
              placeholder="如：胸痹心痛（气阴两虚证）" 
              autosize
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
          
          <el-form-item label="西医诊断" prop="westernDiagnosis" class="history-item">
            <el-input 
              v-model="formData.westernDiagnosis" 
              type="textarea" 
              placeholder="如：1.冠状动脉粥样硬化性心脏病" 
              autosize
              maxlength="800"
              show-word-limit
            />
          </el-form-item>
        </div>

        <!-- 7. 签名信息（三列布局） -->
        <h4 class="section-title">签名信息</h4>
        <div class="adaptive-grid form-section" style="grid-template-columns: repeat(3, 1fr);">
          <el-form-item label="医师签名" prop="doctorSign" class="grid-item">
            <el-input 
              v-model="formData.doctorSign" 
              placeholder="请签名" 
              clearable
            />
          </el-form-item>
          
          <el-form-item label="上级医师签名" prop="superiorSign" class="grid-item">
            <el-input 
              v-model="formData.superiorSign" 
              placeholder="请签名" 
              clearable
            />
          </el-form-item>
          
          <el-form-item label="记录日期" prop="signDate" class="grid-item">
            <el-date-picker 
              v-model="formData.signDate" 
              type="datetime" 
              placeholder="选择日期" 
              value-format="YYYY-MM-DD HH:mm"
              style="width: 100%;"
            />
          </el-form-item>
        </div>

        <!-- 新增：表单操作按钮组（重置按钮） -->
        <div class="form-btn-group">
          <el-button type="warning" @click="handleReset">重置表单</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { ElInput, ElSelect, ElOption, ElDatePicker, ElButton, ElMessage, ElMessageBox, ElForm, ElFormItem } from 'element-plus';
import useUserStore from '../store/modules/user';

defineOptions({
  name: 'InHospitalRecord',
  components: { ElInput, ElSelect, ElOption, ElDatePicker, ElButton, ElForm, ElFormItem }
});

// Props与事件
const props = defineProps({
  patientInfo: {
    type: Object,
    required: true,
  },
});

const emits = defineEmits(['submitOk']);

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

// 表单数据
const formData = reactive({
  // 基础信息
  patientName: patient?.name || '',
  hospitalNo: patient?.busNo || '',
  gender: patient?.genderEnum_enumText || '',
  age: patient?.age || '',
  nation: '',
  occupation: '',// 职业
  marriage: '',// 婚姻状况
  birthplace: '',// 出生地
  admissionTime: '',// 入院时间
  recordTime: '',// 记录时间
  historyReporter: '',// 病史陈述者
  reliability: '可靠',// 可靠程度
  // 病史信息
  complaint: '',// 主诉
  presentIllness: '',// 现病史
  pastIllness: '',// 既往史
  personalHistory: '',// 个人史
  allergyHistory: '',// 过敏史
  pastHistory: '',// 既往史
  familyHistory: '',// 家族史
  maritalHistory: '',// 婚姻史
  menstrualHistory: '',// 月经史
  // 中医信息
  tcmInfo: '',
  
  // 体格检查
  temp: '',
  pulse: '',
  respiration: '',
  bp: '',
  height: '',
  weight: '',
  bmi: '',
  general: '',
  skin: '',
  chest: '',
  abdomen: '',
  limbsNervous: '',
  
  // 辅助检查
  auxExam: '',
  
  // 诊断信息
  tcmDiagnosis: '',
  westernDiagnosis: '',
  
  // 签名信息
  doctorSign: '',
  superiorSign: '',
  signDate: ''
});

// 表单校验规则
const rules = reactive({
  name: [
    { required: true, message: '请填写姓名', trigger: ['blur', 'submit'] }
  ],
  hospitalNo: [
    { required: true, message: '请填写住院号', trigger: ['blur', 'submit'] }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: ['change', 'submit'] }
  ],
  age: [
    { required: true, message: '请填写年龄', trigger: ['blur', 'submit'] },
    { type: 'number', min: 1, max: 120, message: '年龄需在1-120岁之间', trigger: ['blur', 'submit'] }
  ],
  admissionTime: [
    { required: true, message: '请选择入院时间', trigger: ['change', 'submit'] }
  ],
  recordTime: [
    { required: true, message: '请选择记录时间', trigger: ['change', 'submit'] }
  ],
  chiefComplaint: [
    { required: true, message: '请填写主诉', trigger: ['blur', 'submit'] }
  ]
});

// 生命周期
onMounted(() => {
  // 初始化记录时间为当前时间
  if (!formData.recordTime) {
    formData.recordTime = formatDateTime(new Date());
  }
  if (!formData.admissionTime) {
    formData.admissionTime = formatDateTime(new Date());
  }
  if (!formData.signDate) {
    formData.signDate = formatDateTime(new Date());
  }
  if (!formData.patientName) {
    formData.patientName = patient?.patientName || '';
    }
    if (!formData.gender) {
    formData.gender = patient?.genderEnum_enumText || '';
    }
    if (!formData.age) {
    formData.age = patient?.age || '';
  }
  if (!formData.hospitalNo) {
    formData.hospitalNo = patient?.busNo || '';
  }
});

// BMI自动计算
watch([() => formData.height, () => formData.weight], ([newHeight, newWeight]) => {
  if (newHeight && newWeight && newHeight > 0 && newWeight > 0) {
    const heightM = newHeight / 100;
    formData.bmi = (newWeight / (heightM * heightM)).toFixed(2);
  } else {
    formData.bmi = '';
  }
});

// 入院时间变化处理
watch(() => formData.admissionTime, (val) => {
  if (val && !formData.recordTime) {
    ElMessageBox.confirm(
      '是否将记录时间同步为入院时间？',
      '时间同步提示',
      {
        confirmButtonText: '同步',
        cancelButtonText: '手动设置',
        type: 'info'
      }
    ).then(() => {
      formData.recordTime = val;
    }).catch(() => {});
  }
});

// 血压格式校验
const validateBloodPressure = () => {
  const bp = formData.bp;
  if (!bp) return;
  const reg = /^\d{2,3}\/\d{2,3}$/;
  if (!reg.test(bp)) {
    ElMessage.warning('血压格式不正确，请输入如 "120/80" 的格式');
    formData.bp = '';
  }
};

// 提交表单
const submit = () => {
  formRef.value.validate((isValid) => {
    if (isValid) {
      // 额外校验血压格式
      if (formData.bp) {
        validateBloodPressure();
        if (!formData.bp) return; // 格式错误时终止提交
      }
      
      emits('submitOk', formData);
      ElMessage.success('记录保存成功！');
    }
  });
};

// 新增：重置表单方法（带确认提示）
const handleReset = () => {
  ElMessageBox.confirm(
    '确定要重置表单吗？所有已填写内容将被清空，且不可恢复',
    '重置确认',
    {
      confirmButtonText: '确认重置',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    }
  ).then(() => {
    // 执行表单重置
    formRef.value.resetFields();
    // 保留患者基础信息和默认值（避免清空关键基础数据）
    formData.patientName = patient?.name || '';
    formData.hospitalNo = patient?.busNo || '';
    formData.gender = patient?.genderEnum_enumText || '';
    formData.age = patient?.age || '';
    formData.reliability = '可靠';
    // 重置时间为当前时间
    const today = new Date();
    formData.admissionTime = formatDateTime(today);
    formData.recordTime = formatDateTime(today);
    formData.signDate = formatDateTime(today);
    // 重置成功提示
    ElMessage.success('表单已成功重置');
  }).catch(() => {
    // 取消重置提示
    ElMessage.info('已取消表单重置');
  });
};

// 表单数据赋值
const setFormData = (data) => {
  if (data) {
    Object.assign(formData, data);
  }
};

// 日期格式化工具
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}`;
};

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

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

/* 滚动内容容器 */
.form-scroll-container {
  height: calc(100% - 80px);
  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: 25px;
  padding: 10px;
  background-color: #fafafa;
  border-radius: 6px;
}
.section-title {
  margin: 0 0 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
  color: #333;
  font-size: 16px;
  font-weight: bold;
}

/* 自适应网格布局（核心调整） */
.adaptive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
}
.grid-item {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.grid-item .el-form-item__content {
  flex: 1;
  min-width: 0; /* 关键：允许内容收缩以适应容器 */
}

/* 病史项目样式 */
.history-item {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.history-item .el-form-item__content {
  width: 100%;
}
.history-item .el-input__inner {
  width: 100%;
  min-height: 40px;
  resize: vertical;
}

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

/* 新增：表单按钮组样式 */
.form-btn-group {
  margin-top: 30px;
  margin-bottom: 15px;
  text-align: center; /* 按钮居中对齐 */
}
.form-btn-group .el-button {
  padding: 8px 20px;
}

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

/* 按钮组 */
.btn-group {
  text-align: center;
  margin-top: 15px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .medical-form {
    height: 80vh;
    padding: 10px;
  }
  .form-scroll-container {
    height: calc(100% - 70px);
  }
  .el-form {
    label-width: 60px !important;
  }
  .adaptive-grid {
    grid-template-columns: 1fr; /* 小屏幕下单列显示 */
  }
  .grid-item, .history-item {
    margin-bottom: 10px;
  }
  /* 小屏幕按钮居中 */
  .form-btn-group {
    text-align: center;
  }
}

/* 中等屏幕调整 */
@media (min-width: 769px) and (max-width: 1024px) {
  .adaptive-grid {
    grid-template-columns: repeat(2, 1fr); /* 中等屏幕下两列显示 */
  }
}
</style>