<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; display: flex; align-items: center;">
            <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 *ngIf="it.isOption" style="margin-left: 30px;">
              <nz-radio-group [ngModel]="it.optionValue" (ngModelChange)="radioChange($event, it, 'optionValue')">
                <div style="display: flex; flex-wrap: wrap; width: 100%;">
                  <label style="margin-left: 5px;" nz-radio [nzValue]="'isRight'">{{'正确'}}</label>
                  <label style="margin-left: 5px;" nz-radio [nzValue]="'isWrong'">{{'错误'}}</label>
                </div>
              </nz-radio-group>
            </div>  
            
            <div *ngIf="it.labelArr[0].value == '正确答案'">
              <span style="margin-left:20px;">必含单词 (可不填)：</span>
              <input type="text" nz-input [(ngModel)]="it.rightWord" (blur)="saveItemText(it, it.rightWord)" style=" width: 100px;">
              
            </div>
          </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; align-items:flex-start;">
            <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 style="display: flex; align-items: center; justify-content: space-between;">
              <button style="float: right;" nz-button (click)="onDeleteImage(it, it.labelArr[1].value)">
                x
              </button>
            </div>
            
            <div *ngIf="it.isOption" style="margin-left: 30px;">
              <nz-radio-group [ngModel]="it.optionValue" (ngModelChange)="radioChange($event, it, 'optionValue')">
                <div style="display: flex; flex-wrap: wrap; width: 100%;">
                  <label style="margin-left: 5px;" nz-radio [nzValue]="'isRight'">{{'正确'}}</label>
                  <label style="margin-left: 5px;" nz-radio [nzValue]="'isWrong'">{{'错误'}}</label>
                </div>
              </nz-radio-group>
            </div>    
          </div>


          <div *ngIf="getItemHasTargetType(it, 'multResRect')" style="margin-left: 30px; ">

            <div style="display: flex; margin-bottom: 15px; ">
              <span style="margin-left:0px;">{{it.labelArr[0].value}}：</span>
              <nz-radio-group [ngModel]="it.multResType" (ngModelChange)="radioChange($event, it, 'multResType')">
                <div style="display: flex; flex-wrap: wrap; width: 100%;">
                  <label style="margin-left: 5px;" nz-radio [nzValue]="'text'">文本</label>
                  <!-- <label style="margin-left: 5px;" nz-radio [nzValue]="'audio'">音频</label> -->
                  <label style="margin-left: 5px;" nz-radio [nzValue]="'pic'">图片</label>
                </div>
              </nz-radio-group>
            </div>

            <div *ngIf="it.multResType == 'text'">
              <input type="text" nz-input [(ngModel)]="it.multResText" (blur)="saveItemText(it, 'multResText')" style=" width: 500px;">
            </div>

            <div *ngIf="it.multResType == 'audio'">
              <app-audio-recorder
                [audioUrl]="it.multResAudio"
                (audioUploaded)="onItemAudioUploadSuccess($event, it, 'multResAudio')"
              ></app-audio-recorder>
            </div>

            <div *ngIf="it.multResType == 'pic'" style="display: flex;">
              <div style="width: 300px;">
                <app-upload-image-with-preview
                  [picUrl]="it.multResPic"
                  (imageUploaded)="onItemImgUploadSuccess($event, it, 'multResPic')">
                </app-upload-image-with-preview>
              </div>
              <button style="" nz-button (click)="onDeleteImage(it, 'multResPic')">
                x
              </button>
            </div>


          </div>

          <div *ngIf="getItemHasTargetType(it, 'listInputPic')">

            <div *ngFor="let pic of it[it.labelArr[1].value]||[]; let j = index" style="margin-top: 5px;" >
              <span style="margin-left:0px;">{{it.labelArr[0].value}}-{{j+1}}：</span>
              <div style="display: flex;">
                <div style="width: 300px;">
                  <app-upload-image-with-preview
                    [picUrl]="pic.pic_url"
                    (imageUploaded)="onItemImgUploadSuccess($event, pic, 'pic_url')">
                  </app-upload-image-with-preview>
                </div>
                <button style="" nz-button nzType="danger"  (click)="deleteListItem(it[it.labelArr[1].value], j)">
                  X
                </button>
              </div>
            </div>

            <div style="padding: 30px;">
              <button nz-button nzType="dashed" (click)="addListItem(it, it.labelArr[1].value)" style="width: 200px; height: 50px;">
                <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
                添加 {{ it.labelArr[0].value}}
              </button>
            </div>

            <nz-divider></nz-divider>

          </div>


          <div *ngIf="getItemHasTargetType(it, 'listInputText')">

            <div *ngFor="let textData of it[it.labelArr[1].value]||[]; let j = index" style="margin-top: 5px;" >
              <span style="margin-left:0px;">{{it.labelArr[0].value}}-{{j+1}}：</span>
              <div style="display: flex;">
                  <input type="text" nz-input [(ngModel)]="textData.value" (blur)="saveItemText(textData, 'value')" style=" width: 500px;">
                <button style="" nz-button nzType="danger"  (click)="deleteListItem(it[it.labelArr[1].value], j)">
                  X
                </button>
              </div>
            </div>

            <div style="padding: 30px;">
              <button nz-button nzType="dashed" (click)="addListItem(it, it.labelArr[1].value)" style="width: 200px; height: 50px;">
                <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
                添加 {{ it.labelArr[0].value}}
              </button>
            </div>

            <nz-divider></nz-divider>

          </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>

