<ion-header [translucent]="true">
  <ion-toolbar class="searchbar">
    <div class="searchbar-container">
      <ion-searchbar 
        [value]="searchContent" 
        (ionInput)="handleInput($event)" 
        placeholder="输入您的疾病" 
        [debounce]="100">
      </ion-searchbar>
      <ion-button 
        color="primary" 
        size="default" 
        (click)="search()">搜索</ion-button>
    </div>
  </ion-toolbar>
</ion-header>
<!-- 内存不足 使用以下代码 -->
<!-- set NODE_OPTIONS=--max_old_space_size=8192
node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve -->

<ion-content [fullscreen]="true">

  <div class="inquery" style="margin-top: 10px ; margin-bottom: 15px; display: flex; height: 120px;">
    <div class="inquery-ai" style="margin-left:5px;width: 48%; background-color: rgb(255, 255, 255);border-radius: 10px; box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.163), -2px -2px 2px 0px rgba(0, 0, 0, 0.148);">
      <div style="display: flex; margin: 0; padding: 0;">
        <div (click)="goToPage1()" style="margin-left: 8px">
          <!-- <img src="../../assets/image/ai.png" alt="AI问诊"> -->
          <h1>AI问诊</h1>
          <p style="margin: 0; font-size: 10px; color: grey">7X24小时 智能AI医生</p>
          <p style="margin-top:5px; width:50px;color:white;background-color: rgba(214, 10, 10, 0.589); font-size: 8px;">不限次畅聊</p>
        </div>
        <div (click)="goToPage1()" style="margin-left: 2px; margin-top: 10px;">
          <img src="../../assets/image/ai.png" alt="AI问诊" height="95px">
        </div>
      </div>
    </div>
    <div style="width: 1%;"></div>
    <div class="inquery-human" style="margin-left:0px;width: 48%; background-color: rgb(255, 255, 255);border-radius: 10px; box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.163), -2px -2px 2px 0px rgba(0, 0, 0, 0.148);">
      <div style="display: flex;">
        <div (click)="goToPage2()" style="margin-left: 8px">
          <!-- <img src="../../assets/image/askdoct.jpg" alt="找医生"> -->
          <h1>  找医生</h1>
          <p style="margin-left: 0px; margin-top:5px; font-size: 10px; color: grey ">全国66万医生等你来选</p>
        </div>
        <div (click)="goToPage2()"  style="margin-left: 2px; margin-top: 10px;">
          <img src="../../assets/image/askdoct.jpg" alt="找医生" height="95px">
        </div>
      </div>
    </div>
  </div>

   <!-- 轮播图区域 -->
  <div class="carousel-container" style="border-radius: 25px;">
    <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>
  <!-- 功能区 -->
<div class="function-area" style="border-radius: 20px; margin-left: 10px; margin-right: 10px;">
  <div class="function-row">
    <div class="function-item" *ngFor="let item of functionItems1" (click)="navigateTo(item.route)">
      <div class="icon">
        <ion-icon [name]="item.icon"></ion-icon>
      </div>
      <div class="label">{{ item.label }}</div>
    </div>
  </div>
  <div class="function-row">
    <div class="function-item" *ngFor="let item of functionItems2" (click)="navigateTo(item.route)">
      <div class="icon">
        <ion-icon [name]="item.icon"></ion-icon>
      </div>
      <div class="label">{{ item.label }}</div>
    </div>
  </div>
</div>

<div class="aidoctor">
  <ion-card>
    <ion-card-header style="margin: 0; padding: 0;">
      <!-- <ion-card-title>权威医生</ion-card-title> -->
      <div class="mid-nav">
        <div style="font-weight: bold; ">
          <h1>AI医生</h1>
        </div>
        <div class="under_slide">
          <ion-label (click)="goToViewAll()">查看全部</ion-label>
          <ion-ripple-effect></ion-ripple-effect>
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </div>
    </ion-card-header>
    <ion-card-content style="margin: 0; padding: 0;">
      <ion-list>
        <div style="display: flex; justify-content: space-between; margin: 0; padding: 0;">
          <ion-item style="margin: 0; padding: 0;" (click)="openInquiry(doctor)" *ngFor="let doctor of doctorList" lines="none">
            <div style="margin: 0; padding:0;">
              <div style="margin:0; padding:0px;">
                <img height="90px" [src]="doctor.get('avatar') || '../../assets/image/doctor7.png'" [alt]="doctor.get('name')" />
              </div>
              <div class="doctor-info" style="margin:0; padding:0px;">
                <h4 style="text-align:center;margin:0; padding:0px;">{{ doctor.get('name') }}({{ doctor.get('age') }}岁)</h4>
                <p style="text-align:center;margin:0; padding:0px;">{{ doctor.get('title') }}</p>
                <p style="text-align:center;margin:0; padding:0px;">{{ doctor.get('depart')?.name }}</p>
                <p style="width: 100%; margin:0; padding:0px;">飞码互联网医院</p>
              </div>
            </div>
          </ion-item>
        </div>
      </ion-list>
    </ion-card-content>
  </ion-card>
</div>
</ion-content>
