<ion-header>
  <ion-toolbar>
    <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>
  <ion-list>
    <ion-item *ngFor="let medicine of medicines">
      <div (click)="goToDetail(medicine.id)" style="display: flex; width: 100%;">
        <ion-thumbnail slot="start">
          <img [src]="medicine.imageUrl" alt="{{ medicine.name }}">
        </ion-thumbnail>
        <ion-label>
          <h2>{{ medicine.name }}</h2>
          <p>{{ medicine.description | slice:0:50 }}...</p>
          <p>价格: ¥{{ medicine.price }}</p>
        </ion-label>
      </div>
      <ion-button fill="clear" slot="end" (click)="addToCart(medicine)">加入购物车</ion-button>
    </ion-item>
  </ion-list>
</ion-content>

<!-- 购物车 -->
<ion-footer>
  <ion-card>
    <div class="cart-header">
      <ion-title>购物车</ion-title>
      <ion-icon name="cart-outline"></ion-icon>
    </div>
    <ion-list>
      <ion-item *ngFor="let item of cartItems$ | async" [@fadeItem]="{value:'enter'}">
        <ion-thumbnail slot="start">
          <img [src]="item.imageUrl || 'default-image-url.jpg'" alt="{{ item.name }}">
        </ion-thumbnail>
        <ion-label>
          <h2>{{ item.name }}</h2>
          <p>小计: ¥{{ item.price * item.quantity }}</p>
        </ion-label>
        <div class="item-actions">
          <button (click)="decrementQuantity(item)">-</button>
          <span class="quantity-input">
            <input type="number" [(ngModel)]="item.quantity" min="1" (change)="updateQuantity(item)">
          </span>
          <button (click)="incrementQuantity(item)">+</button>
          <button class="remove-btn" (click)="removeFromCart(item)">移除</button>
        </div>
      </ion-item>
    </ion-list>
    <ion-item class="total" lines="none">
      <ion-grid>
        <ion-row>
          <ion-col size="6" style="text-align: left;">
            <h2>总计: ¥{{ cartTotal$ | async }}</h2>
          </ion-col>
          <ion-col class="goumai">
            <ion-button expand="block" color="success" (click)="purchase()">购买</ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-card>
</ion-footer>