<div class="position-relative">

  <div style="padding: 0px;">
    <h1>ai-class</h1>

    <div style="display: flex; align-items: center; justify-content: center;">
      <div style=" margin-left: 220px; display: flex; align-items: center;">
        <span style="">开始时间: </span>
        <input style="margin: 5px; width: 60px;" type="text" nz-input [(ngModel)]="data.startTime" (blur)="saveTime()">
        <span >秒</span>
      </div>

      <div style="width: 200px; margin-left: 30px; display: flex; align-items: center;">
        <span style="">总时长: </span>
        <input style="margin: 5px; width: 60px;" type="text" nz-input [(ngModel)]="data.time" (blur)="saveTime()">
        <span >秒</span>
      </div>
      <div>
        <button style="margin-left: 20px;" nz-button nzType="primary" (click)="saveBtnClick()">
          <i nz-icon nzType="save" nzTheme="outline"></i>
          保存
        </button>
      </div>
  
    </div>
 

    <div class="bg-box" style="position: absolute; width: 210px;" [style.marginTop]="itemH + 'px'">

      <div *ngFor="let it of data.itemArr; let i = index" style="width: 210px; " [style.height]="itemH + 'px'">

        <div style=" margin: auto; width:90%; height: 100%; padding: 10px; border: 1px dashed #aaa; border-radius: 10px"
          [style.backgroundColor]="it == curSelectItem ? '#9ab9ff' : '#ffffff'"
          (click)="clickedItem(it)"
          >
          <span style="margin-left: 5%; font-weight: 700;" align="center"> {{i}} - {{it.data.name}}
          </span>
          <button *ngIf="i != 0" 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; display: flex; align-items: center; justify-content: space-between;" align="center">

            <div>
              <button nz-button (click)="editBtnClick()" style="margin-top: 5px; border-radius: 0.5rem; border: 1px solid #ddd;" >
                <!-- <i nz-icon nzType="tool" nzTheme="outline"></i> -->
                配置
              </button>
            </div>
     
            {{it.nickName || it.data.name}}

          </div>
          
       


    



        </div>
        

      </div>
      
      <div style="width: 100%; margin-top: 20px" align="center">
        <button nz-button nzType="dashed" (click)="addBtnClick()"
        style="width: 180px; height: 60px;">
          <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
          Add 
        </button>
      </div>
     
    </div>
    


    <div class="preview-box" style="margin-left: 220px;" #wrap>
      <canvas id="canvas" #canvas></canvas>
    </div>




  </div>




</div>


<!-- 类型基础数据面板 -->
<nz-modal 
[(nzVisible)]="isShowItemBase" 
[nzTitle]="curSelectItem?.data.name || ''" 
(nzOnCancel)="itemBaseCancel()" 
(nzOnOk)="itemBaseOk()">

