/*
 * @Author: 疯狂秀才(Lucas Huang)
 * @Date: 2019-04-08 16:51:39
 * @LastEditors: 疯狂秀才(Lucas Huang)
 * @LastEditTime: 2019-09-23 16:51:21
 * @QQ: 1055818239
 * @Version: v0.0.1
 */
import { Component, OnInit, Input, EventEmitter, AfterViewInit, Output, ElementRef, Renderer2, ViewChild } from '@angular/core';
import { deepCopy, convertColumns } from '../datatable-column';
import { DataTableService } from '../datatable.service';
import { DataColumn } from '@farris/ui-common/column';
import { CommonUtils } from '@farris/ui-common';
import { DataTableComponent } from '../datatable.component';
import { DTCheckboxComponent } from '../datatable-checkbox.component';

@Component({
    selector: 'datatable-header',
    template: `
        <table class="table" [class.table-sm]="size === 'small'">
            <colgroup>
                <col class="dt-checkbox-cell" *ngIf="!singleSelect" />
                <col *ngFor="let col of columns" [style.width]="col.width + 'px'" />
            </colgroup>
            <thead>
                <tr>
                    <th drag-column class="dt-checkbox-cell" *ngIf="!singleSelect">
                        <dt-checkbox #checkall [checked]="isCheckAll" (checkedChange)="onCheckedChange($event)"></dt-checkbox>
                    </th>
                    <th drag-column *ngFor="let col of columns; let i = index" [style.textAlign]="col.hAlign || 'left'">
                        <span>{{ col.title }}</span>
                        <ng-container *ngIf="col.sortable">
                            <span
                                class="f-datatable-sort"
                                [class.f-datatable-sort-asc]="col.order === 'asc'"
                                [class.f-datatable-sort-desc]="col.order === 'desc'"
                                (click)="onSortColumnClick($event, col)"
                                *ngIf="col.order"
                                >
                            </span>
                            <span class="f-datatable-sort" (click)="onSortColumnClick($event, col)" *ngIf="!col.order">
                            </span>
                        </ng-container>
                    </th>
                </tr>
            </thead>
        </table>
    `,
    styleUrls: ['./datatable-header.component.scss']
})
export class DataTableHeaderComponent implements OnInit, AfterViewInit {
    @Input() size: string;
    @Input() hover: boolean;
    @Input() columns: DataColumn[] = [];
    @Input() singleSelect = true;
    @Input() fixed: string;
    // 数据排序使用
    @Input() rows: any;

    // 恢复源数据使用
    @Input() data: any;
    @Input() rowClassName: (row: any, index: number) => string;
    @Output() checkedAll = new EventEmitter();

    @Output() rowsChange = new EventEmitter<any>();
    @Output() loadData = new EventEmitter<{ pageSize: number; total: number; data: any; pageIndex: number }>();


    @ViewChild('checkall') checkallEl: DTCheckboxComponent;

    sortType = {};
    filterFields = {};
    clickedUp = false;
    clickedDown = false;
    copyColumns: any;
    copyRows: any;
    originRows: any;
    isCheckAll = false;
    allClass = ' ';
    constructor(
        public el: ElementRef,
        private dataService: DataTableService,
        private render: Renderer2,
        public utils: CommonUtils,
        private dt: DataTableComponent
    ) {
        this.allClass += this.el.nativeElement.classList.value;


        this.dataService.updateCheckAllStatus.subscribe( (n: number) => {
            if (n !== 2) {
                this.isCheckAll = n ? true : false;
                // this.checkallEl.elementRef.nativeElement.checked = this.isCheckAll;
            } else {
                this.isCheckAll = false;
                // this.checkallEl.elementRef.nativeElement.checked = false;
            }
        });
    }
    width = '100%';
    ngOnInit() {
        if (this.fixed === 'left') {
            this.columns = convertColumns(this.columns, 'left');
        }
        if (this.fixed === 'right') {
            this.columns = convertColumns(this.columns, 'right');
        }
    }
    ngAfterViewInit() {}

