import { __awaiter, __decorate, __generator } from "tslib";
import { Component, EventEmitter, ViewChild, Output } from '@angular/core';
import { SettingService } from '../../../../services/setting/setting.service';
import { TranslateService } from '../../../../services/translate/translate.service';
var UploadExcelConfigComponent = /** @class */ (function () {
    function UploadExcelConfigComponent(settingService, translateService) {
        this.settingService = settingService;
        this.translateService = translateService;
        // tslint:disable-next-line: no-output-native
        this.change = new EventEmitter();
    }
    UploadExcelConfigComponent.prototype.ngOnInit = function () {
    };
    UploadExcelConfigComponent.prototype.setOption = function (option) {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        this.option = option;
                        return [4 /*yield*/, this.init()];
                    case 1:
                        _a.sent();
                        this.emitOnChange();
                        return [2 /*return*/];
                }
            });
        });
    };
    UploadExcelConfigComponent.prototype.init = function () {
        return __awaiter(this, void 0, void 0, function () {
            var _a, err_1;
            var _this = this;
            return __generator(this, function (_b) {
                switch (_b.label) {
                    case 0:
                        if (!(this.option.key && this.settingService.get(this.option.key))) return [3 /*break*/, 5];
                        _b.label = 1;
                    case 1:
                        _b.trys.push([1, 3, , 4]);
                        _a = this;
                        return [4 /*yield*/, this.settingService.get(this.option.key)];
                    case 2:
                        _a.storage = _b.sent();
                        if (!this.storage) {
                            // Xóa setting
                            this.settingService.remove(this.option.key);
                            // Lấy setting mặc định
                            this.initDefault();
                            return [2 /*return*/];
                        }
                        // Loại bỏ những column đã bị xóa khỏi originColumns
                        this.storage.columns = this.storage.columns.filter(function (column) { return _this.option.columns.some(function (e) { return e.field === column.originColumn.field; }); });
                        // Thêm những column mới vào storage nếu có
                        this.option.columns.forEach(function (column) {
                            if (!_this.storage.columns.some(function (e) { return e.originColumn.field === column.field; })) {
                                _this.storage.columns.push({
                                    originColumn: {
                                        field: column.field,
                                        title: column.title,
                                        width: column.width,
                                        required: column.required
                                    },
                                    hidden: false
                                });
                            }
                        });
                        // Cập nhật originColumn
                        this.storage.columns.forEach(function (column) {
                            var originColumn = _this.option.columns.find(function (e) { return e.field === column.originColumn.field; });
                            if (originColumn) {
                                Object.assign(column.originColumn, {
                                    title: originColumn.title,
                                    width: originColumn.width
                                });
                            }
                        });
                        return [3 /*break*/, 4];
                    case 3:
                        err_1 = _b.sent();
                        // Xóa setting
                        this.settingService.remove(this.option.key);
                        // Lấy setting mặc định
                        this.initDefault();
                        return [3 /*break*/, 4];
                    case 4: return [3 /*break*/, 6];
                    case 5:
                        this.initDefault(); // Lấy setting mặc định
                        _b.label = 6;
                    case 6: return [2 /*return*/];
                }
            });
        });
    };
    UploadExcelConfigComponent.prototype.initDefault = function () {
        var _this = this;
        this.storage = {};
        this.storage.formatDate = '';
        this.storage.columns = [];
        this.option.columns.forEach(function (column) {
            _this.storage.columns.push({
                originColumn: {
                    field: column.field,
                    title: column.title,
                    width: column.width,
                    required: column.required
                },
                hidden: false
            });
        });
    };
    UploadExcelConfigComponent.prototype.open = function () {
        this.modal.open();
    };
    UploadExcelConfigComponent.prototype.save = function () {
        this.settingService.set(this.option.key, this.storage);
        this.emitOnChange();
        this.modal.close();
    };
    UploadExcelConfigComponent.prototype.reset = function () {
        this.settingService.remove(this.option.key);
        this.initDefault();
        // this.reload();
        this.emitOnChange();
        this.modal.close();
    };
    UploadExcelConfigComponent.prototype.moveColumnUp = function (index) {
        var temp = this.storage.columns[index];
        this.storage.columns[index] = this.storage.columns[index - 1];
        this.storage.columns[index - 1] = temp;
    };
    UploadExcelConfigComponent.prototype.moveColumnDown = function (index) {
        var temp = this.storage.columns[index];
        this.storage.columns[index] = this.storage.columns[index + 1];
        this.storage.columns[index + 1] = temp;
    };
    UploadExcelConfigComponent.prototype.emitOnChange = function () {
        var _this = this;
        var formatDate = this.storage.formatDate || '';
        var columns = this.option.columns.filter(function (column) {
            // Hidden column theo config
            // Lấy các thuộc tính Title, Width từ config
            var columnConfig = _this.storage.columns.find(function (e) { return e.originColumn.field === column.field; });
            if (columnConfig) {
                column.title = columnConfig.title || _this.translateService.translate(columnConfig.originColumn.title);
                column.width = columnConfig.width || columnConfig.originColumn.width;
                return !columnConfig.hidden;
            }
            else {
                return true;
            }
        }).sort(function (current, next) {
            // Sắp xếp theo config
            var currentIndex = _this.storage.columns.findIndex(function (e) { return e.originColumn.field === current.field; });
            var nextIndex = _this.storage.columns.findIndex(function (e) { return e.originColumn.field === next.field; });
            return currentIndex - nextIndex;
        });
        var result = {
            formatDate: '',
            // pageSize: pageSize,
            columns: columns
        };
        this.change.emit(result);
    };
    UploadExcelConfigComponent.ctorParameters = function () { return [
        { type: SettingService },
        { type: TranslateService }
    ]; };
    __decorate([
        ViewChild('modal')
    ], UploadExcelConfigComponent.prototype, "modal", void 0);
    __decorate([
        Output()
    ], UploadExcelConfigComponent.prototype, "change", void 0);
    UploadExcelConfigComponent = __decorate([
        Component({
            selector: 'sd-upload-excel-config',
            template: "<sd-modal-control width=\"sm\" title=\"Configure Upload Excel\" #modal>\r\n  <sd-modal-body *ngIf=\"storage\">\r\n    <div class=\"row\">\r\n      <div class=\"col-md-12 mt-2\">\r\n        <sd-input-control [(model)]=\"storage.formatDate\"></sd-input-control>\r\n      </div>\r\n    </div>\r\n    <div class=\"sd-box sd-box-primary\">\r\n      <div class=\"sd-box-body p-0\">\r\n        <div class=\"table-responsive\" style=\"height: calc(100vh - 20rem)\">\r\n          <table class=\"table table-striped table-sm table-hover table-bordered\">\r\n            <thead class=\"thead-light\">\r\n              <tr>\r\n                <th class=\"text-center\" style=\"width: 50px\">#</th>\r\n                <th class=\"text-center\" style=\"width: 80px\"></th>\r\n                <th class=\"text-uppercase\" style=\"width: 120px\" translate>Field </th>\r\n                <th class=\"text-uppercase\" translate>Title </th>\r\n                <th class=\"text-uppercase\" style=\"width: 80px\" translate>Width </th>\r\n                <th class=\"text-uppercase\" style=\"width: 80px\" translate>Hidden </th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let column of storage.columns; let idx = index\">\r\n                <td class=\"align-middle text-center\">\r\n                  {{idx+1}}\r\n                </td>\r\n                <td class=\"align-middle text-center\">\r\n                  <button type=\"button\" [disabled]=\"idx==0\" type=\"button\" class=\"c-btn-icon\" placement=\"top\" matTooltip=\"Up\" (click)=\"moveColumnUp(idx)\">\r\n                    <i class=\"fa fa-arrow-up text-primary\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                  <button type=\"button\" [disabled]=\"idx==storage.columns.length-1\" type=\"button\" class=\"c-btn-icon\" placement=\"top\" matTooltip=\"Down\" (click)=\"moveColumnDown(idx)\">\r\n                    <i class=\"fa fa-arrow-down text-primary\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                </td>\r\n                <td class=\"align-middle\">{{column.originColumn.field}}</td>\r\n                <td class=\"align-middle\">\r\n                  <input type=\"text\" placeholder=\"{{column.originColumn.title}}\" [(ngModel)]=\"column.title\" class=\"form-control form-control-sm\">\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                  <input type=\"text\" placeholder=\"{{column.originColumn.width}}\" [(ngModel)]=\"column.width\" class=\"form-control form-control-sm\">\r\n                </td>\r\n                <td class=\"align-middle text-center\">\r\n                  <mat-slide-toggle [(ngModel)]=\"column.hidden\" color=\"primary\" [disabled]=\"column.originColumn.required\"></mat-slide-toggle>\r\n                </td>\r\n              </tr>\r\n          </table>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <button type=\"button\" class=\"btn btn-info btn-sm mr-auto\" (click)=\"reset()\">\r\n      <i class=\"fa fa-refresh mr-1\"></i> <span translate>Reset</span></button>\r\n    <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"save()\">\r\n      <i class=\"fa fa-floppy-o mr-1\"></i> <span translate>Save</span></button>\r\n  </sd-modal-footer>\r\n</sd-modal-control>",
            styles: [".btn{color:#fff;background-color:#919191;border-color:#919191;box-shadow:0 2px 2px 0 rgba(153,153,153,.14),0 3px 1px -2px rgba(153,153,153,.2),0 1px 5px 0 rgba(153,153,153,.12)}.btn:active,.btn:hover{box-shadow:0 14px 26px -12px rgba(153,153,153,.14),0 3px 1px -2px rgba(153,153,153,.2),0 1px 5px 0 rgba(153,153,153,.12)}.btn.btn-sm{padding:.2rem .5rem;font-size:11px}.btn.btn-xs{padding:.1rem .3rem;font-size:9px}.btn.btn-round{border-radius:30px}.btn.btn-primary{color:#fff;background-color:#c82c37;border-color:#c82c37;box-shadow:0 2px 2px 0 rgba(156,39,176,.14),0 3px 1px -2px rgba(156,39,176,.2),0 1px 5px 0 rgba(156,39,176,.12)}.btn.btn-primary:active,.btn.btn-primary:hover{box-shadow:0 14px 26px -12px rgba(156,39,176,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(156,39,176,.2)}.btn.btn-info{color:#fff;background-color:#00bcd4;border-color:#00bcd4;box-shadow:0 2px 2px 0 rgba(0,188,212,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,188,212,.12)}.btn.btn-info:active,.btn.btn-info:hover{box-shadow:0 14px 26px -12px rgba(0,188,212,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(0,188,212,.2)}.btn.btn-success{color:#fff;background-color:#4caf50;border-color:#4caf50;box-shadow:0 2px 2px 0 rgba(76,175,80,.14),0 3px 1px -2px rgba(76,175,80,.2),0 1px 5px 0 rgba(76,175,80,.12)}.btn.btn-success:active,.btn.btn-success:hover{box-shadow:0 14px 26px -12px rgba(76,175,80,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(76,175,80,.2)}.btn.btn-warning{color:#fff;background-color:#ff9800;border-color:#ff9800;box-shadow:0 2px 2px 0 rgba(255,152,0,.14),0 3px 1px -2px rgba(255,152,0,.2),0 1px 5px 0 rgba(255,152,0,.12)}.btn.btn-warning:active,.btn.btn-warning:hover{box-shadow:0 14px 26px -12px rgba(255,152,0,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(255,152,0,.2)}.btn.btn-danger{color:#fff;background-color:#f44336;border-color:#f44336;box-shadow:0 2px 2px 0 rgba(244,67,54,.14),0 3px 1px -2px rgba(244,67,54,.2),0 1px 5px 0 rgba(244,67,54,.12)}.btn.btn-danger:active,.btn.btn-danger:hover{box-shadow:0 14px 26px -12px rgba(244,67,54,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(244,67,54,.2)}", "::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:50px}::-webkit-scrollbar-thumb:hover{background:#555}", ".sd-box{position:relative;border-radius:3px;background:#fff;border-top:3px solid #919191;width:100%;box-shadow:0 1px 1px rgba(0,0,0,.1)}.sd-box.sd-box-primary{border-top-color:#c82c37!important}.sd-box.sd-box-success{border-top-color:#4caf50!important}.sd-box.sd-box-info{border-top-color:#00bcd4!important}.sd-box.sd-box-warning{border-top-color:#ff9800!important}.sd-box.sd-box-danger{border-top-color:#f44336!important}.sd-box-header{color:#444;display:block;padding:.5rem;position:relative;border-bottom:1px solid #f4f4f4}.sd-box-header .sd-box-title{display:inline-block;font-size:1.2rem;margin:0;line-height:1}.sd-box-body{padding:.5rem;background-color:#fff;border-radius:0 0 3px 3px}.sd-box-footer{border-top:1px solid #f4f4f4;padding:.5rem;background-color:#fff;border-radius:0 0 3px 3px}", ".form-control-xs,.input-group-xs>.form-control,.input-group-xs>.input-group-append>.input-group-text{font-size:13px!important;line-height:1.5!important;padding:3px 25px 3px 3px!important;height:28px!important}", ".c-btn-icon{background:0 0!important;border:none;opacity:.8}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:0 0!important;border:none;cursor:not-allowed;opacity:.3}.table td,.table th{padding:.2rem!important}.btn{color:#fff;background-color:#999;border-color:#999;box-shadow:0 2px 2px 0 rgba(153,153,153,.14),0 3px 1px -2px rgba(153,153,153,.2),0 1px 5px 0 rgba(153,153,153,.12)}.btn:hover{color:#fff;background-color:#919191;border-color:#7a7a7a}.btn.btn-sm{font-size:.6875rem}.btn.btn-primary{color:#fff;background-color:#9c27b0;border-color:#9c27b0;box-shadow:0 2px 2px 0 rgba(156,39,176,.14),0 3px 1px -2px rgba(156,39,176,.2),0 1px 5px 0 rgba(156,39,176,.12)}.btn.btn-info{color:#fff;background-color:#00bcd4;border-color:#00bcd4;box-shadow:0 2px 2px 0 rgba(0,188,212,.14),0 3px 1px -2px rgba(0,188,212,.2),0 1px 5px 0 rgba(0,188,212,.12)}.btn.btn-success{color:#fff;background-color:#4caf50;border-color:#4caf50;box-shadow:0 2px 2px 0 rgba(76,175,80,.14),0 3px 1px -2px rgba(76,175,80,.2),0 1px 5px 0 rgba(76,175,80,.12)}.btn.btn-warning{color:#fff;background-color:#ff9800;border-color:#ff9800;box-shadow:0 2px 2px 0 rgba(255,152,0,.14),0 3px 1px -2px rgba(255,152,0,.2),0 1px 5px 0 rgba(255,152,0,.12)}.btn.btn-danger{color:#fff;background-color:#f44336;border-color:#f44336;box-shadow:0 2px 2px 0 rgba(244,67,54,.14),0 3px 1px -2px rgba(244,67,54,.2),0 1px 5px 0 rgba(244,67,54,.12)}"]
        })
    ], UploadExcelConfigComponent);
    return UploadExcelConfigComponent;
}());
export { UploadExcelConfigComponent };
//# sourceMappingURL=data:application/json;base64, 