import {Component, OnInit, forwardRef, EventEmitter, Input} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import {UploadOutput, UploadInput, UploadFile, humanizeBytes, UploaderOptions} from 'ngx-uploader';
import FileService from "@common/services/file";

@Component({
    selector: 'imageUploader',
    templateUrl: './template.html',
    styleUrls: ['./style.less'],
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => ImageUploader),
        multi: true
    }]
})
export default class ImageUploader implements OnInit {
    private onValueChange: any;
    uploadInput: EventEmitter<UploadInput> = new EventEmitter();
    options: UploaderOptions;

    //默认允许上传1张
    @Input() max = 1;
    //默认10M
    @Input() size = 0.1;
    //附件宽度
    @Input() width;
    //附件高度
    @Input() height;
    //默认'jpg', 'png', 'jpeg'格式
    private _type = ['JPG', 'PNG', 'JPEG'];
    @Input()
    set type(value) {
        this._type = value.split(',')
    };

    //错误提示内容
    private errorInfo = '';
    //图片数组
    private imgs = [];
    //上传标识
    private uploading = false;
    //当前上传进度
    private uploadProgress = 0;

    //默认显示图片大小 X*100
    get sizeStyle() {
        return {
            'height': '100px',
            'width': (this.width && this.height ? (this.width * 100 / this.height).toFixed(0) : 100) + 'px'
        };
    }

    files: UploadFile[] = [];

    constructor(private fileService: FileService) {
    }


    ngOnInit(): void {
    }

    writeValue(obj: any): void {
        if (obj) {
            if (obj instanceof Array) {
                this.imgs = obj;
            } else if (obj.constructor == String) {
                if (obj != "undefined") {
                    this.imgs = obj.split(',');
                }
            } else {
                this.onValueChange('');
            }
        } else {
            this.imgs = [];
            this.onValueChange && this.onValueChange('');
        }
    }

    registerOnChange(changeFn: any): void {
        this.onValueChange = changeFn;
    }

    registerOnTouched(changeFn: any): void {

    }

    delImg($index) {
        this.imgs.splice($index, 1);
        this.onValueChange && this.onValueChange(this.imgs.join(','));
    };

    onUploadOutput(output: UploadOutput): void {
        if (output.type === 'allAddedToQueue') {
            const event: UploadInput = {
                type: 'uploadAll',
                fieldName: 'image',
                url: this.fileService.imageUpload()
            };
            this.uploadInput.emit(event);
        } else if (output.type === 'addedToQueue' && typeof output.file !== 'undefined') {
            const file = output.file;
            //判断图片大小
            const size = file.size / 1024 / 1024;
            if (size > this.size) {
                // this.errorInfo = '您上传的大小为' + size.toFixed(2) + 'M，不符合要求';
                //this.uploadInput.emit({type: 'remove', id: file.id});
            }
            //this.files.push(output.file);
        } else if (output.type === 'uploading' && typeof output.file !== 'undefined') {
            //const index = this.files.findIndex(file => typeof output.file !== 'undefined' && file.id === output.file.id);
            //this.files[index] = output.file;
        } else if (output.type === 'removed') {
            //this.files = this.files.filter((file: UploadFile) => file !== output.file);
        } else if (output.type === 'rejected' && typeof output.file !== 'undefined') {
            //console.log(output.file.name + ' rejected');
        } else if (output.type === 'done' && typeof output.file !== 'undefined') {
            if (this.max == 1) {
                this.imgs = [output.file.response.image]
            } else {
                if (this.imgs.length < this.max) {
                    this.imgs.push(output.file.response.image);
                }
            }
            this.onValueChange(this.imgs.join(','));
        }
    }
}