<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
    </ion-buttons>
    <ion-title>订单管理</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="chevron-down-circle" pullingText="下拉刷新" refreshingSpinner="circles" refreshingText="正在刷新..."></ion-refresher-content>
  </ion-refresher>
  <ion-list *ngIf="orders.length > 0" class="order-list">
    <ion-item *ngFor="let order of orders" class="order-item" [@orderAnimation]>
      <ion-label>
        <h2>订单号: {{ order.id }}</h2>
        <p>创建时间: {{ order.createdAt | date:'medium' }}</p>
        <p>总计: ¥{{ order.total }}</p>
        <p>订单详情:</p>
        <ul class="order-details">
          <li *ngFor="let item of order.items">
            {{ item.name }} (数量: {{ item.quantity }}, 单价: ¥{{ item.price }})
          </li>
        </ul>
      </ion-label>
      <ion-button fill="clear" color="danger" slot="end" (click)="confirmDeleteOrder(order)">删除</ion-button>
    </ion-item>
  </ion-list>
  <div *ngIf="orders.length === 0" class="no-orders">
    <p>没有找到任何订单。</p>
  </div>
</ion-content>