<div *ngIf="!isPreviewTemplate" class="model-content">

  <div style="height: 30px;"></div>

  <div style="margin: 20px;" >
    <h2>模板类型选择</h2>
    <nz-radio-group [ngModel]="item.templateType" (ngModelChange)="templateTypeChange($event)">
      <div style="display: flex; flex-wrap: wrap; width: 100%;">
        <div *ngFor="let typeData of templateTypeArr">
          <label style="margin-left: 5px;" nz-radio [nzValue]="typeData.value">{{typeData.name}}</label>
         </div>
      </div>
    </nz-radio-group>

  
  </div>

  <div style="margin: 25px;">
    <label style="" nz-checkbox [(ngModel)]="item.isTurnPage" (ngModelChange)="save()">是否翻页</label>
  </div>
 
  <nz-divider></nz-divider>



  <div *ngFor="let it of item.quesArr; let i = index" style="padding: 30px; border: solid 5px #ccc; 
    border-radius: 15px; width: 1360px; margin: 30px; ">
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <h2>配置页-{{i+1}}：</h2>
      <button style="float: right;" nz-button nzType="danger"  (click)="deleteBtnClick(i)">
        X
      </button>
    </div>
    <div>
      <h4> 标注： </h4>
      <app-custom-hot-zone
      [bgItem]="it.bgItem"
      [hotZoneItemArr]="it.hotZoneItemArr"
      [customTypeGroupArr]="customTypeGroupArr"
      (save)="saveHotZone(it, $event)"
      >
      </app-custom-hot-zone>

    </div>   

  </div>



  <div style="padding: 30px;">
    <button nz-button nzType="dashed" (click)="addBtnClick()" style="width: 200px; height: 100px;">
      <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
      添加问题
    </button>
  </div>

  <div style="margin: 30px; padding-bottom: 30px;">
    <button style="" nz-button nzType="primary"  (click)="showPreviewTemplate()">
      预览生成的表单
    </button>
  </div>
  

</div>




<div *ngIf="isPreviewTemplate" style="margin: 30px;">

  <div *ngIf="!baseData" style="margin: 30px; padding-top: 30px;">
    <button style="" nz-button nzType="primary"  (click)="hidePreviewTemplate()">
      返回
    </button>
  </div>



  <div *ngIf="tempItem && tempItem.quesArr">
    <div *ngFor="let tempHotZoneItem of tempItem.quesArr; let pageIdx = index" style="border: 1px #ccc solid; border-radius: 15px; width: 1000px; padding: 30px; margin: 30px;" >

      <div *ngIf="item.quesArr && item.quesArr.length > 0">

        <div *ngIf="item.isTurnPage" style="display: flex; align-items: center; justify-content: space-between;">
          <h2>页-{{pageIdx+1}}：</h2>
          <button style="float: right;" nz-button nzType="danger"  (click)="deletePageBtnClick(pageIdx)">
            X
          </button>
        </div>

        <div *ngFor="let it of tempHotZoneItem; let i = index;">
    
          <div *ngIf="getItemHasInputText(it)" style="margin: 20px;">
            <span style="margin-left:20px;">{{it.labelArr[0]?.value}}：</span>
            <input type="text" nz-input [(ngModel)]="it[it.labelArr[1].value]" (blur)="saveItemText(it, it.labelArr[1].value)" style=" width: 200px">
          </div>
    
          <div *ngIf="getItemHasInputAudio(it)" style="margin: 20px; display: flex;">
            <span style="margin-left:20px;">{{it.labelArr[0]?.value}}：</span>
            <app-audio-recorder
              [audioUrl]="it[it.labelArr[1].value]"
              (audioUploaded)="onItemAudioUploadSuccess($event, it, it.labelArr[1].value)"
            ></app-audio-recorder>
          </div>
    
          <div *ngIf="getItemHasInputPic(it)" style="margin: 20px; display: flex;">
            <span style="margin-left:20px;">{{it.labelArr[0]?.value}}：</span>
            <div style="width: 300px;">
              <app-upload-image-with-preview
                [picUrl]="it[it.labelArr[1].value]"
                (imageUploaded)="onItemImgUploadSuccess($event, it, it.labelArr[1].value)">
              </app-upload-image-with-preview>
            </div>
          </div>
    
        </div>
      </div>

    </div>
  </div>

  
  

  <div *ngIf="item.isTurnPage" style="padding: 30px;">
    <button nz-button nzType="dashed" (click)="addOnePageBtnClick()" style="width: 200px; height: 100px;">
      <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
      添加一页
    </button>
  </div>

</div>







<!-- <nz-modal [(nzVisible)]="isShowKK" nzTitle="KK-音标" (nzOnCancel)="KKHandleCancel()" (nzOnOk)="KKHandleOk()">
  
  <div style="width: 100%; display:flex; flex-wrap:wrap; ;">

    <div *ngFor="let KK of KKArray" style="margin: 10px; font-size: 20px; cursor:pointer ">
      <div *ngIf="KK == curSelectKK" style="border: 2px solid #ccc; border-radius: 5px; width: 40px; text-align:center; background: #aaaaff">
        {{KK}}
      </div>
      <div *ngIf="KK != curSelectKK" (click)="curSelectKK = KK" style="border: 2px solid #ccc; border-radius: 5px; width: 40px; text-align:center">
        {{KK}}
      </div>
    </div>

  </div>
</nz-modal> -->

