<div class="position-relative">


  <button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;" >
    <i nz-icon nzType="tool" nzTheme="outline"></i>
    {{btnName}}
  </button>


  <!--配置龙骨面板-->
  <nz-modal [(nzVisible)]="panelVisible" (nzAfterClose)="closePanel()" [nzTitle]="btnName" (nzOnCancel)="panelCancel()" (nzOnOk)="panelOk()" nzOkText="保存">
    <div>
      <h4>基础内容:</h4>
     
      <div style="margin-bottom: 10px; width: 80%; margin: auto;">

        <!-- <nz-radio-group [ngModel]="item.type" (ngModelChange)="radioChange($event)">
          <label nz-radio nzValue="pic">图片</label>
          <label nz-radio nzValue="text">文本</label>
        </nz-radio-group> -->

        <div *ngIf="item.type == 'pic'">
          <app-upload-image-with-preview
            [picUrl]="item?.pic_url"
            (imageUploaded)="onItemImgUploadSuccess($event, item)">
          </app-upload-image-with-preview>
        </div>
  
        <div *ngIf="item.type == 'text'">
          <input type="text" nz-input [(ngModel)]="item.text" (blur)="saveText(item)">
        </div>

        <div *ngIf="item.type == 'anima'" style="margin-left: 100px;">
          <app-upload-dragon-bone
            [skeJsonData]=item.skeJsonData
            [texJsonData]=item.texJsonData
            [texPngData]=item.texPngData
            (save)="saveAnima($event)"
          >
          </app-upload-dragon-bone>
        </div>
      </div>      
     

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

      <h4>状态设置:</h4>
      <div style="display: flex; justify-content: space-around;">

        <div style="width: 30%; display: flex; align-items: center; flex-direction: column;">
          <h5> 开始状态 </h5>
          <div *ngFor="let op of item.changeOption; let i = index" style="margin-bottom: 5px; ">
            <div style="display: flex; align-items: center; justify-content: center;">
              <span>{{op[0]}}: </span> <input type="text" nz-input [(ngModel)]="op[1]" (blur)="saveText(op)" style="margin-left: 5px;">
            </div>
          </div>
        </div>


        <div style="width: 30%; display: flex; align-items: center; flex-direction: column; ">
          <h5> 切换时间 </h5>
          <div style="display: flex; width: 100%; align-items: center; justify-content: center;">
            <span>time: </span> <input type="text" nz-input [(ngModel)]="item.changeTime" (blur)="saveText(item.changeTime)" style="width: 80px; margin-left: 5px;">
          </div>
        </div>


        <div style="width: 30%; display: flex; align-items: center; flex-direction: column;">
          <h5> 结束状态 </h5>
          <div *ngFor="let op of item.changeOption; let i = index" style="margin-bottom: 5px; ">
            <div style="display: flex; align-items: center; justify-content: center;">
              <span>{{op[0]}}: </span> <input [disabled]="op[2] == null" type="text" nz-input [(ngModel)]="op[2]" (blur)="saveText(op)" style="margin-left: 5px;">
            </div>
          </div>
        </div>

      </div>

      <div style="display: flex; align-items: center; justify-content: center; margin-top: 10px;">
        <button style="margin-left: 20px; margin-top: -5px" nz-button (click)="copyChangeData()"> 复制数据 </button>
        <div style="margin-left: 20px; 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>
     

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

      <h4> 音频设置 </h4>

      <app-audio-recorder
        style="margin: auto"
        [audioUrl]="item?.audio_url"
        (audioUploaded)="onItemAudioUploadSuccess($event, item)"
      ></app-audio-recorder>
     
    </div>
   


<!-- 
    <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 && 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 && 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 && texPngData['name']" style="margin-left: 10px"><u> {{texPngData['name']}} </u></span>
    </div>

    <div class="anima-upload-btn" *ngIf="animaNames && animaNames.length > 0">
      提示:需包含动画: {{animaNames.toString()}}.
    </div> -->

  </nz-modal>

</div>