<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-item lines="none">
      <!-- 搜索框 -->
      <ion-searchbar slot="end" expand="with-icon" [placeholder]="placeholderText" class="custom-searchbar">
      </ion-searchbar>
      <!-- 客服图标 -->
      <ion-button slot="end" (click)="openCustomerService()" class="customer-service-button" color="light">
        <ion-icon name="headset" style="color: black;"></ion-icon>
      </ion-button>
    </ion-item>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 智能陪聊区 --> 
   <ion-card>
      <ion-card-header>
        <ion-card-title>智能陪聊</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p style="font-size: 16px;">以下是一些专业性的的智能心理陪聊师：</p>
        <ion-list>
          <ion-item *ngFor="let chatpartner of chatpartnerList">
            <ion-avatar slot="start">
              <img [src]="chatpartner.get('avatar') || '/assets/img/2.png'" [alt]="chatpartner.get('name')"/>
            </ion-avatar>
            <ion-label>
              <h2>{{ chatpartner.get('name') }}</h2>
              <p style="font-size: 16px;">专业领域：{{ chatpartner.get('expertise') }}</p>
            </ion-label>
            <ion-button slot="end" (click)="clickToConsult(chatpartner)" style="margin-left: 10px;">开始陪聊</ion-button>
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>
  <!-- 聊天服务区 -->  
   <ion-card>
      <ion-card-header>
        <ion-card-title style="flex: 1;">普通聊天</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-list>
        <ion-item *ngFor="let chatcompanion of chatcompanionList">
          <ion-avatar slot="start">
            <img [src]="chatcompanion.get('avatar') || '/assets/img/2.png'" [alt]="chatcompanion.get('name')"/>
          </ion-avatar>
          <ion-label>
            <h2>{{ chatcompanion.get('name') }}</h2>
            <p style="font-size: 15px;">个人简介：{{ chatcompanion.get('bio') }}</p>
          </ion-label>
          <ion-button (click)="goChat(chatcompanion)" style="margin-left: 0px;">开始聊天</ion-button>
        </ion-item>
        <p style="font-size: 16px; text-indent:2em;">在这里，我是你的聊天伙伴，无论是生活上的开心，还是工作上的糟糕，你都可以跟我分享，这里是属于你一个人的空间，你可以大胆放心的使用。</p>
        </ion-list>
      </ion-card-content> 
    </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 question of questions" (click)="question.expanded = !question.expanded">
            <ion-label>
              <h2>{{ question.title }}</h2>
              <p style="font-size: 16px; " *ngIf="question.expanded">{{ question.advice }}</p>
            </ion-label>
            <ion-icon name="chevron-down" slot="end" *ngIf="!question.expanded"></ion-icon>
            <ion-icon name="chevron-up" slot="end" *ngIf="question.expanded"></ion-icon>
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>
</ion-content>