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

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

  <div class="preview-box" [style.height]="isRotate ? '95vw' : '35vw'" #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="display: flex; align-items:center; justify-content:space-between;  margin-top: 30px; width: 50%;">
          <button style="float: right;" nz-button nzType="primary" nzSize="small" (click)="changeZIndex(i, -1)">
            <
          </button>
          <span style="color: dodgerblue;">层级</span>
          <button style="float: right;" nz-button nzType="primary" nzSize="small" (click)="changeZIndex(i, 1)">
            >
          </button>
         </div>

      <div
        style="margin: auto; padding: 5px;  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" style="background-color: rgb(249, 254, 177);">
            <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>

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


          </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[it.gIdx]?.checkbox" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
          <span *ngIf="customTypeGroupArr[it.gIdx].checkbox.title" style="margin-right: 20px;">{{customTypeGroupArr[it.gIdx].checkbox.title + ':'}}</span>
          <div *ngFor="let cItem of it?.checkbox?.list">
            <label style="" nz-checkbox [(ngModel)]="cItem.value" (ngModelChange)="checkboxChange(it.checkbox, it)">{{cItem.label}}</label>
          </div>
        </div>

        <div *ngIf="customTypeGroupArr[it.gIdx]?.radio" align="center" style="margin-top: 5px; margin-bottom: 10px;">
          <span style="margin-right: 5px; width: 50px;">{{customTypeGroupArr[it.gIdx].radio.title + ':'}}</span>

          <nz-radio-group [ngModel]="it.radioValue" (ngModelChange)="radioChange($event, it)"  style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
            <div *ngFor="let rItem of it?.radio?.list">
              <label nz-radio [nzValue]="rItem.key">{{rItem.label}}</label>
            </div>
          </nz-radio-group>
        </div>

        <div *ngIf="customTypeGroupArr[it.gIdx]?.select" align="center" >
          <span style="margin-right: 5px; width: 50px;">{{customTypeGroupArr[it.gIdx].select.title + ':'}}</span>
          <nz-select [(ngModel)]="it.selectType" nzAllowClear nzPlaceHolder="Choose" style="width: 70%; margin-top: 5px;">
            <nz-option *ngFor="let s of customTypeGroupArr[it.gIdx]?.select?.list" [nzValue]="s.value" [nzLabel]="s.label">
            </nz-option>
          </nz-select>
        </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 style="display: flex; align-items: center; justify-content: center;">
              <span style="width: 65px; " align="right">内容：</span><input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
            </div>

          </div>


          <div *ngIf="customTypeGroupArr[it.gIdx].labelArr" style="margin-top: 5px">
            <div *ngFor="let label of it.labelArr; let j = index" 
            style="display: flex; align-items: center; justify-content: center; margin:2px">
              <span style="" align="right">{{label.title}}：</span>
              <input style="width: 120px;" type="text" nz-input [(ngModel)]="label.value">
            </div>
          </div>


          <div *ngIf="customTypeGroupArr[it.gIdx].audioArr" style="margin-top: 5px">
            <div *ngFor="let audio of it.audioArr; let j = index" style="display: flex; flex-direction: column; " >
              <span style="">{{audio.title}}：</span>
              <app-audio-recorder
                style="margin: auto"
                [audioUrl]="audio.audio_url"
                (audioUploaded)="onItemAudioUploadSuccess($event, audio)"
              ></app-audio-recorder>
            </div>
          </div>

          <div *ngIf="customTypeGroupArr[it.gIdx].picArr" style="margin-top: 5px">
            <div *ngFor="let pic of it.picArr; let j = index" >
              <span style="" align="right">{{pic.title}}：</span>
              <app-upload-image-with-preview
                [picUrl]="pic.pic_url"
                (imageUploaded)="onItemImgUploadSuccessPicArr($event, 'pic_url', pic)">
              </app-upload-image-with-preview>
            </div>
          </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].animaSmall" align="center" style="margin-top: 5px">
            <button nz-button (click)="setAnimaSmallBtnClick(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 *ngIf="customTypeGroupArr[it.gIdx]?.action" style="display: flex;align-items: center; margin-top: 5px">
            <app-custom-action
              style="margin: auto"
              [item]="it ? it['actionData_' + it.gIdx] : {}"
              [type]="customTypeGroupArr[it.gIdx].action.type"
              [option]="customTypeGroupArr[it.gIdx].action.option"
              (save)="onSaveCustomAction($event, it)">
            ></app-custom-action>
          </div>

          <div *ngIf="customTypeGroupArr[it.gIdx]?.isShowPos" style="display: flex; align-items: center; justify-content: center; margin-top: 5px;">
            x: <input type="text" nz-input [(ngModel)]="it.posX" style="width: 80px; margin-right: 15px;" (blur)="saveItemPos(it)">
            y: <input type="text" nz-input [(ngModel)]="it.posY" style="width: 80px" (blur)="saveItemPos(it)">
          </div>

          <div *ngIf="customTypeGroupArr[it.gIdx]?.isShowSize" style="display: flex; align-items: center; justify-content: center; margin-top: 5px;">
            w: <input type="text" nz-input [(ngModel)]="it.sizeW" style="width: 80px; margin-right: 15px;" (blur)="saveItemSize(it)">
            h: <input type="text" nz-input [(ngModel)]="it.sizeH" style="width: 80px" (blur)="saveItemSize(it)">
          </div>

   

       

          <div *ngIf="customTypeGroupArr[it.gIdx]?.dropdown" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
            <span style="margin-right: 20px;">{{customTypeGroupArr[it.gIdx].dropdown.title + ':'}}</span>
            <a nz-dropdown [nzDropdownMenu]="menu">
              {{it.dropDownItem ? it.dropDownItem.label : 'select type'}}
              <i nz-icon nzType="down"></i>
            </a>
            <nz-dropdown-menu #menu="nzDropdownMenu">
              <ul nz-menu nzSelectable>
                <li  *ngFor="let cItem of customTypeGroupArr[it.gIdx].dropdown.list" (click)="dropdownClick(cItem, it)" nz-menu-item>
                  {{cItem.label}}
                </li>
              </ul>
            </nz-dropdown-menu>

          </div>


          <div *ngIf="customTypeGroupArr[it.gIdx]?.label" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
            <span style="width: 30%;">{{customTypeGroupArr[it.gIdx].label + ':'}}</span>
            <input type="text" nz-input [(ngModel)]="it.labelText" (blur)="saveText(it)">
          </div>

          <div *ngIf="customTypeGroupArr[it.gIdx]?.mathLabel" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
            <span style="width: 30%;">{{customTypeGroupArr[it.gIdx].mathLabel + ':'}}</span>
            <app-formula-input [(ngfModel)]="it.mathLabel" ></app-formula-input>
          </div>

          <div *ngIf="customTypeGroupArr[it.gIdx]?.multRect" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
            <app-mult-rect
              [rectArr]="it.multRect || []"
              (save)="onMultRectSave($event, it)"
            >
            </app-mult-rect>
          </div>

          <div *ngIf="customTypeGroupArr[it.gIdx]?.anchorGroup" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
            <app-anchor-group
            [activeIndex]="it.anchorGroup"
            (save)="onAnchorGroupSave($event, it)"
            >
            </app-anchor-group>
          </div>


          <div *ngIf="customTypeGroupArr[it.gIdx]?.isCopy" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
            <button nz-button (click)="copyItem(it)" >
              <i nz-icon nzType="copy" nzTheme="outline"></i>
              复制粘贴
            </button>  
          </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="配置资源文件"   (nzAfterClose)="closeAfterPanel()" (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>


