<ion-header [translucent]="true">
  <ion-toolbar class="searchbar">
    <ion-button slot="start" (click)="backHome()" color="primary">{{back}}</ion-button>
    <ion-title>
      <div class="user-info">
        <ion-avatar class="user-avatar">
          <img [src]="avatar" (error)="handleImageError()" alt="用户头像" class="avatar" />
        </ion-avatar>
        <span class="user-name">欢迎，{{ userName }}!</span>
      </div>
      我的每次问询记录
    </ion-title>
    <ion-buttons slot="end">
      <ion-icon name="menu-outline"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <!-- 数据加载指示器 -->
  <ion-spinner *ngIf="isLoading" name="crescent" class="loading-spinner"></ion-spinner>

  <!-- 数据展示区域 -->

  <div *ngIf="!isLoading && allMessage.length === 0" class="no-data">
    <ion-icon name="folder-open-outline" class="no-data-icon"></ion-icon>
    <p>暂无问询记录，赶快去咨询医生吧！</p>
  </div>

  <ion-list *ngIf="!isLoading && allMessage.length > 0">
    <ion-item *ngFor="let consultation of allMessage" lines="none">
      <ion-card class="message-card" (click)="toggleConsultation(consultation.id)">
        <ion-card-header>
          <ion-card-title>
            就诊时间: {{ consultation?.updatedAt | date:'short' }}
          </ion-card-title>
          <p><strong>问诊编号:</strong> {{ consultation.id }}</p> <!-- 显示编号 -->
        </ion-card-header>
        <ion-card-content>
          <ion-icon name="person-outline" slot="start" class="consultation-icon"></ion-icon>
          <p class="card-text"><strong>就诊医生:</strong> {{ consultation.data["doctor"]?.name }}</p>
          <ion-icon name="business-outline" slot="start" class="consultation-icon"></ion-icon>
          <p class="card-text"><strong>就诊部门:</strong> {{ consultation.data["depart"]?.name }}</p>
          <ion-icon name="medical-outline" slot="start" class="consultation-icon"></ion-icon>
          <p class="card-text"><strong>门诊名称:</strong> {{ consultation.data["title"] }}</p>
          <ion-icon name="document-text-outline" slot="start" class="consultation-icon"></ion-icon>
          <p class="card-text"><strong>对话记录:</strong></p>
          
          <!-- 根据展开状态显示对话内容 -->
          <div *ngIf="isConsultationExpanded(consultation.id)">
            <!-- 遍历 allContent，跳过前两个系统消息 -->
            <div *ngFor="let msg of consultation.data['allContent'] | slice:2" 
                 class="conversation-message" 
                 [ngClass]="{'user-message': msg.role === 'user', 'assistant-message': msg.role === 'assistant'}">
              <ion-icon [name]="getIcon(msg.role)" slot="start" class="consultation-icon"></ion-icon>
              <p class="message-text"><strong>{{ getRoleLabel(msg.role) }}：</strong> {{ msg.content }}</p>
            </div>
          </div>
        </ion-card-content>
      </ion-card>
    </ion-item>
  </ion-list>

  <!-- 错误提示 -->
  <div *ngIf="!isLoading && errorMessage" class="error-message">
    <p>{{ errorMessage }}</p>
  </div>
</ion-content>