<div >


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


  <!--配置龙骨面板-->
  <nz-modal [(nzVisible)]="panelVisible" (nzAfterClose)="panelCancel()" nzTitle="配置多矩形集合"
    (nzOnCancel)="panelCancel()" (nzOnOk)="panelOk()" nzOkText="保存">

    
    <div *ngFor="let r of rectArr; let i = index" style="margin-top:5px; width:100%; height:40px; border-radius: 0.5rem; border: solid 2px #ccc;
      display: flex; align-items:center; justify-content:space-between">
      <div>
        <span style="margin-left: 10px; font-weight: 600; font-size: 16px " >
          {{'rect-' + (i+1)}}
        </span>

      </div>
      <div>
        <nz-radio-group [ngModel]="r.color" (ngModelChange)="radioChange($event, r)"  style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
          <div *ngFor="let colorData of colorArr; let j = index" style="display: flex; ">
            <label nz-radio nzValue="{{colorData.color}}">{{colorData.name}}</label>
          </div>
        </nz-radio-group>
      </div>


      <div>

        <button nz-button (click)="deleteRect(r)" nzType="danger" style=" margin-right: 5px;">
          X
        </button>
      </div>

    </div>

    <button nz-button (click)="addRect()" nzType="dashed" style="margin-top: 20px; ">
      <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
      添加矩形
    </button>

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

<div style="justify-content:space-between">

</div>