<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>病虫害图鉴</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-segment value="all" (ionChange)="segmentChanged($event)">
    <ion-segment-button value="all">
      <ion-label>全部</ion-label>
    </ion-segment-button>
    <ion-segment-button value="disease">
      <ion-label>病害</ion-label>
    </ion-segment-button>
    <ion-segment-button value="pest">
      <ion-label>虫害</ion-label>
    </ion-segment-button>
  </ion-segment>

  <ion-list>
    <ion-item *ngFor="let item of filteredItems" [detail]="true" (click)="openPestDetail(item)">
      <ion-thumbnail slot="start">
        <img [src]="item.image">
      </ion-thumbnail>
      <ion-label>
        <h2>{{item.name}}</h2>
        <p>{{item.crop}}常见{{item.type === 'disease' ? '病害' : '虫害'}}</p>
      </ion-label>
      <ion-badge slot="end" color="danger" *ngIf="item.level === 'high'">严重</ion-badge>
    </ion-item>
  </ion-list>
</ion-content>