<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>
      健康助手
    </ion-title>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <!-- 下拉刷新 -->
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  
  <!-- 健康数据概览 -->
<ion-card class="data-card">
  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let metric of metrics">
        <div class="metric-item" [class.abnormal]="metric.abnormal">
          <div class="metric-header">
            <ion-text>{{metric.name}}</ion-text>
            <ion-icon [name]="metric.trend" [color]="metric.trendColor"></ion-icon>
          </div>
          <div class="metric-value">
            {{metric.value}}
            <ion-text class="unit">{{metric.unit}}</ion-text>
          </div>
          <ion-text color="medium" class="reference">参考: {{metric.reference}}</ion-text>
          <ion-text color="medium" class="time">测量时间: {{metric.time}}</ion-text>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click)="addData()">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-card>

  
  <!-- 健康数据记录 -->
<ion-card class="health-data-card">
  <ion-item lines="none">
    <ion-label>健康数据记录</ion-label>
    <ion-button fill="clear" size="small" (click)="loadHealthData()">
      <ion-icon name="refresh" slot="icon-only"></ion-icon>
    </ion-button>
  </ion-item>

  <!-- 加载状态 -->
  <div *ngIf="healthData.loading" class="loading-spinner">
    <ion-spinner name="crescent"></ion-spinner>
  </div>

  <!-- 血糖数据 -->
  <ion-card *ngIf="healthData.bloodGlucose.length > 0" class="data-section">
    <ion-card-header>
      <ion-card-title>
        <ion-icon name="water" color="primary"></ion-icon>
        血糖记录
      </ion-card-title>
    </ion-card-header>
    <ion-list lines="none">
      <ion-item *ngFor="let item of healthData.bloodGlucose">
        <ion-label>
          <h3>{{item.get('glucoseValue')}} mmol/L</h3>
          <p>{{item.get('measurementType')}} · {{item.get('measurementTime') | date: 'MM/dd HH:mm'}}</p>
          <ion-text color="medium">{{item.get('notes')}}</ion-text>
        </ion-label>
        <ion-badge slot="end" color="success" *ngIf="item.get('glucoseValue') <= 6.1">正常</ion-badge>
        <ion-badge slot="end" color="warning" *ngIf="item.get('glucoseValue') > 6.1 && item.get('glucoseValue') <= 7.0">偏高</ion-badge>
        <ion-badge slot="end" color="danger" *ngIf="item.get('glucoseValue') > 7.0">过高</ion-badge>
      </ion-item>
    </ion-list>
  </ion-card>

  <!-- 血压数据 -->
  <ion-card *ngIf="healthData.bloodPressure.length > 0" class="data-section">
    <ion-card-header>
      <ion-card-title>
        <ion-icon name="speedometer" color="danger"></ion-icon>
        血压记录
      </ion-card-title>
    </ion-card-header>
    <ion-list lines="none">
      <ion-item *ngFor="let item of healthData.bloodPressure">
        <ion-label>
          <h3>{{item.get('systolic')}}/{{item.get('diastolic')}} mmHg</h3>
          <p>脉搏: {{item.get('pulse')}} · {{item.get('measurementTime') | date: 'MM/dd HH:mm'}}</p>
          <ion-text color="medium">{{item.get('notes')}}</ion-text>
        </ion-label>
        <ion-badge slot="end" color="success" *ngIf="item.get('systolic') <= 120 && item.get('diastolic') <= 80">正常</ion-badge>
        <ion-badge slot="end" color="warning" *ngIf="(item.get('systolic') > 120 && item.get('systolic') <= 140) || (item.get('diastolic') > 80 && item.get('diastolic') <= 90)">偏高</ion-badge>
        <ion-badge slot="end" color="danger" *ngIf="item.get('systolic') > 140 || item.get('diastolic') > 90">过高</ion-badge>
      </ion-item>
    </ion-list>
  </ion-card>

  <!-- 心率数据 -->
  <ion-card *ngIf="healthData.heartRate.length > 0" class="data-section">
    <ion-card-header>
      <ion-card-title>
        <ion-icon name="heart" color="danger"></ion-icon>
        心率记录
      </ion-card-title>
    </ion-card-header>
    <ion-list lines="none">
      <ion-item *ngFor="let item of healthData.heartRate">
        <ion-label>
          <h3>{{item.get('heartRate')}} 次/分</h3>
          <p>{{item.get('measurementMethod')}} · {{item.get('measurementTime') | date: 'MM/dd HH:mm'}}</p>
          <ion-text color="medium">{{item.get('notes')}}</ion-text>
        </ion-label>
        <ion-badge slot="end" color="success" *ngIf="item.get('heartRate') >= 60 && item.get('heartRate') <= 100">正常</ion-badge>
        <ion-badge slot="end" color="warning" *ngIf="item.get('heartRate') < 60 || item.get('heartRate') > 100">异常</ion-badge>
      </ion-item>
    </ion-list>
  </ion-card>
</ion-card>
<!-- 今日数据模块 -->
<ion-card class="today-data-card">
  <ion-item lines="none">
    <ion-label>今日数据</ion-label>
    <ion-button fill="clear" size="small" (click)="openAddDataModal()">
      <ion-icon name="add" slot="start"></ion-icon>
      添加数据
    </ion-button>
  </ion-item>
  
  <ion-list lines="none">
    <ion-item *ngIf="todayData.bloodGlucose.length === 0 && todayData.bloodPressure.length === 0 && todayData.heartRate.length === 0">
      <ion-label class="ion-text-center" color="medium">
        今日暂无数据，点击上方按钮添加
      </ion-label>
    </ion-item>
    
    <!-- 今日血糖数据 -->
    <ion-item *ngFor="let item of todayData.bloodGlucose">
      <ion-icon name="water" slot="start" color="primary"></ion-icon>
      <ion-label>
        <h3>{{item.get('glucoseValue')}} mmol/L</h3>
        <p>{{item.get('measurementType')}} · {{formatTime(item.get('measurementTime'))}}</p>
      </ion-label>
      <ion-badge slot="end" [color]="getGlucoseColor(item.get('glucoseValue'))">
        {{getGlucoseStatus(item.get('glucoseValue'))}}
      </ion-badge>
    </ion-item>
    
    <!-- 今日血压数据 -->
    <ion-item *ngFor="let item of todayData.bloodPressure">
      <ion-icon name="speedometer" slot="start" color="danger"></ion-icon>
      <ion-label>
        <h3>{{item.get('systolic')}}/{{item.get('diastolic')}} mmHg</h3>
        <p>脉搏: {{item.get('pulse')}} · {{formatTime(item.get('measurementTime'))}}</p>
      </ion-label>
      <ion-badge slot="end" [color]="getPressureColor(item.get('systolic'), item.get('diastolic'))">
        {{getPressureStatus(item.get('systolic'), item.get('diastolic'))}}
      </ion-badge>
    </ion-item>
    
    <!-- 今日心率数据 -->
    <ion-item *ngFor="let item of todayData.heartRate">
      <ion-icon name="heart" slot="start" color="danger"></ion-icon>
      <ion-label>
        <h3>{{item.get('heartRate')}} 次/分</h3>
        <p>{{item.get('measurementMethod')}} · {{formatTime(item.get('measurementTime'))}}</p>
      </ion-label>
      <ion-badge slot="end" [color]="getHeartRateColor(item.get('heartRate'))">
        {{getHeartRateStatus(item.get('heartRate'))}}
      </ion-badge>
    </ion-item>
  </ion-list>
</ion-card>

