<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="goBack()" fill="clear">
        <ion-icon aria-hidden="true" name="chevron-back-outline" style="color: black; font-size: 24px;"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>体脂率测试</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
<!-- 身高体重输入框 -->
<div class="info-section">
  <div class="input-row">
    <div class="input-group">
      <label>身高:</label>
      <input type="number" [(ngModel)]="height" placeholder="请输入身高" class="input-box" />
      <span class="unit">CM</span>
    </div>
  </div>
  <div class="input-row">
    <div class="input-group">
      <label>体重:</label>
      <input type="number" [(ngModel)]="weight" placeholder="请输入体重" class="input-box" />
      <span class="unit">KG</span>
    </div>
  </div>
  <div class="input-row">
    <div class="input-group">
      <label>年龄:</label>
      <input type="number" [(ngModel)]="age" placeholder="请输入年龄" class="input-box" />
    </div>
  </div>
  <div class="input-row">
    <div class="input-group">
      <label>性别:</label>
      <ion-select [(ngModel)]="gender">
        <ion-select-option value="male">男性</ion-select-option>
        <ion-select-option value="female">女性</ion-select-option>
      </ion-select>
    </div>
  </div>
  <!-- 腰围输入框 -->
  <div class="input-row">
    <div class="input-group">
      <label>腰围:</label>
      <input type="number" [(ngModel)]="waist" placeholder="请输入腰围" class="input-box" />
      <span class="unit">CM</span>
    </div>
  </div>
</div>

<!-- 体脂率输出框 -->
<div class="info-section" *ngIf="bodyFatPercentage !== null">
  <div class="output-box">
    <h3>体脂率</h3>
    <p>{{ bodyFatPercentage | number: '1.1-1' }}%</p>
  </div>

  <!-- 体脂率分类提示 -->
  <div *ngIf="bodyFatStatus" class="status-box">
    <p>{{ bodyFatStatus }}</p>
  </div>
</div>

<!-- 按钮区 -->
<div class="center-button">
  <ion-button fill="clear" class="analysis-button" (click)="calculateBodyFat()">计算体脂率</ion-button>
  <ion-button fill="clear" class="analysis-button" (click)="resetForm()">清空</ion-button>
</div>
</ion-content>
