<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-item>
          <!-- 未登录 -->
          @if(!currentUser.id){
            <ion-avatar slot="start">
              <img src="assets/user.png">
            </ion-avatar>
            <ion-label>
              <h2>用户未登录</h2>
              <p><a (click)="relogin()">请登录后重试</a></p>
            </ion-label>
          }
          <!-- 已登录 -->
          @if(currentUser.id){
            <ion-avatar slot="start">
              <img [src]="currentUser.get('avatar')||avatarUrl" alt="avatar">
            </ion-avatar>
            <ion-label>
              <h1>{{ currentUser.get("username") }}</h1>
              <h3> 个人画像：{{ currentUser.get("imagery") }}</h3>
            </ion-label>
          }
        </ion-item>
        </ion-card-content>
      </ion-card>
    </section>


    <!-- 推荐影视剧列表 -->
    <section>
      <ion-card class="recommend">
        <ion-card-header>
          <ion-card-title>为您推荐</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-button (click)="sendMessage()" expand="block" [disabled]="isLoading">推荐生成</ion-button>
          <ion-spinner *ngIf="isLoading" slot="start"></ion-spinner> <!-- 显示加载指示器 -->
          <ion-list>
            <ion-item class="re" *ngFor="let film of filmList.slice().reverse()">
              <ion-label>
                <h2>{{ film.get('title') }}</h2>
                <p>题材: {{ film.get('genre') }}</p>
                <p>评分: {{ film.get('grade') }}</p>
                <p>{{ film.get('desc') }}</p>
              </ion-label>
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>
    </section>
</ion-content>
