<template>
  <GiPageLayout>
    <div class="health-records-container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2 class="page-title">健康档案</h2>
      </div>

      <!-- 2023年度体检报告 -->
      <a-card class="health-report-card" :bordered="false">
        <template #title>
          <div class="card-header">
            <span class="card-title">2023年度体检报告</span>
            <a-tag color="green">正常</a-tag>
          </div>
        </template>
        
        <div class="report-meta">
          <span class="meta-item">体检日期：2023-10-15</span>
          <span class="meta-item">有效期至：2024-10-15</span>
        </div>

        <div class="report-content">
          <!-- 基本信息 -->
          <div class="info-section">
            <h4 class="section-title">基本信息</h4>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">体检医院：</span>
                <span class="info-value">北京协和医院</span>
              </div>
              <div class="info-item">
                <span class="info-label">体检套餐：</span>
                <span class="info-value">高级管理人员套餐</span>
              </div>
              <div class="info-item">
                <span class="info-label">总评：</span>
                <span class="info-value">健康状况良好，无明显异常</span>
              </div>
              <div class="info-item">
                <span class="info-label">建议：</span>
                <span class="info-value">保持规律作息，适量运动，控制饮食</span>
              </div>
            </div>
          </div>

          <!-- 检验结果和检查结果 -->
          <div class="results-section">
            <div class="results-grid">
              <!-- 检验结果 -->
              <div class="result-column">
                <h4 class="section-title">检验结果</h4>
                <div class="result-item">
                  <span class="result-label">血常规：</span>
                  <span class="result-value">正常</span>
                </div>
                <div class="result-item">
                  <span class="result-label">尿常规：</span>
                  <span class="result-value">正常</span>
                </div>
                <div class="result-item">
                  <span class="result-label">肝功能：</span>
                  <span class="result-value">正常</span>
                </div>
                <div class="result-item">
                  <span class="result-label">肾功能：</span>
                  <span class="result-value">正常</span>
                </div>
                <div class="result-item">
                  <span class="result-label">血脂：</span>
                  <span class="result-value">总胆固醇 5.2 mmol/L</span>
                  <a-tag color="orange" size="small">偏高</a-tag>
                </div>
                <div class="result-item">
                  <span class="result-label">血糖：</span>
                  <span class="result-value">5.1 mmol/L (正常)</span>
                </div>
              </div>

              <!-- 检查结果 -->
              <div class="result-column">
                <h4 class="section-title">检查结果</h4>
                <div class="result-item">
                  <span class="result-label">心电图：</span>
                  <span class="result-value">窦性心律，正常心电图</span>
                </div>
                <div class="result-item">
                  <span class="result-label">胸部X光：</span>
                  <span class="result-value">心肺膈未见明显异常</span>
                </div>
                <div class="result-item">
                  <span class="result-label">腹部B超：</span>
                  <span class="result-value">肝胆胰脾未见明显异常</span>
                </div>
                <div class="result-item">
                  <span class="result-label">眼科检查：</span>
                  <span class="result-value">视力: 左眼1.0，右眼1.2</span>
                  <a-tag color="orange" size="small">需要保护</a-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-card>

      <!-- 2022年度体检报告 -->
      <a-card class="health-report-card" :bordered="false">
        <template #title>
          <div class="card-header">
            <span class="card-title">2022年度体检报告</span>
            <a-tag color="green">正常</a-tag>
          </div>
        </template>
        
        <div class="report-meta">
          <span class="meta-item">体检日期：2022-10-20</span>
          <span class="meta-item">有效期至：2023-10-20</span>
        </div>

        <div class="report-content">
          <!-- 基本信息 -->
          <div class="info-section">
            <h4 class="section-title">基本信息</h4>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">体检医院：</span>
                <span class="info-value">北京协和医院</span>
              </div>
              <div class="info-item">
                <span class="info-label">体检套餐：</span>
                <span class="info-value">高级管理人员套餐</span>
              </div>
              <div class="info-item">
                <span class="info-label">总评：</span>
                <span class="info-value">健康状况良好</span>
              </div>
              <div class="info-item">
                <span class="info-label">建议：</span>
                <span class="info-value">注意控制体重，减少高脂饮食</span>
              </div>
            </div>
          </div>

          <!-- 检验结果 -->
          <div class="results-section">
            <div class="results-grid">
              <div class="result-column">
                <h4 class="section-title">检验结果</h4>
                <div class="result-item">
                  <span class="result-label">血常规：</span>
                  <span class="result-value">正常</span>
                </div>
                <div class="result-item">
                  <span class="result-label">尿常规：</span>
                  <span class="result-value">正常</span>
                </div>
                <div class="result-item">
                  <span class="result-label">肝功能：</span>
                  <span class="result-value">正常</span>
                </div>
                <div class="result-item">
                  <span class="result-label">肾功能：</span>
                  <span class="result-value">正常</span>
                </div>
                <div class="result-item">
                  <span class="result-label">血脂：</span>
                  <span class="result-value">总胆固醇 5.0 mmol/L</span>
                  <a-tag color="orange" size="small">轻度</a-tag>
                </div>
                <div class="result-item">
                  <span class="result-label">血糖：</span>
                  <span class="result-value">5.0 mmol/L (正常)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-card>
    </div>
  </GiPageLayout>
</template>

<script setup lang="ts">
// 这个页面主要用于展示，不需要复杂的逻辑
</script>

<style scoped>
.health-records-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1d2129;
  margin: 0;
}

.health-report-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #1d2129;
}

.report-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  color: #4e5969;
  font-size: 14px;
}

.meta-item {
  font-weight: 500;
}

.report-content {
  padding: 20px 0;
}

.info-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 15px;
  border-bottom: 2px solid #e5e6eb;
  padding-bottom: 8px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  align-items: flex-start;
}

.info-label {
  font-weight: 600;
  width: 100px;
  flex-shrink: 0;
  color: #1d2129;
}

.info-value {
  color: #4e5969;
  word-break: break-word;
}

.results-section {
  margin-bottom: 20px;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.result-column {
  background: #f7f8fa;
  padding: 20px;
  border-radius: 8px;
}

.result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.result-label {
  font-weight: 600;
  width: 80px;
  flex-shrink: 0;
  color: #1d2129;
}

.result-value {
  color: #4e5969;
  flex: 1;
}
</style> 