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

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


    <ion-list >
      <ion-item  >
        <app-edit-tag (onTagChange)="setTags($event)"></app-edit-tag>
      </ion-item>

      <ion-item  >
        <ion-textarea (ionInput)="onInputarea($event)" label="服装描述" placeholder="请尽可能描述衣服需要的功能" [autoGrow]="true"></ion-textarea>
      </ion-item>

    </ion-list>    
    <!-- <h1>父级页面传参</h1>
    @for(tag of editTags;track tag;){
      <p>{{tag}}</p>
    } -->
    <!-- GPT组件 -->
    <!-- <h1>GPT组件</h1>
     <ion-input type="" [(ngModel)]="inputValue"  ></ion-input> -->
    <ion-button (click)="printInputValue()">提交</ion-button>
    @if(!isComplete){
      <div>{{gptre}}</div>
    }
   
   @if(isComplete){
    <fm-markdown-preview class="content-style" [content]="gptre" ></fm-markdown-preview>
   }


   <ion-title>服装生成{{imagineWork?.progress || 0}}</ion-title>
   <!-- <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="服装填写" 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>
    }
  }
  {{   picdetail}}
</ion-content>
