<div class="p-image-children-editor">

  <h5 style="margin-left: 2.5%;"> preview: </h5>

  <div class="preview-box" #wrap>
    <canvas id="canvas" #canvas></canvas>
  </div>

  <div nz-row nzType="flex" nzAlign="middle">
    <div nz-col nzSpan="5" nzOffset="1">

      <h5> add background: </h5>

      <div class="bg-box">
        <app-upload-image-with-preview
          [picUrl]="bgItem?.url"
          (imageUploaded)="onBackgroundUploadSuccess($event)">
        </app-upload-image-with-preview>
      </div>
    </div>

    <div nz-col nzSpan="5" nzOffset="1" class="img-box"
         *ngFor="let it of hotZoneArr; let i = index">

      <div
        style="margin: auto; padding: 5px;  margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px">
        <span style="margin-left: 40%;"> item-{{i + 1}}
        </span>
        <button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)">
          X
        </button>

        <nz-divider style="margin-top: 10px;"></nz-divider>

        <div style="margin-top: -20px; margin-bottom: 5px; width: 100%;">

          <div *ngIf="customTypeGroupArr">
            <nz-radio-group [ngModel]="it.gIdx" (ngModelChange)="customRadioChange($event, it)"  style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
              <div *ngFor="let group of customTypeGroupArr; let gIdx = index" style="display: flex; ">
                <label nz-radio nzValue="{{gIdx}}">{{group.name}}</label>
              </div>
            </nz-radio-group>

          </div>

          <!-- <div *ngIf="!customTypeGroupArr">
            <nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)"  style="display: flex; align-items: center; justify-content: center">

              <label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
              <label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
              <label *ngIf="isHasText" nz-radio nzValue="text">文本</label>

            </nz-radio-group>
          </div> -->

        </div>

        <div *ngIf="customTypeGroupArr && customTypeGroupArr[it.gIdx]">

          <div *ngIf="customTypeGroupArr[it.gIdx].pic">
            <app-upload-image-with-preview
              [picUrl]="it?.pic_url"
              (imageUploaded)="onItemImgUploadSuccess($event, it)">
            </app-upload-image-with-preview>
          </div>

          <div *ngIf="customTypeGroupArr[it.gIdx].text" style="margin-top: 5px">
            <input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
          </div>

          <div *ngIf="customTypeGroupArr[it.gIdx].anima" align="center" style="margin-top: 5px">
            <button nz-button (click)="setAnimaBtnClick(i)" >
              <i nz-icon nzType="tool" nzTheme="outline"></i>
              配置龙骨动画
            </button>
          </div>

     

          <div *ngIf="customTypeGroupArr[it.gIdx].audio" style="display: flex;align-items: center; margin-top: 5px">
            <app-audio-recorder
              style="margin: auto"
              [audioUrl]="it.audio_url"
              (audioUploaded)="onItemAudioUploadSuccess($event, it)"
            ></app-audio-recorder>
          </div>

        </div>

        <!-- <div *ngIf="!customTypeGroupArr">

          <div *ngIf="it.itemType == 'pic'">
            <app-upload-image-with-preview
              [picUrl]="it?.pic_url"
              (imageUploaded)="onItemImgUploadSuccess($event, it)">
            </app-upload-image-with-preview>
          </div>

          <div *ngIf="it.itemType == 'text'">
            <input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
          </div>

          <div *ngIf="isHasAudio"
               style="width: 100%; margin-top: 5px; display: flex; align-items: center; justify-items: center;">
            <app-audio-recorder
              style="margin: auto"
              [audioUrl]="it.audio_url"
              (audioUploaded)="onItemAudioUploadSuccess($event, it)"
            ></app-audio-recorder>
          </div>

          <div *ngIf="it.itemType == 'rect' && isHasAnima" align="center" style="margin-bottom: 5px">
            <button nz-button (click)="setAnimaBtnClick(i)" >
              <i nz-icon nzType="tool" nzTheme="outline"></i>
              配置龙骨动画
            </button>
          </div>

        </div> -->



      </div>

    </div>


    <div nz-col nzSpan="5" nzOffset="1">

      <div class="bg-box">
        <button nz-button nzType="dashed" (click)="addBtnClick()"
                class="add-btn">
          <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
          <!--Add Image-->
          Add hot zone
        </button>
      </div>

    </div>
  </div>


  <nz-divider></nz-divider>

  <div class="save-box">

    <button style="margin-left: 200px" class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
            (click)="saveClick()" >
      <i nz-icon nzType="save"></i>
      Save
    </button>

    <div *ngIf="isCopyData" style="height: 40px; display: flex; justify-items: center;" >

      <label style="margin-left: 40px" nz-checkbox [(ngModel)]="bgItem.isShowDebugLine">显示辅助框</label>

      <button style="margin-left: 20px; margin-top: -5px" nz-button (click)="copyHotZoneData()"> 复制基础数据 </button>
      <div style="margin-left: 10px; margin-top: -5px" >

        <span>粘贴数据: </span>
        <input style="width: 100px;" type="text" nz-input [(ngModel)]="pasteData" >
        <button style="margin-left: 5px;" nz-button [disabled]="pasteData==''" nzType="primary" (click)="importData()">导入</button>

      </div>


    </div>


  </div>


</div>


<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>


<!--龙骨面板-->
<nz-modal [(nzVisible)]="animaPanelVisible" nzTitle="配置资源文件" (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">

  <div class="anima-upload-btn">
    <span style="margin-right: 10px">上传 ske_json 文件: </span>
    <nz-upload [nzShowUploadList]="false"
               nzAccept="application/json"
               [nzAction]="uploadUrl"
               [nzData]="uploadData"
               (nzChange)="skeJsonHandleChange($event)">
      <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
    </nz-upload>
    <i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
    <span *ngIf="skeJsonData['name']" style="margin-left: 10px"><u> {{skeJsonData['name']}} </u></span>
  </div>

  <div class="anima-upload-btn">
    <span style="margin-right: 10px">上传 tex_json 文件: </span>
    <nz-upload [nzShowUploadList]="false"
               nzAccept="application/json"
               [nzAction]="uploadUrl"
               [nzData]="uploadData"
               (nzChange)="texJsonHandleChange($event)">
      <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
    </nz-upload>
    <i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
    <span *ngIf="texJsonData['name']" style="margin-left: 10px"><u> {{texJsonData['name']}} </u></span>
  </div>

  <div class="anima-upload-btn">
    <span style="margin-right: 10px">上传 tex_png 文件: </span>
    <nz-upload [nzShowUploadList]="false"
               nzAccept = "image/*"
               [nzAction]="uploadUrl"
               [nzData]="uploadData"
               (nzChange)="texPngHandleChange($event)">
      <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
    </nz-upload>
    <i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
    <span *ngIf="texPngData['name']" style="margin-left: 10px"><u> {{texPngData['name']}} </u></span>
  </div>

  <div class="anima-upload-btn" *ngIf="customTypeGroupArr && customTypeGroupArr[curDragonBoneGIdx] && customTypeGroupArr[curDragonBoneGIdx].animaNames">
    提示：需包含以下动画: {{customTypeGroupArr[curDragonBoneGIdx].animaNames.toString()}}
  </div>

</nz-modal>


