import { debounceTime, switchMap, timeout, delay } from 'rxjs/operators';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ServerSideToken, LookupGridComponent } from '@farris/ui-lookup';
import { LookupHttpBeQueryService } from './service/Lookup-http.service';
import { of } from 'rxjs';

@Component({
    selector: 'lookup-demo',
    templateUrl: './lookup-demo.component.html',
    providers: [{ provide: ServerSideToken, useClass: LookupHttpBeQueryService }]
})
export class LookupDemoComponent implements OnInit {
    @ViewChild('lookup') lookup: LookupGridComponent;
    readonlyLookup = false;
    editable = true;

    multiSelect = true;
    multiSelect2 = true;

    enableCascade = false;


    loadDataWhenOpen = true;
    selectFirstInNav = false;

    firstName = 'Lucas';
    // tslint:disable-next-line:variable-name
    _firstName2 = undefined;
    mappingData = '';
    searchOnServer = '';
    nosearch = '';
    demoObj = {
        firstName: 'Lucas',
        firstName2: 'Lucas Huang'
    };
    set firstName2(val) {
        console.log(val);
        this._firstName2 = val;
    }
    get firstName2() {
        return this._firstName2;
    }

    multiSelectData = { code: '', name: '青海省,辽宁省', id: '115c5089-ea88-417e-9a7b-880433eb6941,11e7f794-b791-4c4e-a495-85d82a51dfba' };
    multiSelectData1 = { code: '', name: '青海省,辽宁省', id: '115c5089-ea88-417e-9a7b-880433eb6941,11e7f794-b791-4c4e-a495-85d82a51dfba' };

    lookup1CusFormat = {
        name: (val, data) => {
            // console.log(data);
            return 'AAA【' + val + '】';
        }
    };

    lookup1CusFormat3 = {
        employeeCode: (val, data) => {
            // console.log(data);
            return '【' + val + '】';
        },
        rowStyler: (e) => {
            if (e.data && e.data['code'] && e.data['code']['dfCode'] && e.data['code']['dfCode'].indexOf('00') > -1) {
                return {
                    background: 'blue'
                };
            }
        },
        cellStyler: (e) => {
            if (e.value && e.value.indexOf('00') > -1) {
                return {
                    background: 'green'
                };
            }
        }
    };

    customFormatter2 = {
        "name.dfName": (val, data) => {
            // console.log(data);
            return 'AAA【' + val + '】';
        },
        rowStyler: (e) => {
            if (e.data && e.data['code']['dfCode'].indexOf('00') > -1) {
                return {
                    background: 'blue'
                };
            }
        },
        cellStyler: (e, field) => {
            if (field === 'code.dfCode') {
                if (e.data && e.data['code']['dfCode'].indexOf('00') > -1) {
                    return {
                        background: 'green'
                    };
                }
            }
        }
    };

    customNavFormatter = {
        "orgName": (val, data) => {
            // console.log(data);
            return 'AAA【' + val + '】';
        }
    };

    gridData = {
        "columns": [
            {
                "field": "id",
                "title": "ID",
                "width": 100,
                "hAlign": "left",
                "align": "left",
                "formatter": null,
                "searchField": true
            },
            {
                "field": "name",
                "title": "name",
                "width": 100,
                "hAlign": "left",
                "align": "left",
                "formatter": null,
                "searchField": true
            },
            {
                "field": "code",
                "title": "code",
                "width": 100,
                "hAlign": "left",
                "align": "left",
                "formatter": null,
                "searchField": true
            }
        ],
        "items": [
            {
                "code": "03",
                "name": "张三",
                "id": "174c8be8-ca55-4df5-b115-485149246c9d"
            },
            {
                "code": "04",
                "name": "李四",
                "id": "00f9652a-a5f0-4152-a844-1001f8e342fa"
            },
            {
                "code": "0201",
                "name": "02-01",
                "id": "7f167d79-f943-469e-b6f3-27e47f58e222"
            }
        ],
        "favoriteData": null,
        "total": 3,
        "pageInfo": {
            "pageList": [10, 20, 30, 50],
            "pageSize": 2,
            "pageIndex": 1,
            "enablePager": true
        },
        "treeInfo": null,
        "displayType": "List",
        "title": "lookup",
        "navigation": null,
        "displayInfo": null
    };

    tcolumns= [
        {
            "field": "name.dfName",
            "title": "名称",
            "width": 200,
            "hAlign": "left",
            "align": "left",
            "formatter": null
        },
        {
            "field": "code.dfCode",
            "title": "编号",
            "width": 100,
            "hAlign": "left",
            "align": "left",
            "formatter": null
        },
        {
            "field": "fullName",
            "title": "全称",
            "width": 200,
            "hAlign": "left",
            "align": "left",
            "formatter": null
        }
    ]

