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


@Component({
  selector: 'app-mult-rect',
  templateUrl: './mult-rect.component.html',
  styleUrls: ['./mult-rect.component.scss']
})
export class MultRectComponent implements OnDestroy, OnChanges {
  uploading = false;
  progress = 0;
  @Input()
  btnName = '配置多矩形集合';
  @Input()
  animaNames = [];

  @Input()
  rectArr = [];




  
  @Output()
  save = new EventEmitter();

  @Output()
  refreshEmitter = new EventEmitter();



  uploadUrl;
  uploadData;

  panelVisible = false;
  colorArr = [
    {name: 'red', color: '#ff0000'},
    {name: 'green', color: '#00ff00'},
    {name: 'blue', color: '#0000ff'},
    {name: 'yellow', color: '#ffff00'},
  ]

  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() {
 
  }

  radioChange(e, item) {
    console.log('e: ', e);
    item.color = e;
  }
  
  addRect() {
    this.rectArr.push(
      {
        color: this.colorArr[0].color,
        width: 20,
        height: 20,
        x: 20,
        y: 20,
      
      }
    )
  }

  deleteRect(item) {
    const index = this.rectArr.indexOf(item);
    if (index != -1) {
      this.rectArr.splice(index, 1);
    }
  }


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

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


  setRectBtnClick() {
    this.panelVisible = true;
  }

  panelOk() {


    this.save.emit(this.rectArr)
    this.panelVisible = false;

  }

  panelCancel() {

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





  ngOnDestroy() {
  }

}