<div style="width: 100%;" align='center'>

  <div *ngIf="curSelectItem" style="display: flex; margin: 10px; align-items: center; justify-content: center;">
    <span style="width: 80px; text-align: right; margin-right: 10px;">{{'自定义名称: '}}</span> 
    <input style="width: 200px" type="text" nz-input [(ngModel)]="curSelectItem.nickName" >
  </div>

  <div *ngIf="curSelectItem?.data.pic">

    <div *ngIf="curSelectItem.data.pic.key">
      <span>{{curSelectItem.data.pic.key + ':'}}</span>
    </div>
    <div style="width: 80%;">
      <app-upload-image-with-preview
        [picUrl]="curSelectItem?.pic_url"
        (imageUploaded)="onItemImgUploadSuccess($event, curSelectItem)">
      </app-upload-image-with-preview>
    </div>
    <div *ngIf="curSelectItem.data.fill">
      <label nz-checkbox [(ngModel)]="curSelectItem.isFill">填充背景</label>
    </div>

  </div>

  <div *ngIf="curSelectItem?.data.anima">
    <app-upload-dragon-bone
      [skeJsonData]="curSelectItem.skeJsonData || {}"
      [texJsonData]="curSelectItem.texJsonData || {}"
      [texPngData]="curSelectItem.texPngData || {}"
      (save)="onDragonBoneUploadSuccess($event)">
    </app-upload-dragon-bone>
  </div>

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

  <div *ngIf="curSelectItem?.data.labelArr">
    <div *ngFor="let label of curSelectItem.data.labelArr">
      <div style="display: flex; margin: 10px; align-items: center; justify-content: center;">
        <span style="width: 80px; text-align: right; margin-right: 10px;">{{label.key + ': '}}</span> 
        <input style="width: 200px" type="text" nz-input [(ngModel)]="label.value" >
      </div>
    </div>
  </div>

  <div *ngIf="curSelectItem?.data.picArr" style="margin: 10px;">
    <div *ngFor="let pic of curSelectItem.data.picArr" style="display: flex; align-items: center; justify-content: center;">
      <div style="width: 30%;" align="right">
        <span style=" text-align: right; margin-right: 10px;">{{pic.key + ': '}}</span> 
      </div>
      <div style="width: 50%;">
        <app-upload-image-with-preview
          [picUrl]="pic.pic_url"
          (imageUploaded)="onItemImgUploadSuccess($event, pic)">
        </app-upload-image-with-preview>
      </div>
    </div>
  </div>

  <div *ngIf="curSelectItem?.data.animaArr" style="margin: 10px;">
    <div *ngFor="let anima of curSelectItem.data.animaArr" style="display: flex; align-items: center; justify-content: center;">
      <div style="width: 30%;" align="right">
        <span style=" text-align: right; margin-right: 10px;">{{anima.key + ': '}}</span> 
      </div>
      <div style="width: 50%; margin-left: 20px;" align="left">
        <app-upload-dragon-bone
          [skeJsonData]="anima.skeJsonData || {}"
          [texJsonData]="anima.texJsonData || {}"
          [texPngData]="anima.texPngData || {}"
          (save)="onDragonBoneUploadSuccess($event, anima)">
        </app-upload-dragon-bone>
      </div>
    </div>
  </div>
  

  <div *ngIf="curSelectItem?.data.audioArr">
    <div *ngFor="let audio of curSelectItem.data.audioArr" style="display: flex; align-items: center; justify-content: center;">
      <span style=" text-align: right; margin-right: 10px;">{{audio.key + ': '}}</span> 
      <app-audio-recorder
        [audioUrl]="audio.audio_url"
        (audioUploaded)="onItemAudioUploadSuccess($event, audio)"
      ></app-audio-recorder>
    </div>
  </div>

  <div *ngIf="curSelectItem?.data.checkBox" style="margin-top: 10px; display: flex; align-items: center; justify-content: center;">
    <span>{{curSelectItem?.data.checkBox.key}}</span>
    <div *ngFor="let op of curSelectItem.data.checkBox.option" >
      <label nz-checkbox [(ngModel)]="op.isRight">{{op.key}}</label>
    </div>
  </div>

  

</div>
</nz-modal>


