import { Component, OnInit, Input, Output, EventEmitter, Renderer2,
        ElementRef, ViewChild, ViewEncapsulation, HostListener, OnDestroy, AfterViewInit } from '@angular/core';
import { FilterPanelOption } from './filter-panel.interface';
import { QuerySolutionService } from '@farris/ui-filter-condition';
import { deepCopy } from './utils';
// 用于显示点击 简单筛选 项的下拉面板
@Component({
    selector: 'farris-filter-panel',
    templateUrl: './filter-panel.component.html',
    encapsulation: ViewEncapsulation.None
})
export class FilterPanelComponent implements OnInit, OnDestroy, AfterViewInit {
    private el: HTMLElement;
    @Input() option: FilterPanelOption;
    _hide = false;
    @Input()
    set hide(val) {
        this._hide = val;
    }
    get hide() {
        return this._hide;
    }
    @Output() hidePanel = new EventEmitter();
    @Output() submit = new EventEmitter();
    @Output() filterSubmit = new EventEmitter();
    @Output() clearFilter = new EventEmitter();
    @ViewChild('filterPanel') filterPanel: ElementRef;
    canSubmit = false;
    fiexedLeft=true;
    // 全局标识，初始化标识元素没有发生mousemove
    private hasMove = false;
    private _documentMouseUpEvent = null;
    constructor(private renderer: Renderer2, private elementRef: ElementRef, private filterConditionSer: QuerySolutionService) {
        this.el = this.elementRef.nativeElement;
    }
    ngOnInit() {
        const self = this;
        this._documentMouseUpEvent = this.renderer.listen(document, 'mouseup', (event) => {

            if (event.target.closest('#mainContainerTabset')) {
                self.hidePanel.emit(event);
                return;
            }

            if (this.hasMove) {
                return;
            }

            if (!event.target.closest('.f-filter-panel')
                && !event.target.closest('.modal')
                && !event.target.closest('.overlay-container') && !event.target.closest('.overlay-pane')) {
                self.hidePanel.emit(event);
            }

            this.hasMove = false;
        });
        if (this.option.item && (this.option.item.control.controltype == 'dropdown' || this.option.item.control.controltype == 'radio')) {
            this.canSubmit = true;
        }
    }

    ngAfterViewInit() {
        const _panel: any = this.el.querySelector('.f-filter-panel');
        if (_panel && this.option.target) {
            const h = _panel.offsetHeight;
            const rect = this.option.target.getBoundingClientRect();
            if (window['innerHeight'] - this.option.top < h) {
                if (rect.top > h) {
                    this.option.top = rect.top - h - 14;
                } else {
                    this.option.top = 32;
                }
                const arrow: any = this.el.querySelector('.f-filter-panel-arrow');
                if (arrow) {
                    arrow.style.display = 'none';
                }
            }
        }
        if(_panel&&this.option.right){
            if(this.option.left+_panel.offsetWidth>window['innerWidth']){
                // 超出显示在做
                this.fiexedLeft=false;
                this.option.left=this.option.right-_panel.offsetWidth;
            }else{
                this.fiexedLeft=true;
            }
        }
    }

    ngOnDestroy() {
        if (this._documentMouseUpEvent) {
            this._documentMouseUpEvent();
            this._documentMouseUpEvent = null;
        }
    }


    @HostListener('mousedown', ['$event'])
    onMouseDown($event) {
        this.hasMove = false;
    }

    @HostListener('mousemove', ['$event'])
    onMouseMove($event) {
        this.hasMove = true;
    }


    onSearch(event) {
        if (this.option.item.control.controltype == 'radio') {
            this.panelFilterSubmit();
        }else if(this.option.item.control.controltype == 'text'&&event['type']=='enter'){
            this.panelFilterSubmit();
        }
        // this.filterItem = event;
    }

    panelFilterCancel($event) {
        this.hidePanel.emit($event);
    }
    panelFilterSubmit(clear: boolean = false) {
        if (!clear && !this.canSubmit) {return; }
        if (this.option.item.control.controltype === 'text') {
            const farrisSearchRecord = this.option.item.valueText;
            let farrisSearchRecordArray = [];
            const storagelabelCode = this.option.item.labelCode;
            let filterPanelArray = JSON.parse(localStorage.getItem(this.option.localStorageKey));
            if (Array.isArray(filterPanelArray)) {
                filterPanelArray = null;
            }
            if (!filterPanelArray || !filterPanelArray[storagelabelCode] || !filterPanelArray[storagelabelCode].length
                    && farrisSearchRecord && farrisSearchRecord.length) {
                farrisSearchRecordArray.push(farrisSearchRecord);
            } else {
                farrisSearchRecordArray = filterPanelArray[storagelabelCode];
                const index = filterPanelArray[storagelabelCode].indexOf(farrisSearchRecord);
                if (index < 0 && farrisSearchRecord && farrisSearchRecord.length) {
                    farrisSearchRecordArray.unshift(farrisSearchRecord);
                }
                farrisSearchRecordArray = farrisSearchRecordArray.slice(0, 6);
            }
            if (filterPanelArray == null) { filterPanelArray = {}; }
            filterPanelArray[storagelabelCode] = farrisSearchRecordArray;
            localStorage.setItem(this.option.localStorageKey, JSON.stringify(filterPanelArray));

        }

        const conditions = this.filterConditionSer.setFilterConditions(this.option.item);
        if (!clear) {
            this.filterSubmit.emit({
                item: this.option.item,
                filter: conditions
            });
        }
        this.submit.emit(this.option.item);
    }

    panelFilterClear() {
        this.panelFilterempty();
        this.panelFilterSubmit(true);
        this.clearFilter.emit(this.option.item);
    }
    panelFilterempty() {
        this.filterClearValue(this.option.item);
        this.option.item.valueText = '';
        this.option.item.filled = false;
        this.option.item = deepCopy(this.option.item);
        this.canSubmit = false;
    }

    filterClearValue(item) {
        switch (item.control.controltype) {
            case 'text':
            case 'search':
            case 'singleDate':
            case 'year':
            case 'month':
            case 'dropdown':
            case 'singlenumber':
            case 'radio':
                item.value.value = null;
                break;
            case 'date':
            case 'datetime':
            case 'monthRange':
            case 'yearRange':
                item.value.startTime = null;
                item.value.endTime = null;
                break;
            case 'number':
                item.value.startValue = null;
                item.value.endValue = null;
                break;
            case 'help':
                item.value.value = [];
                item.value.valueField = null;
                item.value.textValue = null;
                break;
            case 'checkboxgroup':
            case 'bool-check':
                item.value.value = [];
                break;
            case 'input-group':
                item.value.value = [];
                item.value.textValue = null;
                item.value.textField = null;
                item.value.isInputText = null;
                break;
            case 'flexibleNumber':
            case 'flexibleDate':
                item.value.startValue = null;
                item.value.endValue = null;
                item.value.value = null;
                break;

            default:
                item.value.value = null;
                break;
        }
    }

    onSubmitChange(event) {
        this.canSubmit = event;
    }

}