<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-title>智养人生欢迎您</ion-title>
  </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 -->
<!-- parse-dashboard --appId dev --masterKey devmk --serverURL http://dev.fmode.cn:1337/parse --appName DevServer -->
<!-- 1234567890 1234 -->

<ion-content [fullscreen]="true">
  @for (doctor of realDoctorList;track doctor) {
    @if(currentUser.id == doctor.data["user"]?.objectId){
      <ion-card>
        <ion-card-header>
          <ion-card-title>{{currentUser.data['realname']}}医生，欢迎您！</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-button expand="block" (click)="goToPageUser()">我的预约</ion-button>
          <!-- <ion-button (click)="goToPageDoctor()">查看医生</ion-button>
          <ion-button (click)="goToPageDrug()">查看药品</ion-button> -->
        </ion-card-content>
      </ion-card>
    }
  }
  
  <!-- @if (currentUser?.id !=  adminList[0]){ -->
    <!-- 轮播图区域 -->
    <div class="carousel-container" style="border-radius: 25px; margin: 5px auto;">
      <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
        <div class="slide" *ngFor="let image of images">
          <img [src]="image" alt="轮播图" height="100px" >
        </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="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="https://app.fmode.cn/dev/jxnu/202226701019/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="https://app.fmode.cn/dev/jxnu/202226701019/askdoct.jpg" alt="找医生" height="95px">
          </div>
        </div>
      </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>
  
  <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)="goToPage1()">查看全部</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="text-align:center;width: 100%; margin:0; padding:0px;">智养医院</p>
                </div>
              </div>
            </ion-item>
          </div>
        </ion-list>
      </ion-card-content>
    </ion-card>
  </div>
  <!-- <div class="clinic-container"  style=" margin:0px 10px;box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.163), -2px -2px 2px 0px rgba(0, 0, 0, 0.148);">
    <div class="clinic-header">
      <h2>{{title}}</h2>
      <p>{{subtitle}}</p>
    </div>
    
    <div class="ads-container">
      <div class="ad-card" *ngFor="let ad of clinicAds" [style.background-color]="ad.backgroundColor">
        <div class="ad-content">
          <div class="text-content">
            <h3>{{ad.title}}</h3>
            <p *ngIf="ad.price" class="price">{{ad.price}}</p>
            <p class="description">{{ad.description}}</p>
            <ion-button fill="outline" size="small">
              立即查看
              <ion-icon name="chevron-forward-outline"></ion-icon>
            </ion-button>
          </div>
          <div class="image-container">
            <img [src]="ad.image" [alt]="ad.title">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="service-container"  style=" margin:5px 10px;box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.163), -2px -2px 2px 0px rgba(0, 0, 0, 0.148);">
    <div class="service-header">
      <div class="title-section">
        <h2>{{title1}}</h2>
        <p>{{subtitle1}}</p>
      </div>
      <ion-button fill="clear" size="small">
        查看更多 <ion-icon name="chevron-forward-outline"></ion-icon>
      </ion-button>
    </div>
  
    <div class="service-grid">

      <div class="large-cards">
        <div class="service-card large" 
             *ngFor="let service of services | slice:0:2"
             [style.background-color]="service.backgroundColor">
          <div class="card-content">
            <div class="text-content">
              <h3>{{service.title}}</h3>
              <p>{{service.description}}</p>
              <ion-button *ngIf="service.hasDetail" fill="outline" size="small">
                查看详情
              </ion-button>
            </div>
            <div class="image-container">
              <img [src]="service.image" [alt]="service.title">
              <ion-badge *ngIf="service.isHot" color="danger">热门</ion-badge>
            </div>
          </div>
        </div>
      </div>
  
      <div class="small-cards">
        <div class="service-card small" 
             *ngFor="let service of services | slice:2">
          <div class="card-content">
            <div class="text-content">
              <h3>{{service.title}}</h3>
              <p>{{service.description}}</p>
            </div>
            <div class="image-container">
              <img [src]="service.image" [alt]="service.title">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> -->

</ion-content>
