<!--头部内容，包含标题和返回按钮-->
<app-custom-header [param]="['个性化生成','    ',]"></app-custom-header>
<!--正文部分-->
<ion-content>
  <!--性别选择，包含两个卡片-->
  <div id="gender">
    <ion-card *ngFor="let i of [0,1]" (click)="toggleActive(gender,i,'gender')">
      <ion-img [src]="getImageSrc(gender,i,'gender' + (i+1))"></ion-img>
    </ion-card>
  </div>
  <!--年龄选择，包含四个卡片-->
  <div id="age">
    <ion-card *ngFor="let i of [0,1,2,3]" (click)="toggleActive(age,i,'age')">
      <ion-img [src]="getImageSrc(age,i,'age' + (i+1))"></ion-img>
    </ion-card>
  </div>
  <!--身高选择，包含五个卡片-->
  <div id="height">
    <ion-card *ngFor="let i of [0,1,2,3,4]" (click)="toggleActive(height,i,'height')">
      <ion-img [src]="getImageSrc(height,i, 'height' + (i+1))"></ion-img>
    </ion-card>
  </div>
  <!--体重选择，包含五个卡片-->
  <div id="weight">
    <ion-card *ngFor="let i of [0,1,2,3,4]" (click)="toggleActive(weight,i,'weight')">
      <ion-img [src]="getImageSrc(weight,i, 'weight' + (i+1))"></ion-img>
    </ion-card>
  </div>
  <!--季节选择，包含四个卡片-->
  <div id="season">
    <ion-card *ngFor="let i of [0,1,2,3]" (click)="toggleActive(season,i,'season')">
      <ion-img [src]="getImageSrc(season,i,'season' + (i+1))"></ion-img>
    </ion-card>
  </div>
  <!--风格描述输入框-->
  <div id="styleDesc">
    <ion-textarea label="风格描述" labelPlacement="floating" fill="solid" [autoGrow]="true"
      [(ngModel)]="userProfile.customDesc"></ion-textarea>
    <ion-text (click)="onHelperTextClick()" id="helper-text">没有想法？点击展开</ion-text>
  </div>
  <!--可供用户选择的提示词，默认隐藏，通过点击风格输入框中的helper-text展开-->
  <div id="option-prompt">
    <!--区域风格，包含七个卡片-->
    <div id="areaStyle" class="scroll-container">
      <div class="scroll-x">
        <ion-card *ngFor="let i of [0,1,2,3,4,5,6];" (click)="toggleActive(areaStyle,i,'areaStyle')">
          <ion-img [src]="getImageSrc(areaStyle,i,'areaStyle' + (i+1))"></ion-img>
          @if(areaStyle[getKeyByIndex(areaStyle,i)]) {
          <ion-img class="checked" src="/assets/generate-option-style/checked.png"></ion-img>}
        </ion-card>
      </div>
      @if(getSelectedKey(areaStyle)!="null") {
      <p class="title"> {{getSelectedKey(areaStyle)}} </p>
      <p class="keyword">{{description[getSelectedKey(areaStyle)]}}</p>
      }
      @if(getSelectedKey(areaStyle) == "null") {
      <p class="title"> 请选择区域风格 </p>
      }
    </div>
    <!--功能场景，包含七个卡片-->
    <div id="function" class="scroll-container">
      <div class="scroll-x">
        <ion-card *ngFor="let i of [0,1,2,3,4,5];" (click)="toggleActive(function,i,'function')">
          <ion-img [src]="getImageSrc(function,i,'function' + (i+1))"></ion-img>
          @if(function[getKeyByIndex(function,i)]) {
          <ion-img class="checked" src="/assets/generate-option-style/checked.png"></ion-img>}
        </ion-card>
      </div>
      @if(getSelectedKey(function)!="null") {
      <p class="title"> {{getSelectedKey(function)}} </p>
      <p class="keyword">{{description[getSelectedKey(function)]}}</p>
      }
      @if(getSelectedKey(function) == "null") {
      <p class="title"> 请选择功能场景 </p>
      }
    </div>
    <!--设计理念，包含九个卡片-->
    <div id="designIdea" class="scroll-container">
      <div class="scroll-x">
        <ion-card *ngFor="let i of [0,1,2,3,4,5,6,7,8];" (click)="toggleActive(designIdea,i,'designIdea')">
          <ion-img [src]="getImageSrc(designIdea,i,'designIdea' + (i+1))"></ion-img>
          @if(designIdea[getKeyByIndex(designIdea,i)]) {
          <ion-img class="checked" src="/assets/generate-option-style/checked.png"></ion-img>}
        </ion-card>
      </div>
      @if(getSelectedKey(designIdea)!="null") {
      <p class="title"> {{getSelectedKey(designIdea)}} </p>
      <p class="keyword">{{description[getSelectedKey(designIdea)]}}</p>
      }
      @if(getSelectedKey(designIdea) == "null") {
      <p class="title"> 请选择设计理念 </p>
      }
    </div>
    <!--艺术风格，包含六个卡片-->
    <div id="artStyle" class="scroll-container">
      <div class="scroll-x">
        <ion-card *ngFor="let i of [0,1,2,3,4,5];" (click)="toggleActive(artStyle,i,'artStyle')">
          <ion-img [src]="getImageSrc(artStyle,i,'artStyle' + (i+1))"></ion-img>
          @if(artStyle[getKeyByIndex(artStyle,i)]) {
          <ion-img class="checked" src="/assets/generate-option-style/checked.png"></ion-img>}
        </ion-card>
      </div>
      @if(getSelectedKey(artStyle)!="null") {
      <p class="title"> {{getSelectedKey(artStyle)}} </p>
      <p class="keyword">{{description[getSelectedKey(artStyle)]}}</p>
      }
      @if(getSelectedKey(artStyle) == "null") {
      <p class="title"> 请选择艺术风格 </p>
      }
    </div>


  </div>

  <ion-button (click)="sendMsgAndGoGenerateResult()">生成</ion-button>
  <ion-button>导入默认风格</ion-button>
</ion-content>

<!--处理动画，默认隐藏-->
<div id="container">
  <div id="popover-container">
    <img style="width: 100px;" src="/assets/generate-option-style/load_animation.gif">
    <p>正在生成，请耐心等待...</p>
    <ul>
      @for(step of taskList;track step.title;){
      <div>
        <!-- 待开始 -->
        @if(step.progress==0 && !step.error){
        <ion-icon name="radio-button-off-outline"></ion-icon>
        }
        <!-- 进行中 -->
        @if(step.progress!=0 && step.progress!=1){
        <ion-icon name="reload-outline"></ion-icon>
        }
        <!-- 已完成 -->
        @if(step.progress==1){
        <ion-icon name="checkmark-circle-outline"></ion-icon>
        }
        <!-- 已出错 -->
        @if(step.error){
        <ion-icon name="close-circle-outline"></ion-icon>
        }
        {{step.title}} @if(step.progress){<span>{{step.progress * 100 | number:"2.0-0"}}%</span>}

        @if(step.error){
        <span style="color:red;">{{step.error}}</span>
        }
      </div>
      }
    </ul>
    <ion-button (click)="hidePopover()">确定</ion-button>
  </div>
</div>