<template>
  <div class="assessment-page">
    <div class="page-container">
      <!-- 医院头部 -->
      <div class="hospital-header">
        <h1 class="hospital-name">
          <span class="hospital-text">长春市朝阳区中医院</span>
        </h1>
      </div>

      <!-- 页面标题 -->
      <h2 class="form-title">住院病人风险评估表</h2>

      <!-- 表单卡片 -->
      <el-card class="form-card">
        <el-form :model="formData" label-width="100px">
          <!-- 第一行：科室、床号、住院号 -->
          <el-row :gutter="16">
            <el-col :xs="24" :sm="12" :md="8">
              <el-form-item label="科室">
                <el-input 
                  v-model="formData.department" 
                  readonly="true"
                  type="textarea"
                  :autosize="{ minRows: 1 }"
                  class="auto-resize-input"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8">
              <el-form-item label="床号">
                <el-input 
                  v-model="formData.bedNo" 
                  readonly="true"
                  type="textarea"
                  :autosize="{ minRows: 1 }"
                  class="auto-resize-input"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8">
              <el-form-item label="住院号">
                <el-input 
                  v-model="formData.busNo" 
                  readonly="true"
                  type="textarea"
                  :autosize="{ minRows: 1 }"
                  class="auto-resize-input"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 第二行：姓名、性别、年龄 -->
          <el-row :gutter="16">
            <el-col :xs="24" :sm="12" :md="8">
              <el-form-item label="姓名">
                <el-input 
                  v-model="formData.patientName" 
                  readonly="true"
                  type="textarea"
                  :autosize="{ minRows: 1 }"
                  class="auto-resize-input"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8">
              <el-form-item label="性别">
                <el-input 
                  v-model="formData.gender" 
                  readonly="true"
                  type="textarea"
                  :autosize="{ minRows: 1 }"
                  class="auto-resize-input"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8">
              <el-form-item label="年龄">
                <el-input 
                  v-model="formData.age" 
                  readonly="true"
                  type="textarea"
                  :autosize="{ minRows: 1 }"
                  class="auto-resize-input"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 病情简介 -->
          <el-form-item label="病情简介">
            <el-input
              type="textarea"
              v-model="formData.adm_cond"
              :autosize="{ minRows: 4, maxRows: 10 }"
              class="full-width-textarea"
            ></el-input>
          </el-form-item>

          <!-- 不良后果及预后 -->
          <el-form-item label="可能发生的不良后果及预后">
            <el-input
              type="textarea"
              v-model="formData.effectless"
              :autosize="{ minRows: 1, maxRows: 5 }"
              class="full-width-textarea"
            ></el-input>
          </el-form-item>

          <!-- 评估等级 -->
          <el-form-item label="评估等级">
            <el-radio-group v-model="formData.evalLevel">
              <el-radio label="一般">一般</el-radio>
              <el-radio label="病重">病重</el-radio>
              <el-radio label="病危">病危</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 护理等级 -->
          <el-form-item label="护理等级">
            <el-radio-group v-model="formData.nurseLevel">
              <el-radio label="特级护理">特级护理</el-radio>
              <el-radio label="一级护理">一级护理</el-radio>
              <el-radio label="二级护理">二级护理</el-radio>
              <el-radio label="三级护理">三级护理</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 收集资料时间 -->
          <el-form-item label="收集资料时间">
            <span class="date-display">{{ currentDate }}</span>
          </el-form-item>

          <!-- 医师签名 -->
          <el-row :gutter="16">
            <el-col :xs="24" :sm="12" :md="8">
              <el-form-item label="评估医师签名">
                <el-input 
                  v-model="formData.sign_doc"
                  type="textarea"
                  :autosize="{ minRows: 1 }"
                  class="auto-resize-input"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8">
              <el-form-item label="主治医师签名">
                <el-input 
                  v-model="formData.sign_maindoc"
                  type="textarea"
                  :autosize="{ minRows: 1 }"
                  class="auto-resize-input"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8">
              <el-form-item label="科主任签名">
                <el-input 
                  v-model="formData.sign_leader"
                  type="textarea"
                  :autosize="{ minRows: 1 }"
                  class="auto-resize-input"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, nextTick, reactive, ref } from 'vue';

defineOptions({
  name: 'InHospitalCaseForm',
});

const props = defineProps({
  patientInfo: {
    type: Object,
    required: true,
  },
});

const patient = props.patientInfo;

// 表单数据 - 修复：将 formData 定义移到 patient 之后
const formData = reactive({
  department: patient?.department || '',
  bedNo: patient?.bedNo || '',
  busNo: patient?.busNo || '',
  patientName: patient?.patientName || '',
  gender: patient?.sex || '',
  age: patient?.age || '',
  adm_cond: '',
  effectless: '',
  evalLevel: '',
  nurseLevel: '',
  sign_doc: '',
  sign_maindoc: '',
  sign_leader: '',
});

// 当前日期（YYYY-MM-DD）
const currentDate = computed(() => {
  const d = new Date();
  const yyyy = d.getFullYear();
  const mm = String(d.getMonth() + 1).padStart(2, '0');
  const dd = String(d.getDate()).padStart(2, '0');
  return `${yyyy}-${mm}-${dd}`;
});

//表单引用
const formRef = ref(null);

//提交表单
const submit = () => {
  // 如果需要表单验证，可以使用以下代码
  // formRef.value.validate((valid) => {
    // if (valid) {
      // emits('submitOk', formData);
    // }
  // });
  // 简化版本:
  emits('submitOk', formData);
};

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

// 定义 emits
const emits = defineEmits(['submitOk']);

onMounted(() => {
  // 页面加载完成后触发一次 resize 事件，确保输入框高度正确
  setTimeout(() => {
    window.dispatchEvent(new Event('resize'));
  }, 100);
});

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

<style scoped>
/* ===== 页面容器与背景 ===== */
.assessment-page {
  font-family: 'Microsoft YaHei', 宋体, sans-serif;
  background-color: #f3f4f6;
  padding: 1.25rem;
  min-height: 100vh;
}

.page-container {
  max-width: 48rem;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 1.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

/* ===== 医院头部 ===== */
.hospital-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.hospital-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.hospital-text {
  line-height: 1;
}

/* ===== 表单标题与操作 ===== */
.form-title {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  margin: 1.25rem 0;
  color: #1f2937;
}

/* ===== 表单卡片 ===== */
.form-card {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

:deep(.el-card.form-card) {
  box-shadow: none !important;
}

/* ===== 自动调整大小的输入框样式 ===== */
.auto-resize-input {
  width: 100%;
}

:deep(.auto-resize-input .el-textarea__inner) {
  overflow: hidden;
  resize: none;
  min-height: 32px !important;
  padding: 5px 12px;
}

/* ===== Textarea 自动扩展样式 ===== */
.full-width-textarea {
  width: 100%;
}

:deep(.full-width-textarea textarea) {
  overflow: hidden;
  resize: none;
  min-height: auto;
}

/* ===== 日期显示 ===== */
.date-display {
  font-size: 0.95rem;
  color: #666;
}

/* ===== 响应式调整 ===== */
@media (max-width: 768px) {
  .page-container {
    padding: 1rem;
  }

  .hospital-name {
    font-size: 1.25rem;
  }
}
</style>