import { data } from './../../treetable/treetable-demo.data';
import { Component, OnInit, ViewEncapsulation, Renderer2, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/delay';
import { DataTableComponent } from '@farris/ui-datatable';
@Component({
    // tslint:disable-next-line:component-selector
    selector: 'selector-name',
    templateUrl: 'datatable-demo.component.html',
    styles: [
        `
        .age-bg{
            background:blue;
        }
        .bg-orange{
            background:orange;
        }
        .row-2{
            background:green;
        }
        h3{
            color:#1890ff;
        }
        `
    ],
    encapsulation: ViewEncapsulation.None
})

export class DataTableDemoComponent implements OnInit {
    @ViewChild('farrisDatatable') farrisDatatable: DataTableComponent;
    current: Date = new Date();
    columns = [
        {
            title: '编号', field: 'Code', width: 60, align: 'center'
            // 添加列样式
        },
        // { title: '姓名', field: 'Name', width: 80, fixed: { type: 'left', media: 'md' } },
        { title: '姓名', field: 'Name', width: 80, sortable: true },
        { title: '年龄', field: 'Age', width: 90, sortable: true },
        // { title: '年龄', field: 'Age', width: 90, sortable: true, className: 'table-success' },
        { title: '出生日期', field: 'birthday', width: 140 },
        { title: '身份证号', field: 'idcode', width: 120 },
        { title: '邮编', field: 'postcode', width: 120 },
        { title: '地址', field: 'address', width: 200 }
    ];
    columns1 = [
        {
            title: '编号', field: 'Code', width: 60, align: 'center', fixed: 'left'
            // 添加列样式
        },
        { title: '姓名', field: 'Name', width: 80, fixed: { type: 'left', media: 'md' } },
        { title: '年龄', field: 'Age', width: 90 , sortable: true},
        // { title: '年龄', field: 'Age', width: 90, sortable: true, className: 'table-success' },
        { title: '出生日期', field: 'birthday', width: 140 , sortable: true},
        { title: '身份证号', field: 'idcode', width: 120 },
        { title: '邮编', field: 'postcode', width: 120 },
        { title: '地址', field: 'address', width: 200, fixed: 'right' }
    ];
    columns2 = [
        {
            title: '编号', field: 'Code', width: 80, align: 'center'
            // 添加列样式
        },
        { title: '姓名', field: 'Name', width: 80, media: { md: 'none', lg: 'cell' } },
        { title: '年龄', field: 'Age', width: 90 },
        { title: '出生日期', field: 'birthday', width: 140 },
        { title: '身份证号', field: 'idcode', width: 120 },
        { title: '邮编', field: 'postcode', width: 120 },
        { title: '地址', field: 'address', width: 200 }
    ];
    columnsSort = [
        {
            title: '编号', field: 'Code', width: 80, align: 'center', sortable: true, filterable: true
            // 添加列样式
        },
        {
            title: '姓名', field: 'Name', width: 80, media: { md: 'none', lg: 'cell' },
            multipleFilter: true,
            filter: [
                {
                    label: '互联网1',
                    value: 1
                },
                {
                    label: '互联网',
                    value: 2
                }
            ],
            filterMethod: (value, row) => {
                return row.Name.indexOf(value) > -1;
            }
        },
        {
            title: '年龄', field: 'Age', width: 90, sortable: true,
            multipleFilter: false,
            filter: [
                {
                    label: '所有',
                    value: 0
                },
                {
                    label: '大于25岁',
                    value: 1
                },
                {
                    label: '小于25岁',
                    value: 2
                }
            ],
            filterMethod: (value, row) => {
                if (value === 1) {
                    return row.Age > 25;
                } else if (value === 2) {
                    return row.Age < 25;
                } else {
                    return row.Age > -1;
                }
            }
        },
        {
            title: '出生日期', field: 'birthday', width: 140
        },
        { title: '身份证号', field: 'idcode', width: 120 },
        { title: '邮编', field: 'postcode', width: 120 },
        { title: '地址', field: 'address', width: 200 }
    ];
    data = [
        {
            Code: 1, Name: '珠港澳<img src="" onerror="alert(123)">', Age: 20, birthday: '1998-05-06', idcode: '没有权限查看', postcode: '05310000',
            address: '地球', correct: false
        },
        { Code: 2, Name: '珠港澳1', Age: 21, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 3, Name: '珠港澳2', Age: 22, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 4, Name: '珠港澳3', Age: 23, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 5, Name: '珠港澳4', Age: 24, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 6, Name: '珠港澳5', Age: 25, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 7, Name: '珠港澳6', Age: 26, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false }
    ];
    dataSort = [
        { Code: 14, Name: '互联网13', Age: 20, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 15, Name: '互联网14', Age: 20, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 16, Name: '互联网15', Age: 29, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 17, Name: '互联网16', Age: 20, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 18, Name: '互联网17', Age: 20, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 19, Name: '互联网18', Age: 20, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false }
    ];
    dataEdit = [
        { Code: 14, Name: '可编辑13', Age: 20, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 15, Name: '可编辑14', Age: 20, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 16, Name: '可编辑15', Age: 29, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 17, Name: '可编辑16', Age: 20, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 18, Name: '可编辑17', Age: 20, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 19, Name: '可编辑18', Age: 20, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
        { Code: 20, Name: '可编辑19', Age: 29, birthday: '1998-5-6', idcode: '没有权限查看', postcode: '05310000', address: '地球', correct: false },
    ];
    data2 = [];
    total;
    pIndex = 1;
    pSzie = 20;
    constructor() {
    }
    ngOnInit() {
        this.getPage({ pageInfo: { pageIndex: this.pIndex, pageSize: this.pSzie } });
    }


    serverCall(meals: any[], page: number, pageSize = 10, searchData?: any): Observable<any> {
        const perPage = pageSize;
        const start = (page - 1) * perPage;
        const end = start + perPage;

        if (searchData && searchData.value) {
            meals = meals.filter(item => {
                if (item[searchData.field].indexOf(searchData.value) > -1) {
                    return item;
                }
            });
        }

        const total = meals.length;

        return of({
            items: meals.slice(start, end),
            total
        }).delay(1000);
    }

    getPage(e: any) {
        // this.loading = true;
        this.serverCall(this.data, e.pageInfo.pageIndex, e.pageInfo.pageSize, e.search)
            .do(res => {
                this.total = res.total;
                this.pIndex = e.pageInfo.pageIndex;
                this.pSzie = e.pageInfo.pageSize;
                // this.loading = false;
            })
            .map(res => res.items).subscribe(d => {
                this.data2 = d;
            });
    }

    search(searchData: any) {
        this.getPage({ pageInfo: { pageIndex: 1, pageSize: this.pSzie }, search: searchData });
    }
    // 设置行类样式
    getRowClassName(row, index) {
        if (index === 2) {
            return 'table-primary';
        } else if (index === 5) {
            return 'table-danger';
        }
        return '';
    }
    // 设置单元格类样式 或者列样式
    getCellClassName(value, col) {
        if (col.field === 'Code') {
            return value === 4 ? 'bg-warning' : '';
        } else if (col.field === 'Name') {
            return 'row-2';
        }
    }
    sortChange(e) {
    }
    cellClick(e) {
        if (!e.isEdit) {
            e.sender.editGrid(e.rowIndex, e.columnIndex);
        }
    }
    add() {
    }
    selectRow($event) {
    }
    addRows() {
        this.farrisDatatable.addRows([{
            Code: 20, Name: '可编辑19', Age: 29, birthday: '1998-5-6', idcode: '没有权限查看',
            postcode: '05310000', address: '地球', correct: false
        }]);
    }
    removeRows() {
        this.farrisDatatable.removeRows();
    }
}