<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 style="width: 30%; display: flex; align-items: center; flex-direction: column;">
          <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 style="white-space: nowrap">{{op[0]}}: </span> <input type="text" nz-input [(ngModel)]="op[1]"
                (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>

      <div *ngIf='audio'>
        
      <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>



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