<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      AIpicture
    </ion-title>
  </ion-toolbar>
</ion-header>

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

  <ion-card color="medium">
    <ion-card-header>
      <ion-card-title>AI小助手</ion-card-title>
      <ion-card-subtitle>填写以下信息，我来给你生成图片。</ion-card-subtitle>
    </ion-card-header>
    <ion-list>
      <ion-item>
        <!-- 生成提示词 -->
        <ion-textarea [value]="needs" (ionInput)="promptInput($event)" placeholder="DALLE3图片提示词"
          autoGrow="true"></ion-textarea>
      </ion-item>
      <ion-grid [fixed]="true">
        <ion-row style="text-align: center;">
          <ion-button (click)="createImage()" expand="block">生成图片 {{imagineWork?.progress || 0}}</ion-button>
        </ion-row>
      </ion-grid>
    </ion-list>
  </ion-card>

  <ion-card color="light">
    <ion-card-header>
      <ion-card-title>生成图片</ion-card-title>
      <ion-card-subtitle>根据您填写的信息，我给你生成的图片。</ion-card-subtitle>
    </ion-card-header>
    <ion-list>
      <ion-item>
        <!-- 生成结果 -->
        @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>
    </ion-list>
  </ion-card>



</ion-content>