import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
import {FileUploader} from 'ng2-file-upload';
import {FileItem} from 'ng2-file-upload/file-upload/file-item.class';
import {FrameVariable} from '../../shared/frame/frame-variable';
import {AppComponent} from '../../app.component';
import {ParsedResponseHeaders} from 'ng2-file-upload/file-upload/file-uploader.class';
import { FrameRequest } from '../../shared/frame/frame-request';

@Component({
  selector: 'frame-uploader',
  templateUrl: './uploader.component.html'
})
export class FrameUploaderComponent implements OnInit {
  uploader: FileUploader ;

  // 上传路径
  @Input()
  uploadUrl: string;
  //错误文件返回地址
  @Input()
  errUrl:string;
  // 上传标题
  @Input()
  uploadTitle = '';
  // 是否允许选择多个文件
  @Input()
  multiple = false;
  // 自动上传
  @Input()
  autoUpload = false;
  // 静默上传
  @Input()
  silenceUpload = false;
  // 有无模版
  @Input()
  templateUrl: string;
  // 过滤文件
  @Input()
  filterFile: any;
  // 最大文件,单位kb
  @Input()
  maxFileSize: number;


  @Input()
  params: any;

  @Input()
  callback: Function;


  @ViewChild('elSimpleUpload')
  elSimpleUpload: ElementRef;
  @ViewChild('elMultipleUpload')
  elMultipleUpload: ElementRef;

  constructor() {
  }

  uploadFiles() {
    this.uploader.uploadAll();
  }

  ngOnInit() {
    this.uploader = new FileUploader({
      url: FrameVariable.BASE_URL + this.uploadUrl,
      allowedFileType: this.filterFile,
      method: 'post',
      maxFileSize: this.maxFileSize * 1024,
      isHTML5: true,
      autoUpload: (this.silenceUpload === true && this.autoUpload === true ) ? true : false ,
      removeAfterUpload: (this.silenceUpload === true && this.autoUpload === true ) ? true : false
    });

    this.uploader.onBuildItemForm  = this.onBuildItemForm.bind(this);
    this.uploader.onBeforeUploadItem  = this.onBeforeUploadItem.bind(this);
    this.uploader.onCompleteItem = this.onCompleteItem.bind(this);

  }

  // 选择一个文件并自动上传
  choooseFileAndUpload(params: any, callback?: Function) {
    if (params !== undefined) {
      if (this.params === undefined) {
        this.params = {};
      }
      for (const v in params) {
        this.params[v] = params[v];
      }
    }
    if (callback) {
      this.callback = callback;
    }

    if (this.multiple === true) {
      this.elMultipleUpload.nativeElement.click();
    } else {
      this.elSimpleUpload.nativeElement.click();
    }

  }

  // 上传之前传递参数
  onBuildItemForm(fileItem: FileItem, form: any) {
    if (this.params !== undefined) {
      for (const v in this.params) {
        form.append(v, this.params[v]);
      }
    }
  }

  onBeforeUploadItem(fileItem: FileItem) {
    if (this.silenceUpload === true) {
      AppComponent.GobalComponent.setLoading(true);
    }
  }
  onCompleteItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) {
    AppComponent.GobalComponent.setLoading(false);
    if (this.silenceUpload === true) {
      this.uploader.clearQueue();
    }
    if (this.elSimpleUpload) {
      this.elSimpleUpload.nativeElement.value = '';
    }
    if (this.elMultipleUpload) {
      this.elMultipleUpload.nativeElement.value = '';
    }

    const ajax = JSON.parse(response);
    if (this.callback) {
      this.callback.call(undefined, ajax);
    }
    
  }

}