<!-- 帧数据面板 -->
<nz-modal 
  [(nzVisible)]="isShowKeyData" 
  [nzTitle]="curShowKeyItem?.baseItem.nickName || ''" 
  (nzOnCancel)="keyDataCancel()" 
  (nzOnOk)="keyDataOk()">
  
  <div style="width: 100%;" align='center'>

    <div style="display: flex; margin: 10px; align-items: center; justify-content: center;">
      <div style="width: 40%;" align="right">
        <span style="text-align: right; margin-right: 10px; font-weight: 800;">{{'time '}}</span> 
      </div>
      <input style="width: 50%" type="text" nz-input [(ngModel)]="curShowKeyItem?.data['time']" >
    </div>


    <div *ngIf="curShowKeyItem?.baseItem.data.panelGroup" >

      <div style="display: flex; margin: 10px; align-items: center; justify-content: center;">
        <div style="width: 40%;" align="right">
          <span style="text-align: right; margin-right: 10px;">{{'淡入时间 '}}</span> 
        </div>
        <input style="width: 50%" type="text" nz-input [(ngModel)]="curShowKeyItem.data.appearTime" >
      </div>
      <div style="display: flex; margin: 10px; align-items: center; justify-content: center;">
        <div style="width: 40%;" align="right">
          <span style="text-align: right; margin-right: 10px;">{{'淡出时间 '}}</span> 
        </div>
        <input style="width: 50%" type="text" nz-input [(ngModel)]="curShowKeyItem.data.disappearTime" >
      </div>

      <div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
        <div *ngFor="let g of curShowKeyItem.baseItem.data.panelGroup; let i = index" style="margin: 5px">
          <button style="margin-left: 5px;" nz-button (click)="panelGroupBtnClick(i)">{{g.key}}</button>
        </div>
      </div>
    </div>


    <div *ngIf="curShowKeyItem?.baseItem.data.commonProp">
      <div *ngFor="let prop of commonProp" style="width: 100%;">

        <div style="display: flex; margin: 10px; align-items: center; justify-content: center;">
          
          <div style="width: 40%;" align="right">
            <span style="text-align: right; margin-right: 10px;">{{prop + ' '}}</span> 
            <span *ngIf="prop == 'active'" style="margin-right: 10px;">{{'(true, false) '}}</span> 
            <span *ngIf="prop == 'x' || prop == 'y'" style="margin-right: 10px;">{{'(-0.5~0.5) '}}</span> 
            <span *ngIf="prop == 'anchorX' || prop == 'anchorY'" style="margin-right: 10px;">{{'(0~1) '}}</span> 
            <span *ngIf="prop == 'opacity'" style="margin-right: 10px;">{{'(0~255) '}}</span> 
          </div>

          <div style="width: 50%;" align="left">
            <input style="width: 100%" type="text" nz-input [(ngModel)]="curShowKeyItem?.data[prop]" >
          </div>
        </div>
      </div>
    </div>
   
    <div *ngIf="curShowKeyItem?.baseItem?.data.camera" >
      <div style="display: flex; margin: 10px; align-items: center; justify-content: center;">
        <div style="width: 40%;" align="right">
          <span style="text-align: right; margin-right: 10px;">{{'x (-0.5～0.5) '}}</span> 
        </div>
        <input style="width: 50%" type="text" nz-input [(ngModel)]="curShowKeyItem?.data['x']" >
      </div>
      <div style="display: flex; margin: 10px; align-items: center; justify-content: center;">
        <div style="width: 40%;" align="right">
          <span style="text-align: right; margin-right: 10px;">{{'y (-0.5～0.5) '}}</span> 
        </div>
        <input style="width: 50%" type="text" nz-input [(ngModel)]="curShowKeyItem?.data['y']" >
      </div>
      <div style="display: flex; margin: 10px; align-items: center; justify-content: center;">
        <div style="width: 40%;" align="right">
          <span style="text-align: right; margin-right: 10px;">{{'scaleX '}}</span> 
        </div>
        <input style="width: 50%" type="text" nz-input [(ngModel)]="curShowKeyItem?.data['scaleX']" >
      </div>
      <div style="display: flex; margin: 10px; align-items: center; justify-content: center;">
        <div style="width: 40%;" align="right">
          <span style="text-align: right; margin-right: 10px;">{{'scaleY '}}</span> 
        </div>
        <input style="width: 50%" type="text" nz-input [(ngModel)]="curShowKeyItem?.data['scaleY']" >
      </div>
    </div>

    <div *ngIf="curShowKeyItem?.baseItem?.data.anima" >
      <div style="display: flex; margin: 10px; align-items: center; justify-content: center;">
        <div style="width: 40%;" align="right">
          <span style="text-align: right; margin-right: 10px;">{{'animation '}}</span> 
        </div>
        <input style="width: 50%" type="text" nz-input [(ngModel)]="curShowKeyItem?.data['animation']" >
      </div>
      <div style="display: flex; margin: 10px; align-items: center; justify-content: center;">
        <div style="width: 40%;" align="right">
          <span style="text-align: right; margin-right: 10px;">{{'times (-1 无限) '}}</span> 
        </div>
        <input style="width: 50%" type="text" nz-input [(ngModel)]="curShowKeyItem?.data['times']" >
      </div>
    </div>

    <div *ngIf="curShowKeyItem?.baseItem?.data.audio" >
      <div style="display: flex; margin: 10px; align-items: center; justify-content: center;">
        <div style="width: 40%;" align="right">
          <span style="text-align: right; margin-right: 10px;">{{'times (-1 无限) '}}</span> 
        </div>
        <input style="width: 50%" type="text" nz-input [(ngModel)]="curShowKeyItem?.data['times']" >
      </div>
    </div>
    

    <div *ngIf="curShowKeyItem?.baseItem.data.copy" style="margin: 10px" >
      <button style="margin-right: 30px;" nz-button (click)="copyKeyItemData()"> 复制数据 </button>
      <span>粘贴数据: </span>
      <input style="width: 100px;" type="text" nz-input [(ngModel)]="pasteData" >
      <button style="margin-left: 5px;" nz-button [disabled]="pasteData==''" (click)="importData()">导入</button>
    </div>


    <button style="margin: 10px" nz-button nzType="danger" nzSize="small" (click)="deleteKeyItem()">
      删除关键帧
    </button>
  </div>
