import { Component } from '@angular/core';
import { BaseControl } from '../basecontrol';
import * as i0 from "@angular/core";
import * as i1 from "../../service/common.service";
import * as i2 from "../form-box/form-box.component";
import * as i3 from "ng-devui";
import * as i4 from "@angular/common";
export class FormUploadComponent extends BaseControl {
    constructor(commonService) {
        super(commonService);
        this.commonService = commonService;
        this.fileUploaders = [];
        this.message = [];
        this.isDropOver = false;
        this.UPLOADED = '上传成功';
        this.CANCELUPLOAD = '取消上传';
    }
    ngOnInit() {
    }
    fileDrop(files) {
        this.isDropOver = false;
        console.log(files);
    }
    fileOver(event) {
        this.isDropOver = event;
        console.log(event);
    }
    alertMsg(event) {
        this.message = event;
    }
    deleteFile(currFile) {
        this.fileUploaders = this.fileUploaders.filter((fileUploader) => {
            return currFile !== fileUploader;
        });
    }
}
FormUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: FormUploadComponent, deps: [{ token: i1.CommonService }], target: i0.ɵɵFactoryTarget.Component });
FormUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: FormUploadComponent, selector: "form-upload", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data.mode=='op'; else detail\">\r\n    <form-box #box [mainCarry]=\"detail\" [name]=\"data.name\" [controltype]=\"data.controltype\" (controlclick)=\"onClick($event)\"></form-box>\r\n  </ng-container>\r\n  <ng-template #detail>\r\n      <d-form-item>\r\n        <d-form-label [required]=\"data.required\" [hasHelp]=\"data.help\" [helpTips]=\"data.helptip||''\">{{data.label}}</d-form-label>\r\n        <d-form-control>\r\n            <ng-container *ngIf=\"fileUploaders.length > 0\">\r\n              <div *ngFor=\"let fileUploader of fileUploaders\" class=\"devui-add-images\">\r\n                <div\r\n                  class=\"devui-add-items {{ fileUploader.status === 3 ? 'devui-upload-failed' : '' }} \r\n                  {{ fileUploader.status === 2 ? 'devui-upload-success' : '' }}\"\r\n                >\r\n                  <span class=\"filename\">{{ fileUploader.file.name }}</span>\r\n                  <div *ngIf=\"fileUploader.status === 1\" class=\"devui-loading\">\r\n                    <d-progress [percentage]=\"fileUploader.percentage\" [height]=\"'5px'\" [barbgcolor]=\"'#50D4AB'\"></d-progress>\r\n                    <span (click)=\"deleteFile(fileUploader)\" class=\"devui-cancel-upload\">{{ CANCELUPLOAD }}</span>\r\n                  </div>\r\n                  <span *ngIf=\"fileUploader.status === 2 || fileUploader.status === 3\" class=\"icon-file\"></span>\r\n                </div>\r\n                <span class=\"icon fc-icon icon-delete {{ fileUploader.status === 3 ? 'devui-failed-icon' : '' }}\" (click)=\"deleteFile(fileUploader)\"></span>\r\n                <span *ngIf=\"fileUploader.status === 3\" class=\"icon icon-running\" (click)=\"dUpload.uploadFiles()\"></span>\r\n              </div>\r\n            </ng-container>\r\n            <div\r\n              dUpload\r\n              #dUpload=\"dUpload\"\r\n              [attr.name] = \"data.controlname\"\r\n              class=\"devui-add-images devui-upload {{ isDropOver ? 'devui-upload-dropover' : '' }}\"\r\n              [enableDrop]=\"true\"\r\n              [fileOptions]=\"data.fileOptions\"\r\n              [uploadOptions]=\"data.uploadOptions\"\r\n              [uploadedFiles]=\"data.uploadedFiles\"\r\n              [fileUploaders]=\"fileUploaders\"\r\n              (alertMsgEvent)=\"alertMsg($event)\"\r\n              (fileDrop)=\"fileDrop($event)\"\r\n              (fileOver)=\"fileOver($event)\"\r\n            >\r\n              <span class=\"icon-op-add\"></span>\r\n            </div>\r\n        <d-toast [value]=\"message\"></d-toast>\r\n      </d-form-control>\r\n    </d-form-item>\r\n  </ng-template>", styles: [".devui-add-images{width:80px;height:80px;cursor:pointer;position:relative;display:inline-block;margin-right:8px;margin-bottom:8px}.devui-add-images.devui-upload{border:1px dashed var(--devui-line, #adb0b8);border-radius:2px}.devui-add-images.devui-upload:hover{border-color:var(--devui-brand, #5e7ce0)}.devui-add-images.devui-upload:hover .icon-op-add{color:var(--devui-icon-fill-active, #5e7ce0)}.devui-add-images.devui-upload.devui-upload-dropover{border-color:var(--devui-brand, #5e7ce0)}.devui-add-images.devui-upload .icon-op-add{font-size:16px;color:var(--devui-icon-fill, #71757f);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.devui-add-images .devui-add-items{background-color:var(--devui-default-bg, #f7f8fa);width:100%;height:100%;border-radius:2px;border:1px solid var(--devui-line, #adb0b8);color:var(--devui-text, #252b3a)}.devui-add-images .devui-add-items>*{position:absolute;width:80%;left:50%;transform:translate(-50%)}.devui-add-images .devui-add-items span{text-align:center}.devui-add-images .devui-add-items .devui-cancel-upload{display:block;margin-top:8px}.devui-add-images .devui-add-items .devui-cancel-upload:hover{color:var(--devui-link, #526ecc)}.devui-add-images .devui-add-items .filename{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;top:20%}.devui-add-images .devui-add-items .devui-loading{top:60%}.devui-add-images .devui-add-items .icon-file{top:20%;font-size:32px}.devui-add-images .devui-add-items.devui-upload-failed,.devui-add-images .devui-add-items.devui-upload-success{background-color:var(--devui-global-bg-normal, #ffffff)}.devui-add-images .devui-add-items.devui-upload-failed .filename,.devui-add-images .devui-add-items.devui-upload-success .filename{top:70%}.devui-add-images .devui-add-items.devui-upload-failed{border-color:var(--devui-danger-line, #f66f6a);color:var(--devui-danger, #f66f6a)}.devui-add-images .devui-add-items.devui-upload-failed .icon-file{color:var(--devui-danger-line, #f66f6a)}.devui-add-images .devui-add-items.devui-upload-success{border-color:var(--devui-success-line, #50d4ab);color:var(--devui-success, #50d4ab)}.devui-add-images .devui-add-items.devui-upload-success .icon-file{color:var(--devui-success-line, #50d4ab)}.devui-add-images .icon{font-size:18px;color:var(--devui-icon-bg, #ffffff);display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.devui-add-images .icon.icon-running{left:35%}.devui-add-images .icon.devui-failed-icon{left:60%}.devui-add-images:hover .devui-upload-failed:before,.devui-add-images:hover .devui-upload-success:before{position:absolute;content:\"\";left:0;top:0;width:100%;height:100%;border:1px solid transparent;border-radius:2px;background-color:#000;opacity:.4;z-index:1}.devui-add-images:hover .devui-upload-failed+.icon-delete,.devui-add-images:hover .devui-upload-success+.icon-delete{display:block;z-index:2}.devui-add-images:hover .devui-upload-failed+.icon-delete+.icon-running,.devui-add-images:hover .devui-upload-success+.icon-delete+.icon-running{display:block;z-index:2}\n"], components: [{ type: i2.FormBoxComponent, selector: "form-box", inputs: ["mainCarry", "name", "controltype", "additionalcss"], outputs: ["controlclick"] }, { type: i3.FormItemComponent, selector: "d-form-item", inputs: ["dFeedbackType", "dHasFeedback"] }, { type: i3.FormLabelComponent, selector: "d-form-label", inputs: ["required", "hasHelp", "helpTips"] }, { type: i3.FormControlComponent, selector: "d-form-control", inputs: ["extraInfo", "feedbackStatus", "suffixTemplate"] }, { type: i3.ProgressComponent, selector: "d-progress", inputs: ["percentage", "percentageText", "barbgcolor", "strokeColor", "height", "strokeWidth", "isCircle", "type", "showContent"] }, { type: i3.ToastComponent, selector: "d-toast", inputs: ["sticky", "life", "style", "styleClass", "lifeMode", "value"], outputs: ["closeEvent", "valueChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.UploadDirective, selector: "[dUpload]", inputs: ["uploadOptions", "fileOptions", "uploadedFiles", "fileUploaders", "enableDrop", "dynamicUploadOptionsFn", "beforeUpload"], outputs: ["fileOver", "fileDrop", "successEvent", "errorEvent", "alertMsgEvent", "fileSelect"], exportAs: ["dUpload"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: FormUploadComponent, decorators: [{
            type: Component,
            args: [{ selector: 'form-upload', template: "<ng-container *ngIf=\"data.mode=='op'; else detail\">\r\n    <form-box #box [mainCarry]=\"detail\" [name]=\"data.name\" [controltype]=\"data.controltype\" (controlclick)=\"onClick($event)\"></form-box>\r\n  </ng-container>\r\n  <ng-template #detail>\r\n      <d-form-item>\r\n        <d-form-label [required]=\"data.required\" [hasHelp]=\"data.help\" [helpTips]=\"data.helptip||''\">{{data.label}}</d-form-label>\r\n        <d-form-control>\r\n            <ng-container *ngIf=\"fileUploaders.length > 0\">\r\n              <div *ngFor=\"let fileUploader of fileUploaders\" class=\"devui-add-images\">\r\n                <div\r\n                  class=\"devui-add-items {{ fileUploader.status === 3 ? 'devui-upload-failed' : '' }} \r\n                  {{ fileUploader.status === 2 ? 'devui-upload-success' : '' }}\"\r\n                >\r\n                  <span class=\"filename\">{{ fileUploader.file.name }}</span>\r\n                  <div *ngIf=\"fileUploader.status === 1\" class=\"devui-loading\">\r\n                    <d-progress [percentage]=\"fileUploader.percentage\" [height]=\"'5px'\" [barbgcolor]=\"'#50D4AB'\"></d-progress>\r\n                    <span (click)=\"deleteFile(fileUploader)\" class=\"devui-cancel-upload\">{{ CANCELUPLOAD }}</span>\r\n                  </div>\r\n                  <span *ngIf=\"fileUploader.status === 2 || fileUploader.status === 3\" class=\"icon-file\"></span>\r\n                </div>\r\n                <span class=\"icon fc-icon icon-delete {{ fileUploader.status === 3 ? 'devui-failed-icon' : '' }}\" (click)=\"deleteFile(fileUploader)\"></span>\r\n                <span *ngIf=\"fileUploader.status === 3\" class=\"icon icon-running\" (click)=\"dUpload.uploadFiles()\"></span>\r\n              </div>\r\n            </ng-container>\r\n            <div\r\n              dUpload\r\n              #dUpload=\"dUpload\"\r\n              [attr.name] = \"data.controlname\"\r\n              class=\"devui-add-images devui-upload {{ isDropOver ? 'devui-upload-dropover' : '' }}\"\r\n              [enableDrop]=\"true\"\r\n              [fileOptions]=\"data.fileOptions\"\r\n              [uploadOptions]=\"data.uploadOptions\"\r\n              [uploadedFiles]=\"data.uploadedFiles\"\r\n              [fileUploaders]=\"fileUploaders\"\r\n              (alertMsgEvent)=\"alertMsg($event)\"\r\n              (fileDrop)=\"fileDrop($event)\"\r\n              (fileOver)=\"fileOver($event)\"\r\n            >\r\n              <span class=\"icon-op-add\"></span>\r\n            </div>\r\n        <d-toast [value]=\"message\"></d-toast>\r\n      </d-form-control>\r\n    </d-form-item>\r\n  </ng-template>", styles: [".devui-add-images{width:80px;height:80px;cursor:pointer;position:relative;display:inline-block;margin-right:8px;margin-bottom:8px}.devui-add-images.devui-upload{border:1px dashed var(--devui-line, #adb0b8);border-radius:2px}.devui-add-images.devui-upload:hover{border-color:var(--devui-brand, #5e7ce0)}.devui-add-images.devui-upload:hover .icon-op-add{color:var(--devui-icon-fill-active, #5e7ce0)}.devui-add-images.devui-upload.devui-upload-dropover{border-color:var(--devui-brand, #5e7ce0)}.devui-add-images.devui-upload .icon-op-add{font-size:16px;color:var(--devui-icon-fill, #71757f);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.devui-add-images .devui-add-items{background-color:var(--devui-default-bg, #f7f8fa);width:100%;height:100%;border-radius:2px;border:1px solid var(--devui-line, #adb0b8);color:var(--devui-text, #252b3a)}.devui-add-images .devui-add-items>*{position:absolute;width:80%;left:50%;transform:translate(-50%)}.devui-add-images .devui-add-items span{text-align:center}.devui-add-images .devui-add-items .devui-cancel-upload{display:block;margin-top:8px}.devui-add-images .devui-add-items .devui-cancel-upload:hover{color:var(--devui-link, #526ecc)}.devui-add-images .devui-add-items .filename{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;top:20%}.devui-add-images .devui-add-items .devui-loading{top:60%}.devui-add-images .devui-add-items .icon-file{top:20%;font-size:32px}.devui-add-images .devui-add-items.devui-upload-failed,.devui-add-images .devui-add-items.devui-upload-success{background-color:var(--devui-global-bg-normal, #ffffff)}.devui-add-images .devui-add-items.devui-upload-failed .filename,.devui-add-images .devui-add-items.devui-upload-success .filename{top:70%}.devui-add-images .devui-add-items.devui-upload-failed{border-color:var(--devui-danger-line, #f66f6a);color:var(--devui-danger, #f66f6a)}.devui-add-images .devui-add-items.devui-upload-failed .icon-file{color:var(--devui-danger-line, #f66f6a)}.devui-add-images .devui-add-items.devui-upload-success{border-color:var(--devui-success-line, #50d4ab);color:var(--devui-success, #50d4ab)}.devui-add-images .devui-add-items.devui-upload-success .icon-file{color:var(--devui-success-line, #50d4ab)}.devui-add-images .icon{font-size:18px;color:var(--devui-icon-bg, #ffffff);display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.devui-add-images .icon.icon-running{left:35%}.devui-add-images .icon.devui-failed-icon{left:60%}.devui-add-images:hover .devui-upload-failed:before,.devui-add-images:hover .devui-upload-success:before{position:absolute;content:\"\";left:0;top:0;width:100%;height:100%;border:1px solid transparent;border-radius:2px;background-color:#000;opacity:.4;z-index:1}.devui-add-images:hover .devui-upload-failed+.icon-delete,.devui-add-images:hover .devui-upload-success+.icon-delete{display:block;z-index:2}.devui-add-images:hover .devui-upload-failed+.icon-delete+.icon-running,.devui-add-images:hover .devui-upload-success+.icon-delete+.icon-running{display:block;z-index:2}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.CommonService }]; } });
//# sourceMappingURL=data:application/json;base64, 