<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>反馈</ion-title>
    <ion-buttons slot="start">
      <ion-back-button text="返回"></ion-back-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="fetchFeedbackRecords()">反馈记录</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <form #myForm="ngForm" (ngSubmit)="submitForm(myForm)">
    <ion-item>
      <ion-label position="stacked">用户名</ion-label>
      <ion-input name="username" ngModel required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="stacked">年龄</ion-label>
      <ion-input name="age" ngModel required></ion-input>
    </ion-item>
    
    <ion-item>
      <ion-label position="stacked">性别</ion-label>
      <ion-select name="gender" ngModel required>
        <ion-select-option value="male">男</ion-select-option>
        <ion-select-option value="female">女</ion-select-option>
      </ion-select>
    </ion-item>
    
    <ion-item>
      <ion-label position="stacked">对该app有什么问题？</ion-label>
      <ion-input name="question" ngModel required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="stacked">希望怎么修改</ion-label>
      <ion-input name="suggestion" ngModel required></ion-input>
    </ion-item>
    
    <ion-item>
      <ion-label position="stacked">邮箱</ion-label>
      <ion-input name="email" type="email" ngModel required></ion-input>
    </ion-item>

    <ion-button type="submit" expand="full" [disabled]="!myForm.valid">提交</ion-button>
  </form>

  <ion-list *ngIf="feedbackRecords.length > 0">
    <ion-list-header>
      <ion-label>反馈记录</ion-label>
    </ion-list-header>
    <ion-item *ngFor="let record of feedbackRecords">
      <ion-label>
        <h2>用户名: {{ record.username }}</h2>
        <p>年龄: {{ record.age }}</p>
        <p>性别: {{ record.gender }}</p>
        <p>问题: {{ record.question }}</p>
        <p>建议: {{ record.suggestion }}</p>
        <p>邮箱: {{ record.email }}</p>
        <p>提交时间: {{ record.createdAt | date: 'yyyy-MM-dd HH:mm:ss' }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>