    tdata = [{
        leaf: false,
        data: {
        "id": "0363c099-b64d-4880-a9c1-6acbe22b747b",
        "code": {
            "dfCode": "370000"
        },
        "name": {
            "dfName": "山东省"
        },
        "fullName": "山东省",
        "remark": {
            "dfRemark": null
        },
        "countryOrRegion": {
            "countryOrRegion": {
                "countryOrRegion": "7daf073a-30fd-4c91-8e11-8c20d8d87d85",
                "countryOrRegion_Name": {
                    "dfName": "中国"
                }
            }
        },
        "timeStamp": {
            "lastChangedOn": "2019-03-13T11:19:47.683",
            "lastChangedBy": "admin",
            "createdOn": "2019-03-13T11:19:47.683",
            "createdBy": "admin"
        },
        "treeInfo": {
            "isDetail": false,
            "layer": 1,
            "path": "0015"
        },
        "parentHierarchyInfo": {
            "isDetail": false,
            "layer": 1,
            "sequence": 15,
            "parentElement": ""
        }
    }}
];

    displayType = 'LIST';
    uri = 'assets/data/grid.json';
    displayFields = 'name,code';

    constructor() {}

    ngOnInit(): void {}
    onclear() {
        console.log('clear');
    }

    onDisplayTypeChange(DT) {
        this.displayType = DT;
        if (DT === 'LIST') {
            this.uri = 'assets/data/grid.json';
            this.displayFields = 'name,code';
        } else {
            this.uri = 'assets/data/big-tree-data-lookup.json';
            this.displayFields = 'fullName,code.dfCode';
        }
    }


    mappingData2 = (rows, mapFields) => {
        if (rows && !Array.isArray(rows)) {
            rows = [rows];
        }

        this.multiSelectData.code = rows ? rows.map(r => r.code.dfCode).join() : '';
        this.multiSelectData.name = rows ? rows.map(r => r.name.dfName).join() : '';
        this.multiSelectData.id =  rows ? rows.map(r => r.id).join() : '';
    }

    onSearch($event) {
        console.log('onSearcn', $event);
    }

    dictPicked(rows) {
        return of(false).pipe(
            delay(1000),
            switchMap(() => {
                return of(true);
            })
        );
    }


    private loaddata($event, randomStr = '') {
        const items =  [
            {
                "code": "03",
                "name": "张三_" + randomStr,
                "id": "274c8be8-ca55-4df5-b115-485149246c9d"
            },
            {
                "code": "04",
                "name": "李四2_" + randomStr,
                "id": "10f9652a-a5f0-4152-a844-1001f8e342fa"
            },
            {
                "code": "0201",
                "name": "02-01222 "+ randomStr,
                "id": "5f167d79-f943-469e-b6f3-27e47f58e222"
            }
        ];

        this.lookup.loadData( {
            items,
            pageInfo: {
                pageIndex: $event.pageIndex,
                pageSize: $event.pageSize,
                enablePager: true
            },
            total: 20
        });
    }

    onpagerChanged($event) {
        // console.log($event);
        this.loaddata($event);
    }


    onSearch1($event) {
        this.loaddata($event, 'search');
    }

    expandTreeNode($event) {
        console.log($event);
    }

    customDisplayText = (txt, data, ins: any) => {
        if (data && data.length) {
            if (ins.lookup.singleSelect) {
                return `${data[0]['code']} ~ ${data[0]['name']}_${data[0]['id']}`;
            }
            return txt;
        } else  {
            return '';
        }
    }

    customDisplayText2 = (txt, data, ins: any) => {
        if (data && data.length) {
            if (ins.lookup.singleSelect) {
                console.log(data);
                return ins.tree.findRowNodes(data[0].parents).map(n => n.node.data.name.dfName).concat(txt).join(' - ');
            }
            return txt;
        } else  {
            return '';
        }
    }


    tipFormatterFn = (e: any) => {
        if (e.helpData) {
            return  e.helpData['name'];
        } else if (e.formData) {
            return e.formData['name'];
        }

        return '';
    }

    onTextChanged($event) {
        console.log('tetChanged', $event);
    }

    dictPicking1 = (e) => {
        e.instance.customFormatter = {
            name: (val, data) => {
                // console.log(data);
                return '<span style="color: red">' + val + '</span>';
            },
            rowStyler: (aa) => {
                console.log( 'rowStyler' ,aa);
                return {
                    background: 'red',
                    color: 'white'
                };
            },
            cellStyler: (aa) => {
                console.log('cellstyler',aa)
                if (aa.field == 'code') {
                    return {
                        fontWeight: 'bold',
                        color: 'yellow'
                    };
                }
            }
        };

        return of(true);
    }

    oncheckedChange($event) {
        console.log('行钩选事件', $event);
    }

    onTagRemoved($event) {
        console.log('tag Removed', $event);
    }

    onTreeTagremoved($event) {
        const { removedIndex, instance } = $event;
        console.log($event);
        // if (instance.mapFields) {
        //     const helpFields = Object.keys(instance.mapFields);

        //     if (helpFields.indexOf(instance.textField) > -1) {
        //         helpFields.splice(helpFields.indexOf(instance.textField), 1);
        //     }

        //     helpFields.forEach( (helpField: any) => {
        //         instance.mapFields[helpField].split(',').forEach((formField: any) => {
        //             const val = this.multiSelectData[formField];
        //             if (val !== '' && val !== null && val !== undefined) {
        //                 const valArr = val.split(',');
        //                 valArr.splice(removedIndex, 1);
        //                 this.multiSelectData[formField] = valArr.join(',');
        //             }
        //         });
        //     });
        // }
    }
}