import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
import { isValidDate } from '../../../classes/environment-schema';
import { AutoCompleteControlSchema, FormControlBase, Operator } from '../../../classes/form-schema';
import { QueryRule } from '../query-builder-group/query-builder-group.component';
export class QueryBuilderRuleComponent {
    constructor() {
        this.dataSourceFields = [];
        // Danh sách các operator cố định, dùng trong trường hợp custom form
        this.operators = [];
        this.onRemove = new EventEmitter();
        this.disabled = null;
        this.custom = false;
        this.changingControl = false;
        this.customTypeFieldName = 'fieldValue';
        this.customTypeSeparator = '____';
    }
    // control value cố định, dùng trong trường hợp custom form
    set controlValue(value) {
        this.control = value;
        if (value instanceof AutoCompleteControlSchema) {
            this.controlType = 'autocomplete';
        }
    }
    ;
    ngOnInit() {
        const originValue = this.query.value;
        if (this.query != null) {
            this.query.control = this.control;
            if (this.query.value
                || this.query.compareType == Operator.isCurrentUser
                || this.query.compareType == Operator.isCurrentCanBo) {
                // Trong trường hợp operator không truyền từ bên ngoài vào thì mới set lại
                if (!this.operators || this.operators.length == 0) {
                    this.setDatasourceOperators(this.query.field);
                }
                this.handleChangeOperator();
            }
        }
        if (this.controlType == 'custom') {
            this.setFuncGetValue();
            if (originValue) {
                try {
                    this.query[this.customTypeFieldName] = originValue['field'];
                    this.query.value = originValue['value'];
                }
                catch (ex) {
                }
            }
        }
        if (this.itemField != null && this.itemField.controlType == 'datetime' && this.query.value) {
            if (!isValidDate(new Date(this.query.value))) {
                this.custom = true;
            }
            else {
                this.custom = false;
            }
        }
    }
    setFuncGetValue() {
        if (this.controlType == 'custom') {
            this.query.funcGetValue = (item) => ({
                field: item[this.customTypeFieldName],
                value: item.value
            });
        }
        else {
            this.query.funcGetValue = null;
        }
    }
    removeGroup() {
        this.onRemove.emit(this.query);
    }
    handleChangeField(evt) {
        this.query.value = null;
        this.changingControl = true;
        this.setDatasourceOperators(evt.value);
    }
    setDatasourceOperators(field) {
        if (this.dataSourceFields) {
            this.itemField = this.dataSourceFields.find(p => p.id == field);
            if (this.itemField != null) {
                this.operators = this.itemField.operators;
                this.resetControl(this.itemField);
                const itemOperator = this.operators.find(q => q.id == this.query.compareType);
                if (!itemOperator) {
                    if (this.operators.length == 1) {
                        this.query.compareType = this.operators[0].id;
                        this.handleChangeOperator();
                    }
                    else {
                        this.query.compareType = null;
                    }
                }
                else if (itemOperator.controlType) {
                    this.resetControl(itemOperator);
                    if (itemOperator._disabled) {
                        this.disabled = true;
                        this.query.value = null;
                    }
                    else {
                        this.disabled = null;
                    }
                }
            }
            else {
                this.operators = [];
                this.control = null;
                this.controlType = null;
                this.query.compareType = null;
            }
            if (this.control) {
                this.control.disabled = this.disabled;
            }
            this.setFuncGetValue();
        }
    }
    handleChangeOperator() {
        const itemOperator = this.operators.find(q => q.id == this.query.compareType);
        if (itemOperator == null)
            return;
        if (itemOperator.controlType) {
            this.resetControl(itemOperator);
        }
        else {
            if (this.itemField != null) {
                this.resetControl(this.itemField);
            }
        }
        if (itemOperator._disabled) {
            this.disabled = true;
            this.query.value = null;
        }
        else
            this.disabled = null;
        if (this.control) {
            this.control.disabled = this.disabled;
        }
    }
    resetControl(itemOperator) {
        this.controlType = itemOperator.controlType;
        // Hold lại giá trị component cũ (Fix lỗi của dropdown)
        let component = null;
        if (this.control) {
            component = this.control._component;
        }
        this.control = Object.assign(Object.assign({}, itemOperator.control), { _component: component });
        this.query.control = this.control;
    }
    handleLoaded() {
        this.changingControl = false;
    }
}
QueryBuilderRuleComponent.decorators = [
    { type: Component, args: [{
                selector: 'query-builder-rule',
                template: "<div class=\"tn__group-or-rule-container rule-container\">\n    <div class=\"tn__group-or-rule rule\">\n        <div class=\"tn__rule-body\">\n            <ng-container *ngIf=\"templateFieldPicker\">\n                <div class=\"tn__rule-field\">\n                    <ng-container\n                        *ngTemplateOutlet=\"templateFieldPicker; context: {$implicit: query, handleChangedField: setDatasourceOperators}\">\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"!templateFieldPicker\">\n                <ng-container *ngTemplateOutlet=\"fieldPicker; context: {$implicit: query}\"></ng-container>\n            </ng-container>\n            <div class=\"tn__rule-operator\">\n                <p-dropdown appendTo=\"body\" [options]=\"operators\" optionLabel=\"ten\" optionValue=\"id\"\n                    placeholder=\"Ch\u1ECDn to\u00E1n t\u1EED\" [(ngModel)]=\"query.compareType\" (onChange)=\"handleChangeOperator()\">\n                </p-dropdown>\n            </div>\n            <div *ngIf=\"!changingControl\" class=\"tn__rule-value\">\n                <ng-container *ngIf=\"control\">\n                    <ng-container [ngSwitch]=\"controlType\">\n                        <ng-container *ngSwitchCase=\"'textbox'\">\n                            <ng-template\n                                *ngTemplateOutlet=\"textBoxValue; context: {$implicit: query, _disabled: false}\">\n                            </ng-template>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"'custom'\">\n                            <ng-template\n                                *ngTemplateOutlet=\"textBoxValue; context: {$implicit: query, _disabled: disabled}\">\n                            </ng-template>\n                        </ng-container>\n                        <!-- <p-multiSelect *ngSwitchCase=\"'dropdown'\" [placeholder]=\"control.placeholder\"\n                            [appendTo]=\"'body'\" [options]=\"control.dataSource\" [disabled]=\"disabled\" optionLabel=\"ten\"\n                            optionValue=\"id\" [(ngModel)]=\"query.value\">\n                        </p-multiSelect> -->\n                        <dropdown *ngSwitchCase=\"'dropdown'\" [control]=\"control\" [dataSource]=\"control.dataSource\"\n                            [itemSelectedStyleClass]=\"'min'\" [(value)]=\"query.value\">\n                        </dropdown>\n                        <div *ngSwitchCase=\"'datetime'\" class=\"datetime-value-container\">\n                            <p-checkbox [binary]=\"true\" [label]=\"'T\u00F9y bi\u1EBFn'\" [(ngModel)]=\"custom\"></p-checkbox>\n                            <datetime-picker *ngIf=\"!custom\" [disabled]=\"disabled\" [(ngModel)]=\"query.value\">\n                            </datetime-picker>\n                            <input *ngIf=\"custom\" pInputText placeholder=\"VD: [now] + 1d - 2h + 3m - 4s\"\n                                [(ngModel)]=\"query.value\" />\n                        </div>\n\n                        <tn-mask *ngSwitchCase=\"'number'\" [disabled]=\"disabled\" [maskType]=\"control.maskType\"\n                            [placeholder]=\"control.placeholder\" [(ngModel)]=\"query.value\">\n                        </tn-mask>\n                        <user-picker *ngSwitchCase=\"'user'\" [control]=\"control\" [disabled]=\"disabled\"\n                            [(ngModel)]=\"query.value\" [multiple]=\"control.multiple\">\n                        </user-picker>\n                        <cocautochuc-picker-list *ngSwitchCase=\"'cocautochuc'\" [control]=\"control\" [disabled]=\"disabled\"\n                            [(ngModel)]=\"query.value\">\n                        </cocautochuc-picker-list>\n                        <autocomplete-picker *ngSwitchCase=\"'role'\" [control]=\"control\" [disabled]=\"disabled\"\n                            [(ngModel)]=\"query.value\">\n                        </autocomplete-picker>\n                        <autocomplete-picker *ngSwitchCase=\"'groupuser'\" [control]=\"control\" [disabled]=\"disabled\"\n                            [(ngModel)]=\"query.value\">\n                        </autocomplete-picker>\n                        <autocomplete-picker *ngSwitchCase=\"'chucVu'\" [control]=\"control\" [disabled]=\"disabled\"\n                            [(ngModel)]=\"query.value\">\n                        </autocomplete-picker>\n                        <autocomplete-picker *ngSwitchCase=\"'autocomplete-picker'\" [control]=\"control\"\n                            [disabled]=\"disabled\" [(ngModel)]=\"query.value\">\n                        </autocomplete-picker>\n                        <app-autocomplete-datasource *ngSwitchCase=\"'autocomplete'\" [control]=\"control\"\n                            [disabled]=\"disabled\" [(ngModel)]=\"query.value\" [suggestions]=\"control.dataSource\">\n                        </app-autocomplete-datasource>\n                        <ng-container *ngSwitchDefault>\n                            <input type=\"text\" pInputText placeholder=\"Gi\u00E1 tr\u1ECB\" [disabled]=\"true\" />\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!control\">\n                    <input type=\"text\" pInputText placeholder=\"Gi\u00E1 tr\u1ECB\" [disabled]=\"true\" />\n                </ng-container>\n            </div>\n            <after-view-checked *ngIf=\"changingControl\" (loaded)=\"handleLoaded()\"></after-view-checked>\n        </div>\n        <div class=\"tn__rule-action\">\n            <button type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-button-text p-button-rounded p-button-danger\"\n                pTooltip=\"X\u00F3a\" tooltipPosition=\"top\" (click)=\"removeGroup()\"></button>\n        </div>\n    </div>\n</div>\n<ng-template #fieldPicker let-query>\n    <ng-container *ngIf=\"controlType == 'custom'\">\n        <input type=\"text\" [class]=\"'tn__rule-field'\" pInputText placeholder=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\"\n            [(ngModel)]=\"query.fieldValue\" />\n    </ng-container>\n    <ng-container *ngIf=\"controlType != 'custom'\">\n        <p-dropdown [appendTo]=\"'body'\" [options]=\"dataSourceFields\" [class]=\"'tn__rule-field'\" optionLabel=\"ten\"\n            optionValue=\"id\" placeholder=\"Ch\u1ECDn tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(ngModel)]=\"query.field\"\n            (onChange)=\"handleChangeField($event)\">\n        </p-dropdown>\n    </ng-container>\n</ng-template>\n<ng-template #textBoxValue let-query>\n    <input [disabled]=\"disabled\" type=\"text\" pInputText placeholder=\"Gi\u00E1 tr\u1ECB\" [(ngModel)]=\"query.value\" />\n</ng-template>",
                styles: ["::ng-deep query-builder-rule .tn__rule-body{display:flex;width:calc(100% - 34px);align-items:center}::ng-deep query-builder-rule .tn__rule-body>*{margin-right:5px}::ng-deep query-builder-rule .tn__rule-body>:last-child{margin-right:0}::ng-deep query-builder-rule .tn__rule-field{height:26px}::ng-deep query-builder-rule .tn__rule-value{min-height:26px}::ng-deep query-builder-rule .tn__rule-field,::ng-deep query-builder-rule .tn__rule-value{width:calc(50% - 80px);flex:0 0 calc(50% - 80px)}::ng-deep query-builder-rule .tn__rule-field .p-autocomplete,::ng-deep query-builder-rule .tn__rule-field .p-calendar,::ng-deep query-builder-rule .tn__rule-field.p-dropdown,::ng-deep query-builder-rule .tn__rule-field .p-dropdown,::ng-deep query-builder-rule .tn__rule-field .p-inputtext,::ng-deep query-builder-rule .tn__rule-field .p-multiselect,::ng-deep query-builder-rule .tn__rule-field tn-mask .p-inputgroup,::ng-deep query-builder-rule .tn__rule-value .p-autocomplete,::ng-deep query-builder-rule .tn__rule-value .p-calendar,::ng-deep query-builder-rule .tn__rule-value.p-dropdown,::ng-deep query-builder-rule .tn__rule-value .p-dropdown,::ng-deep query-builder-rule .tn__rule-value .p-inputtext,::ng-deep query-builder-rule .tn__rule-value .p-multiselect,::ng-deep query-builder-rule .tn__rule-value tn-mask .p-inputgroup{width:100%;height:100%}::ng-deep query-builder-rule .tn__rule-field .custom-autocomplete-button,::ng-deep query-builder-rule .tn__rule-field .p-inputtext,::ng-deep query-builder-rule .tn__rule-value .custom-autocomplete-button,::ng-deep query-builder-rule .tn__rule-value .p-inputtext{padding:2px 12px;min-height:26px}::ng-deep query-builder-rule .tn__rule-field .tn-dropdown,::ng-deep query-builder-rule .tn__rule-field .tn-dropdown.p-multiselect.p-component,::ng-deep query-builder-rule .tn__rule-value .tn-dropdown,::ng-deep query-builder-rule .tn__rule-value .tn-dropdown.p-multiselect.p-component{min-height:26px}::ng-deep query-builder-rule .tn__rule-field .tn-autocomplete .p-autocomplete-dropdown,::ng-deep query-builder-rule .tn__rule-value .tn-autocomplete .p-autocomplete-dropdown{height:26px;width:26px}::ng-deep query-builder-rule .tn__rule-field .p-calendar .p-button.p-button-icon-only,::ng-deep query-builder-rule .tn__rule-value .p-calendar .p-button.p-button-icon-only{padding:2px 12px}::ng-deep query-builder-rule .tn__rule-field .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token,::ng-deep query-builder-rule .tn__rule-field .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token,::ng-deep query-builder-rule .tn__rule-value .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token,::ng-deep query-builder-rule .tn__rule-value .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token{padding:0 .5rem;font-size:.9rem;margin:1px 2px}::ng-deep query-builder-rule .tn__rule-operator{width:145px;flex:0 0 145px;height:26px}::ng-deep query-builder-rule .tn__rule-operator .p-dropdown{width:100%;height:100%}::ng-deep query-builder-rule .tn__rule-operator .p-dropdown .p-inputtext{padding:2px 12px}::ng-deep query-builder-rule .tn__rule-action{flex:0 0 auto;white-space:nowrap}::ng-deep query-builder-rule .tn__rule-action button{height:26px!important;width:26px!important;margin-left:2px!important;margin-right:6px!important}::ng-deep query-builder-rule .datetime-value-container{display:flex;align-items:center}::ng-deep query-builder-rule .datetime-value-container p-checkbox{flex:0 0 auto;margin-right:5px}@media (max-width:640px){::ng-deep query-builder-rule .tn__rule-body{flex-direction:column;padding-right:5px}::ng-deep query-builder-rule .tn__rule-body>*{margin-right:0;margin-bottom:5px}::ng-deep query-builder-rule .tn__rule-field,::ng-deep query-builder-rule .tn__rule-operator,::ng-deep query-builder-rule .tn__rule-value{width:100%;flex:1 1 auto}}"]
            },] }
];
QueryBuilderRuleComponent.ctorParameters = () => [];
QueryBuilderRuleComponent.propDecorators = {
    dataSourceFields: [{ type: Input }],
    operators: [{ type: Input }],
    controlValue: [{ type: Input }],
    query: [{ type: Input }],
    templateFieldPicker: [{ type: Input }],
    onRemove: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64, 