<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      示例：图片生成{{imagineWork?.progress || 0}}
    </ion-title> 
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 生成提示词 -->
  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="DALLE3图片提示词" autoGrow="true"></ion-textarea>
  <ion-button (click)="createImage()" expand="block">生成图片</ion-button>
  <!-- 生成结果 -->
  @if(images.length) {
    @for(imageUrl of images;track imageUrl){
      <img [src]="imageUrl" alt="" srcset="">
    }
  }
  <!-- 生成状态 -->
  @if(!images.length){
    @if(imagineWork){
      <h1>生成中</h1>
    }
    @if(!imagineWork){
      <h1>未开始</h1>
    }
  }


  <ion-item *ngFor="let perfer of perferList" lines="none">
    <h3>{{perfer}}</h3>
  </ion-item>

  <!-- 用户登录状态 -->
  <ion-card>
    <!-- 未登录 -->
     @if(!currentUser?.id){
       <ion-card-header>
         <ion-card-title>请登录</ion-card-title>
         <ion-card-subtitle>暂无信息</ion-card-subtitle>
        </ion-card-header>
      }
        <!-- 已登录 -->
     @if(currentUser?.id){
      <ion-card-header>
        <ion-card-title>{{currentUser?.get("name")}} </ion-card-title>
        
      </ion-card-header>
      }
      <ion-card-content>
      @if(!currentUser?.id){
        <ion-button expand="block" (click)="signup()">注册</ion-button>
        <ion-button expand="block" (click)="login()">登录</ion-button>
      }
     @if(currentUser?.id){
      <ion-button expand="block" (click)="editUser()">编辑资料</ion-button>
      <ion-button expand="block" (click)="logout()" color="light">登出</ion-button>
    }
    </ion-card-content>
  </ion-card>

</ion-content>
