<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      医护云桥APP
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 添加搜索框 -->
  <ion-searchbar placeholder="搜索..." (ionInput)="search($event)"></ion-searchbar>

  <!-- 按钮容器 -->
  <!-- <div class="button-container">
    <ion-button  size="large" color="light" (click)="goToPage1()">
      智能诊疗
    </ion-button>
    <ion-button  size="large" color="light" (click)="goToPage2()">
      相似症状图查询
    </ion-button>
  </div> -->

  <div class="button-row1">
    <ion-button expand="full" fill="outline" color="light" (click)="goToPage1()">
      <img src="../../assets/image/picture1.jpg" alt="报病查诊" class="button-icon" />
      <!-- <span style="color: black;">智能诊疗</span> -->
    </ion-button>
    <ion-button expand="full" fill="outline" color="light" (click)="goToPage2()">
      <img src="../../assets/image/屏幕截图 2024-12-21 211238.png" alt="预约记录" class="button-icon" />
    </ion-button>
    <ion-button expand="full" fill="outline" color="light" routerLink="/discussions">
      <img src="../../assets/image/屏幕截图 2024-12-21 211252.png" alt="讨论记录" class="button-icon" />
    </ion-button>
  </div>

  <div class="button-row2">
    <ion-button expand="full" fill="outline" color="light" routerLink="/tabs/inquiry">
      <img src="../../assets/image/屏幕截图 2024-12-21 211316.png" alt="报病查诊" class="button-icon" />
    </ion-button>
    <ion-button expand="full" fill="outline" color="light" routerLink="/appointments">
      <img src="../../assets/image/屏幕截图 2024-12-21 211345.png" alt="预约记录" class="button-icon" />
    </ion-button>
    <ion-button expand="full" fill="outline" color="light" routerLink="/discussions">
      <img src="../../assets/image/屏幕截图 2024-12-21 211429.png" alt="讨论记录" class="button-icon" />
    </ion-button>
  </div>

  <!-- 轮播图区域 -->
  <div class="carousel-container">
    <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
      <div class="slide" *ngFor="let image of images">
        <img [src]="image" alt="轮播图">
      </div>
    </div>

    <button class="prev" (click)="prevSlide()">&#10094;</button>
    <button class="next" (click)="nextSlide()">&#10095;</button>

    <div class="dots">
      <span class="dot" *ngFor="let image of images; let i = index" [class.active]="i === currentSlide"
        (click)="goToSlide(i)"></span>
    </div>
  </div>

  <!-- 页面内容 -->
  <!-- <ion-card *ngFor="let item of items">  
    <img [src]="item.image" alt="{{ item.title }}" />  
    <ion-card-header>  
      <ion-card-title>{{ item.title }}</ion-card-title>   
    </ion-card-header>  
    <ion-card-content>  
      {{ item.description }}  
    </ion-card-content>  
    <edit-rating-star 
    [score]="currentScore" 
    [scoreMax]="5" 
    (onScoreChange)="handleScoreChange($event)">
  </edit-rating-star>
  
  </ion-card>   -->

  <!-- 知识模块 -->
  <ion-card>
    <ion-card-header>
      <ion-card-title>热点咨询</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <ion-item *ngFor="let knowledge of knowledgeList" lines="none" class="doctor-item" (click)="goToKnowledge(knowledge)">
          <ion-thumbnail slot="start">
            <img [src]="knowledge.get('img')" [alt]="knowledge.get('title')" />
          </ion-thumbnail>
          <div class="doctor-info">
            <h3>{{ knowledge.get('title') }}</h3>
            <p>{{ knowledge?.get('author') }}</p>
          </div>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>


  <!-- <ion-list>
    <ion-item>
      <ion-label>
        <h2>关于我们</h2>
        <p>我们致力于为医护人员提供最佳支持，帮助他们更高效地工作。</p>
      </ion-label>
    </ion-item>
    <ion-item lines="none">
      <ion-label>
        <h2>联系我们</h2>
        <p>如果您有任何问题，请随时与我们联系！</p>
      </ion-label>
    </ion-item>
  </ion-list>

  <ion-footer>
    <ion-toolbar>
      <ion-title>© 2024 医护云桥</ion-title>
    </ion-toolbar>
  </ion-footer> -->
</ion-content>