<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title size="large">角色互动</ion-title>
  </ion-toolbar>
</ion-header>

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

    <!-- 角色选择区 -->
    <section>
      <ion-card>
        <ion-card-header>
          <ion-card-title>选择角色</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-list>
            <ion-item *ngFor="let character of characters" (click)="selectCharacter(character)">
              <ion-avatar slot="start">
                <img [src]="character.avatar" alt="{{ character.name }} 头像">
              </ion-avatar>
              <ion-label>
                <h2>{{ character.name }}</h2>
                <p>{{ character.description }}</p>
              </ion-label>
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>
    </section>
  
    <!-- 角色对话区 -->
    <section *ngIf="selectedCharacter">
      <ion-card>
        <ion-card-header>
          <ion-card-title>与 {{ selectedCharacter.name }} 对话</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div class="chat-area">
            <div *ngFor="let message of chatMessages" class="message">
              <strong>{{ message.sender }}:</strong> {{ message.text }}
            </div>
          </div>
          <ion-item>
            <ion-input [(ngModel)]="userMessage" placeholder="输入您的消息..."></ion-input>
            <ion-button (click)="sendMessage()" slot="end">
              <ion-icon name="send"></ion-icon>
            </ion-button>
          </ion-item>
        </ion-card-content>
      </ion-card>
    </section>
</ion-content>