    onCheckedChange($event) {
        this.isCheckAll = $event.checked;
        this.checkedAll.emit($event.checked);
    }
    createRowClassName(row, index) {
        return this.rowClassName ? this.rowClassName(row, index) : '';
    }

    private compare(a, b) {
        if (typeof a  === 'string') {
            return a.localeCompare(b);
        } else {
            return a === b ? 0 : (a > b ? 1 : -1);
        }
    }
    private _sort(r1, r2) {
        let r = 0;
        const sortFields = this.dt.sortName.split(',');
        const orders = this.dt.sortOrder.split(',');

        if (!this.dt.sortName) {
            return r;
        }

        for (let i = 0; i < sortFields.length; i++) {
            const sn = sortFields[i];
            const so = orders[i];

            const col = this.columns.find(c => c.field === sn);

            const orderby = col['sorter'] || this.compare;
            let v1 = this.utils.getValue(sn, r1);
            if (v1 === null || v1 === undefined) {
                v1 = '';
            }
            let v2 = this.utils.getValue(sn, r2);
            if (v2 === null || v2 === undefined) {
                v2 = '';
            }
            r = orderby(v1, v2);
            if (r !== 0) {
                return r * (so === 'asc' ? 1 : -1);
            }
        }
        return r;
    }
    private clientSort() {
        const sortedData = this.data.sort(this._sort.bind(this));
        this.loadData.emit(sortedData);
    }

    onSortColumnClick($event, col) {
        if (!col.sortable) {
            return;
        }
        const sortName = this.dt.sortName;
        const sortOrder = this.dt.sortOrder;
        let sortFields = [];
        let sortOrders = [];
        if (sortName) {
            sortFields = sortName.split(',');
            sortOrders = sortOrder.split(',');
        }

        const colOrder = col.order || 'asc';
        let newOrder = colOrder;
        const i = sortFields.findIndex(n => n === col.field);
        if (i >= 0) {
            const _order = sortOrders[i] === 'asc' ? 'desc' : 'asc';
            newOrder = _order;
            if (this.dt.multiSort && newOrder === 'asc') {
                newOrder = undefined;
                sortFields.splice(i, 1);
                sortOrders.splice(i, 1);
                if (sortFields.length === 0) {
                    sortFields.push(col.field);
                    sortOrders.push('asc');
                    newOrder = 'asc';
                }
            } else {
                sortOrders[i] = _order;
            }
        } else {
            if (this.dt.multiSort) {
                sortFields.push(col.field);
                sortOrders.push(colOrder);
            } else {
                sortFields = [col.field];
                sortOrders = [colOrder];
            }
        }

        col.order = newOrder;

        this.dt.sortName = sortFields.join(',');
        this.dt.sortOrder = sortOrders.join(',');
        // this.dfs.setSortInfo(this.dg.sortName, this.dg.sortOrder);

        if (!this.dt.multiSort) {
            const updateFieldOrder = (cols: DataColumn[]) => {
                if (!cols || !cols.length) {
                    return;
                }
                cols.forEach(c => {
                    c.order = undefined;
                    const k = sortFields.findIndex(f => f === c.field);
                    if (k >= 0) {
                        c.order = sortOrders[k];
                    }
                });
            };

            updateFieldOrder(this.columns);
            // this.cdRef.detectChanges();
        }

        this.dt.beforeSortColumn(this.dt.sortName, this.dt.sortOrder).subscribe(() => {
            if (this.dt.remoteSort) {
                // this.reload();
            } else {
                this.clientSort();
            }

            this.dt.columnSorted.emit({ sortName: this.dt.sortName, sortOrder: this.dt.sortOrder });
        });
    }

    deepCopyData() {
        const copyColumns = deepCopy(this.columns);
        const copyRows = deepCopy(this.rows);
        copyColumns.forEach(element => {
            element.sortType = 'normal';
        });
        return {
            copyColumns,
            copyRows
        };
    }
    /* 若存在筛选条件 保存按钮可点击
     */
    hasChecked(col) {
        if (this.filterFields.hasOwnProperty(col.field)) {
            this.filterFields[col.field].some(ele => {
                return ele.checked;
            });
        }
        return false;
    }
}