import {ApplicationRef, Component, EventEmitter, Input, OnChanges, OnDestroy, Output} from '@angular/core';
import { NzMessageService, UploadXHRArgs, UploadFile } from 'ng-zorro-antd';


@Component({
  selector: 'app-upload-dragon-bone',
  templateUrl: './upload-dragon-bone.component.html',
  styleUrls: ['./upload-dragon-bone.component.scss']
})
export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
  uploading = false;
  progress = 0;
  @Input()
  btnName = '配置骨骼动画';
  @Input()
  animaNames = [];

  @Input()
  skeJsonData = {};
  @Input()
  texJsonData = {};
  @Input()
  texPngData = {};
  @Input()
  animType;
  
  @Output()
  save = new EventEmitter();


  @Output()
  refreshEmitter = new EventEmitter();


  uploadUrl;
  uploadData;

  animaPanelVisible = false;

  isSkeJsonLoading = false;
  isTexJsonLoading = false;
  isTexPngLoading = false;

  oldSkeJsonData;
  oldTexJsonData;
  oldTexPngData;
  oldAnimType;

  constructor(private appRef: ApplicationRef, private nzMessageService: NzMessageService) {

    this.uploadUrl = (<any> window).courseware.uploadUrl();
    this.uploadData = (<any> window).courseware.uploadData();

    window['air'].getUploadCallback = (url, data) => {
      this.uploadUrl = url;
      this.uploadData = data;
    };

  }
  ngOnChanges() {
 
  }

  setAnimaBtnClick() {
    this.animaPanelVisible = true;
    this.refresh();
  }

  openPanel() {

    this.oldSkeJsonData = JSON.parse( JSON.stringify(this.skeJsonData) );
    this.oldTexJsonData = JSON.parse( JSON.stringify(this.texJsonData));
    this.oldTexPngData = JSON.parse( JSON.stringify(this.texPngData));
    this.oldAnimType = this.animType;
  }

  animaPanelCancel() {
    console.log("in animaPanelCancel");

    this.skeJsonData = this.oldSkeJsonData 
    this.texJsonData = this.oldTexJsonData 
    this.texPngData = this.oldTexPngData 
    this.animType = this.oldAnimType 

    this.animaPanelVisible = false;
    this.refresh();
  }

  animaPanelOk() {
    console.log("in animaPanelOk");
    this.sendItemDragonBoneData();
    this.animaPanelVisible = false;
    this.refresh();
  }

  sendItemDragonBoneData() {
    const data = {};
    data['skeJsonData'] = this.skeJsonData;
    data['texJsonData'] = this.texJsonData;
    data['texPngData'] = this.texPngData;
    data['animType'] = this.animType;
    this.save.emit(data);
  }


  skeJsonHandleChange(e) {
    console.log('e: ', e);
    switch (e.type) {
      case 'start':
        this.isSkeJsonLoading = true;
        break;

      case 'success':
        this.skeJsonData['url'] = e.file.response.url;
        this.skeJsonData['name'] = e.file.name;
        this.nzMessageService.success('上传成功');
        this.isSkeJsonLoading = false;
        break;

      case 'progress':
        break;
    }
  }

  texJsonHandleChange(e) {
    console.log('e: ', e);
    switch (e.type) {
      case 'start':
        this.isTexJsonLoading = true;
        break;

      case 'success':
        this.texJsonData['url'] = e.file.response.url;
        this.texJsonData['name'] = e.file.name;
        this.nzMessageService.success('上传成功');
        this.isTexJsonLoading = false;
        break;

      case 'progress':
        break;
    }
  }

  texPngHandleChange(e) {
    console.log('e: ', e);
    switch (e.type) {
      case 'start':
        this.isTexPngLoading = true;
        break;

      case 'success':
        this.texPngData['url'] = e.file.response.url;
        this.texPngData['name'] = e.file.name;
        this.nzMessageService.success('上传成功');
        this.isTexPngLoading = false; 
        break;

      case 'progress':
        break;
    }
  }


  animRadioChange(e) {
    console.log(" in animRadioChange: ", e);
    this.animType = e;
  }


  /**
   * 刷新 渲染页面
   */
  refresh() {

    // this.refreshEmitter.emit();
    setTimeout(() => {
      this.appRef.tick();
    }, 1);
  }

  closePanel() {
    console.log(' in closePanel ');
    this.refresh();
  }



  ngOnDestroy() {
  }

}
