<ion-header [translucent]="true">
  <ion-toolbar class="custom-toolbar">
    <div class="search-bar">
      <input type="text" placeholder="输入关键词搜索科普文章">
    </div>
    <div class="header">
      <ion-card-header>
        <ion-card-title>
          <ion-segment [scrollable]="true" value="hotdot" [value]="type" (ionChange)="typeChange($event)">
            <ion-segment-button value="hotdot" content-id="hotdot">
              <ion-label>热点</ion-label>
            </ion-segment-button>
            <ion-segment-button value="export" content-id="export">
              <ion-label>专家科普</ion-label>
            </ion-segment-button>
            <ion-segment-button value="sleep" content-id="sleep">
              <ion-label>睡眠</ion-label>
            </ion-segment-button>
            <ion-segment-button value="life" content-id="life">
              <ion-label>生活</ion-label>
            </ion-segment-button>
            <ion-segment-button value="male" content-id="male">
              <ion-label>男性</ion-label>
            </ion-segment-button>
            <ion-segment-button value="female" content-id="female">
              <ion-label>女性</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-card-title>
      </ion-card-header>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content class="knowledge" [fullscreen]="true">
  
  <div class="content">
    <ion-card>
      <ion-card-header></ion-card-header>

      <ion-card-content>
        <ion-segment-view>
          <ion-segment-content id="hotdot">
            <app-article-card (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
          </ion-segment-content>

          <ion-segment-content id="export">
            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
          </ion-segment-content>

          <ion-segment-content id="sleep">
            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
          </ion-segment-content>

          <ion-segment-content id="life">
            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
          </ion-segment-content>
          <ion-segment-content id="male">
            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
          </ion-segment-content>
          <ion-segment-content id="female">
            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
          </ion-segment-content>
        </ion-segment-view>
      </ion-card-content>
    </ion-card>
  </div>

  <!-- 底部弹出模态 -->
  <ion-modal [isOpen]="showDetailModal" cssClass="bottom-modal" backdropDismiss="true" (ionModalDidDismiss)="closeDetailModal()">
    <ion-header>
      <ion-toolbar>
        <ion-title>详情</ion-title>
        <ion-buttons slot="end">
          <ion-button fill="clear" (click)="closeDetailModal()">
            <ion-icon name="close">  X  </ion-icon>
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <div class="modal-content" *ngIf="currentProduct">
        <div class="image-container">
          <img [src]="currentProduct.get('image')" alt="药品图片" class="medicine-image">
        </div>
        <h2 class="product-name">{{currentProduct.get('image')}}</h2>
        <!-- <p><strong>价格：</strong>{{currentProduct.price}}</p>
        <p><strong>是否处方药：</strong>{{currentProduct.prescription ? '是' : '否'}}</p>
        <p><strong>用法用量：</strong>{{currentProduct.usage}}</p>
        <p><strong>主治功能：</strong>{{currentProduct.function}}</p>
        <p><strong>规格：</strong>{{currentProduct.spec}}</p>
        <p><strong>成分：</strong>{{currentProduct.composition}}</p>
        <p><strong>禁忌：</strong>{{currentProduct.taboo}}</p> -->
      </div>
    </ion-content>
  </ion-modal>
</ion-content>
