<template>
  <el-container direction="vertical" class="p-6 bg-grey-50 min-h-screen">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>门诊</el-breadcrumb-item>
      <el-breadcrumb-item>诊断</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="mt-4">
      <template #header>门诊诊断</template>
      <div>
        <!-- 患者信息 -->
        <el-row :gutter="16" class="mb-6">
          <el-col :span="12">
            <strong>姓名：</strong>
            {{ patient.name }}
          </el-col>
          <el-col :span="12">
            <strong>年龄：</strong>
            {{ patient.age }}
          </el-col>
          <el-col :span="12">
            <strong>性别：</strong>
            {{ patient.gender }}
          </el-col>
          <el-col :span="12">
            <strong>就诊日期：</strong>
            {{ currentDate }}
          </el-col>
        </el-row>
        <!-- 诊断表单 -->
        <el-form ref="formRef" :model="form" label-position="top">
          <el-form-item label="主诉" prop="chiefComplaint" required>
            <el-input
              type="textarea"
              v-model="form.chiefComplaint"
              placeholder="请输入主诉"
              :rows="3"
            />
          </el-form-item>
          <el-form-item label="现病史" prop="historyPresentIllness" required>
            <el-input
              type="textarea"
              v-model="form.historyPresentIllness"
              placeholder="请输入现病史"
              :rows="3"
            />
          </el-form-item>
          <el-form-item label="初步诊断" prop="preliminaryDiagnosis" required>
            <el-input
              v-model="form.preliminaryDiagnosis"
              placeholder="请输入初步诊断"
            />
          </el-form-item>
          <el-form-item label="治疗计划" prop="treatmentPlan" required>
            <el-input
              type="textarea"
              v-model="form.treatmentPlan"
              placeholder="请输入治疗计划"
              :rows="3"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </el-container>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";

// 患者基础信息
const patient = reactive({ name: "", age: 0, gender: "" });
// 诊断表单数据
const form = reactive({
  chiefComplaint: "",
  historyPresentIllness: "",
  preliminaryDiagnosis: "",
  treatmentPlan: "",
});
// 表单引用
const formRef = ref(null);
// 当前日期 YYYY-MM-DD
const currentDate = new Date().toISOString().split("T")[0];

// 模拟接口：获取患者信息
const fetchPatient = async () => {
  // TODO: 换成实际 API 请求
  patient.name = "张三";
  patient.age = 30;
  patient.gender = "男";
};

// 提交诊断信息
const onSubmit = async () => {
  try {
    // TODO: 调用后端保存接口
    ElMessage.success("诊断信息已保存");
    formRef.value.resetFields();
  } catch (error) {
    ElMessage.error("保存失败，请重试");
  }
};

// 重置表单
const onReset = () => {
  formRef.value.resetFields();
};

onMounted(() => {
  fetchPatient();
});
</script>

<style scoped lang="scss">
.bg-grey-50 {
  background-color: #f9fafb;
}
.mb-6 {
  margin-bottom: 24px;
}
.mt-4 {
  margin-top: 16px;
}
.p-6 {
  padding: 24px;
}
.min-h-screen {
  min-height: 100vh;
}
</style>
