<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>
  <admissionRecord v-if="isShowprintDom" ref="recordPrintRef"></admissionRecord>
</template>

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

const isShowprintDom = ref(false);
const recordPrintRef = ref();
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}`;
};

// 打印方法
const printFun = () => {
  console.log('入院记录打印');
  isShowprintDom.value = true;
  nextTick(() => {
    recordPrintRef?.value.setData(formData);
    nextTick(() => {
      previewPrint(recordPrintRef?.value.getDom());
      isShowprintDom.value = false;
    });
  });
};

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

<style scoped>
/* 表单外层容器 */
.medical-form {
  max-width: 1200px;
  width: 100%;
  height: 28000px;
  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>
