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

<ion-content [fullscreen]="true">
  <!-- AI陪聊搭子区域 -->
    <section id="one">
      <ion-card>
        <ion-card-header>
          <ion-card-title>AI陪聊搭子</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-list>
            <ion-item *ngFor="let filmpartner of filmpartnerList" lines="none">
              <ion-thumbnail slot="start">
                <img [src]="filmpartner.get('avatar')" />
              </ion-thumbnail>
              <div class="filmpartner-info">
                <h3>{{ filmpartner.get('name') }}({{ filmpartner.get('age') }}岁)</h3>
                <p>{{ filmpartner.get('desc') }}</p>
                <p>欢迎与我聊天，分享你追剧体验。</p>
              </div>
              <ion-button (click)="opendazi(filmpartner)">开始聊天</ion-button>
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>
    </section>


  <!-- 角色互动区域 -->
  <section id="two">
    <ion-card>
      <ion-card-header>
        <ion-card-title>角色互动</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-list>
    <ion-item *ngFor="let filmrole of filmroleList" lines="none">
      <ion-thumbnail slot="start">
        <img [src]="filmrole.get('avatar')" />
      </ion-thumbnail>
      <div class="filmpartner-info">
        <h3>{{ filmrole.get('name') }}</h3>
        <p>{{ filmrole.get('title') }}</p>
        <p>快来和我聊天吧。</p>
      </div>
      <ion-button (click)="openrole(filmrole)">开始聊天</ion-button>
    </ion-item>
  </ion-list>
      </ion-card-content>
    </ion-card>
  </section>

  


<!-- <ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title size="large">AI追剧搭子</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <h1>页面：配置路由和参数的聊天页</h1>
  <ion-button (click)="goChat()">开始页面聊天</ion-button>
  <h1>组件：直接弹出的聊天组件</h1>
  <ion-button (click)="openChat()">开始新聊天</ion-button>
  <ion-button (click)="restoreChat('2DXJkRsjXK')">恢复会话</ion-button>
  <h1>示例：门诊问诊的智能体示例（ChatPanel组件）</h1>
  <ion-button (click)="opendazi()">追剧搭子</ion-button>

</ion-content> -->