<ion-header [translucent]="true">
  <ion-toolbar class="searchbar">
    <ion-button color="light" slot="start">
      <ion-back-button  defaultHref="/" ></ion-back-button>
    </ion-button>
    <ion-title>我的问诊记录</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 数据加载指示器 -->
  <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)" [attr.aria-expanded]="isConsultationExpanded(consultation.id)">
        <ion-card-header>
          <ion-card-title>
            就诊时间: {{ consultation?.updatedAt | date:'short' }}
            <ion-icon 
              [name]="isConsultationExpanded(consultation.id) ? 'chevron-up-outline' : 'chevron-down-outline'" 
              class="toggle-icon">
            </ion-icon>
          </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'}">
              <!-- 移除对话中的图标 -->
              <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>