</nz-modal>



<!--添加类型面板-->
<nz-modal [(nzVisible)]="addPanelVisible" nzTitle="选择添加类型"   (nzAfterClose)="addPanelCloseAfter()" (nzOnCancel)="addPanelCancel()" (nzOnOk)="addPanelOk()" nzOkText="确定">

  <nz-radio-group [ngModel]="curAddType" (ngModelChange)="customRadioChange($event)"  style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
    <label>类型：</label>
    <div *ngFor="let group of customTypeGroupArr; let gIdx = index" style="display: flex; ">
      <label *ngIf="gIdx != 0" nz-radio nzValue="{{gIdx}}">{{group.name}}</label>
    </div>
  </nz-radio-group>
  
  <div align="center" style="margin-top: 10px;">
    <span>自定义名称：</span> 
    <input style="margin: 5px; width: 200px" type="text" nz-input [(ngModel)]="addTypeNickName" >
  </div>

</nz-modal>



<!-- 二次帧数据面板 -->
<nz-modal 
  [(nzVisible)]="isShowPanelGroup" 
  [nzTitle]="curShowPanelGroup?.key" 
  (nzOnCancel)="panelGroupCancel()" 
  (nzOnOk)="panelGroupOk()">
  
  <div *ngIf="panelGroupPropList" style="width: 100%;" align='center'>

    <div  *ngFor="let prop of panelGroupPropList; let i = index" style="width: 100%;">

      <div style="display: flex; margin: 10px; align-items: center; justify-content: center;">
        
        <div style="width: 40%;" align="right">
          <span style="text-align: right; margin-right: 10px;">{{prop + ' '}}</span> 
          <span *ngIf="prop == 'x' || prop == 'y'" style="margin-right: 10px;">{{'(-0.5~0.5) '}}</span> 
          <span *ngIf="prop == 'anchorX' || prop == 'anchorY'" style="margin-right: 10px;">{{'(0~1) '}}</span> 
          <span *ngIf="prop == 'opacity'" style="margin-right: 10px;">{{'(0~255) '}}</span> 
          <span *ngIf="prop == 'times'" style="margin-right: 10px;">{{'(-1 无限) '}}</span> 
        </div>

        <div style="width: 50%;" align="left">
          <input style="width: 100%" type="text" nz-input [(ngModel)]="curShowPanelGroup?.data[prop]" >
        </div>
      </div>
    </div>


    <div style="margin: 10px" >
      <button style="margin-right: 30px;" nz-button (click)="copyPanelGroup()"> 复制数据 </button>
      <span>粘贴数据: </span>
      <input style="width: 100px;" type="text" nz-input [(ngModel)]="pasteData" >
      <button style="margin-left: 5px;" nz-button [disabled]="pasteData==''" (click)="importPanelGroup()">导入</button>
    </div>

  </div>
</nz-modal>
