<ion-header [translucent]="true">
  <ion-toolbar class="custom-toolbar">
    <div class="search-bar" >
      <ion-searchbar 
      placeholder="搜索" 
      class="custom-searchbar" 
      (ionInput)="searchProducts($event)">
    </ion-searchbar>
    </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="男" content-id="male">
              <ion-label>男性</ion-label>
            </ion-segment-button>
            <ion-segment-button value="女" 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">
  @if(!searchTerm){
    <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 (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
            </ion-segment-content>
  
            <ion-segment-content id="sleep">
              <app-article-card (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
            </ion-segment-content>
  
            <ion-segment-content id="life">
              <app-article-card (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
            </ion-segment-content>
            <ion-segment-content id="male">
              <app-article-card (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
            </ion-segment-content>
            <ion-segment-content id="female">
              <app-article-card (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
            </ion-segment-content>
          </ion-segment-view>
        </ion-card-content>
      </ion-card>
    </div>
  }
  @if(searchTerm){
    <div>
      <app-article-card (click)="openDetailModal(product)" *ngFor="let product of products" [card]="product"></app-article-card>
    </div>
    @if (products.length == 0) {
      <div class="no-results" style="margin: 50px auto;">
        <h2>寻找中···   请耐性等待 ····</h2>
      </div>
    }
  }


  <!-- 底部弹出模态 -->
  <ion-modal [isOpen]="isModalOpen" cssClass="bottom-modal">
    <ng-template>

      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-button (click)="closeDetailModal()">关闭</ion-button>
          </ion-buttons>
          <ion-title>{{currentProduct.get('category')}}</ion-title>
          <ion-buttons slot="end">
            <ion-button (click)="shareDetailModal()">分享</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding">
        <div class="modal-content" *ngIf="currentProduct">
          <h1 class="product-name">{{currentProduct.get('title')}}</h1>
          <p><strong>作者：</strong>{{currentProduct.get('author')}}</p>
          <p>{{currentProduct.get('content')[0]}}</p>
          <div class="image-container">
            <img style="width: 100%; height: auto;" [src]="currentProduct.get('image')[0]" alt="图片" class="medicine-image">
          </div>
          <p>{{currentProduct.get('content')[0]}}</p>  
          <div class="image-container">
            <img style="width: 100%; height: auto;" [src]="currentProduct.get('image')[0]" alt="图片" class="medicine-image">
          </div>
          <div style="display: flex; height: 30px; width: 100%; justify-content: space-between; align-items: center">
            <p style="margin-left:30px"><strong>阅读量：</strong>{{currentProduct.get('views')}}</p>
            <p style="margin-right:30px"><strong>点赞量：</strong>{{currentProduct.get('likes')}}</p>  
          </div>
        </div>
      </ion-content>
    </ng-template>
  </ion-modal>

  <ion-modal class="share-modal" [isOpen]="shareDetail">
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="end">
            <ion-button (click)="closeDetailModal()">X</ion-button>
          </ion-buttons>
          <ion-title>分享</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-item>
          <ion-label position="stacked">分享链接</ion-label>
          <!-- <ion-input [(ngModel)]="shareLink" readonly></ion-input> -->
        </ion-item>
        <ion-button expand="block" (click)="copyLink()">复制链接</ion-button>
    </ion-content>
  </ion-modal>
</ion-content>
