<!-- src/app/medicine-detail/medicine-detail.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/medicine-purchase"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ medicine?.name || '加载中...' }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div *ngIf="loading" class="loading-container">
    <p>正在加载...</p>
  </div>
  <div *ngIf="!loading && !error && medicine" class="medicine-details">
    <img [src]="medicine.imageUrl" alt="{{ medicine.name }}" />
    <h2>{{ medicine.name }}</h2>
    <p>价格: ¥{{ medicine.price }}</p>
    <p>{{ medicine.description }}</p>
    <!-- 可选：添加更多详细信息 -->
    <section>
      <h3>用法用量</h3>
      <p>{{ medicine.usage || '暂无相关信息' }}</p>
    </section>
    <section>
      <h3>注意事项</h3>
      <p>{{ medicine.precautions || '暂无相关信息' }}</p>
    </section>
    <section>
      <h3>副作用</h3>
      <p>{{ medicine.sideEffects || '暂无相关信息' }}</p>
    </section>
  </div>
  <div *ngIf="error" class="error-container">
    <p>{{ error }}</p>
  </div>
</ion-content>