import { MessagerService } from '@farris/ui-messager';
import { ComboListComponent } from '@farris/ui-combo-list';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ComboServerSideToken } from 'projects/combo-list/src/public-api';
import { ComboHttpBeQueryService } from './service/combo-http.service';
import { of } from 'rxjs';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
    selector: 'farris-doc-combo-list',
    templateUrl: './combo-demo.component.html',
    styleUrls: ['./combo-demo.component.scss'],
    providers: [
        {
            provide: ComboServerSideToken, useClass: ComboHttpBeQueryService
        }
    ]
})
export class ComboDemoComponent implements OnInit {

    @ViewChild('cmb1')  cmb1: ComboListComponent;

    valueBase = 6;
    value1 = false;
    value2 = '河北';
    value3 = '河北';
    value4 = '';
    boxData = 'editable';
    asyncItems: any[];
    items = [
        {id: false, label: '中国1111111111111111111111111111', src: 'assets/images/avatar-1.png'},
        {id: 2, label: '俄罗斯', src: 'assets/images/avatar-2.png'},
        {id: 3, label: '菲律宾', src: 'assets/images/avatar-3.png'},
        {id: 4, label: '越南', src: 'assets/images/avatar-4.png'},
        {id: 5, label: '老挝', src: 'assets/images/avatar-5.png'},
    ];

    stateVal = { id: '2', label: '审核通过'};
    stateItems = [
        {
            id: '1',
            label: '审核中',
            state: 'info'
        },
        {
            id: '2',
            label: '审核通过',
            state: 'success'
        },
        {
            id: '3',
            label: '不通过',
            state: 'error'
        },
        {
            id: '21',
            label: '审核中2',
            state: 'info'
        },
        {
            id: '22',
            label: '审核通过2',
            state: 'success'
        },
        {
            id: '23',
            label: '不通过2',
            state: 'error'
        },
        {
            id: '31',
            label: '审核中3',
            state: 'info'
        },
        {
            id: '32',
            label: '审核通过3',
            state: 'success'
        },
        {
            id: '33',
            label: '不通过3',
            state: 'error'
        },
        {
            id: '41',
            label: '审核中4',
            state: 'info'
        },
        {
            id: '42',
            label: '审核通过4',
            state: 'success'
        },
        {
            id: '43',
            label: '不通过4',
            state: 'error'
        }
    ];

    tagValues = "1,2,3";

    comboListData = [
        {
            propertiy: '[disabled]',
            default: 'false',
            type: 'boolean',
            description: '设置是否禁用组件'
        },
        {
            propertiy: '[readonly]',
            default: 'false',
            type: 'boolean',
            description: '设置是否组件只读'
        },
        {
            propertiy: '[editable]',
            default: 'true',
            type: 'boolean',
            description: '设置组件是否可以键入'
        },
        {
            propertiy: '[placeholder]',
            default: '请选择',
            type: 'string',
            description: '为空时提示消息'
        },
        {
            propertiy: '[panelWidth]',
            default: '300',
            type: 'number',
            description: '弹出面板宽度,当autoWidth为trues时，不起作用'
        },
        {
            propertiy: '[panelHeight]',
            default: '300',
            type: 'number',
            description: '弹出面板高度'
        },
        {
            propertiy: '[enableClear]',
            default: 'true',
            type: 'boolean',
            description: '内容不为空时是否显示清除按钮'
        },
        {
            propertiy: '[mappingField]',
            default: '-',
            type: 'string',
            description: '映射字段，修改数据时，同步修改此字段'
        },
        {
            propertiy: '[data]',
            default: '-',
            type: 'any[]',
            description: 'panel中显示的数据，当uri不为空时，此属性无用'
        },
        {
            propertiy: '[idField]',
            default: '-',
            type: 'string',
            description: 'id字段'
        },
        {
            propertiy: '[valueField]',
            default: '-',
            type: 'string',
            description: '值字段'
        },
        {
            propertiy: '[textField]',
            default: '-',
            type: 'string',
            description: '显示字段'
        },
        {
            propertiy: '[multiSelect]',
            default: 'false',
            type: 'boolean',
            description: '是否启用多选'
        },
        {
            propertiy: '[selectedValues]',
            default: '-',
            type: 'string',
            description: '默认选中数据'
        },
        {
            propertiy: '[uri]',
            default: '-',
            type: 'string',
            description: '动态数据源地址'
        },
        {
            propertiy: '[displayText]',
            default: '-',
            type: 'string',
            description: '默认显示值'
        },
        {
            propertiy: '(valueChange)',
            default: '-',
            type: 'EventEmitter<string>',
            description: '值变化事件'
        },
        {
            propertiy: '(selectChange)',
            default: '-',
            type: 'EventEmitter<any>',
            description: '选择事件'
        },
        {
            propertiy: '(showPanel)',
            default: '-',
            type: 'EventEmitter<void>',
            description: '显示panle事件'
        },
        {
            propertiy: '(hidePanel)',
            default: '-',
            type: 'EventEmitter<void>',
            description: '隐藏panle事件'
        },
        {
            propertiy: '(clear)',
            default: '-',
            type: 'EventEmitter<void>',
            description: '清除事件'
        }
    ];
    formG = new FormGroup({
        comboList1: new FormControl('')
    });

    constructor(private msg: MessagerService) {}


    has(val: string) {
        return this.boxData.indexOf(val) > -1;
    }
    ngOnInit(): void {
        this.asyncItems = this.items;
        setTimeout( e => {
            this.asyncItems =  [{id:5, label: ' ', src: 'assets/images/avatar-4.png'},{id: 6, label: '6越南9', src: 'assets/images/avatar-4.png'},{id:7, label: '', src: 'assets/images/avatar-4.png'}];
        }, 1000);
    }
    onSelect(e) {
        console.log(e);
    }
    beforeShow(instance: any) {
        console.log(instance);
        instance.uri = 'assets/data/list.json';
        return of('');
    }
    beforeShow1(instance: any) {
        console.log('beforeShow1:', instance);
        return of('');
    }
    beforeHide(instance: any) {
        console.log('beforeHide:', instance);
        return of('');
    }
    onValueChange(e) {
        console.log('onValueChange:', e);
    }
    onShowPanel() {
        console.log('onShowPanel:', this);
    }
    onHidePanel() {
        console.log('onHidePanel:', this);
    }
    onClear() {
        console.log('onClear:', this);
    }

    setFocus($event) {
        // this.cmb1.focus();
        this.msg.info('验证不通过');
        this.cmb1.el.nativeElement.querySelector('input').focus();
    }
}