import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Propertiy } from 'src/app/interface/propertiy-interface';
import { Others } from 'src/app/interface/ohters-interface';
import { AttentionService } from '@farris/ui-tooltip';
@Component({
    selector: 'app-response-toolbar-demo',
    templateUrl: './response-toolbar-demo.component.html'
})
export class ResponseToolbarDemoComponent implements OnInit {

    // 按钮可见状态
    btnVisible = new BehaviorSubject({});
    // 按钮禁用状态
    btnDisable = new BehaviorSubject({});

    properties: Array<Propertiy> = [
        {
            name: 'datas',
            value: 'Array<ResponseToolbarItem|ResponseToolbarDropDown>',
            type: '@Input()',
            description: '按钮数据'
        },
        {
            name: 'btnState',
            value: 'Observable<Array<any>>',
            type: '@Input()',
            description: '用于变更按钮的禁用状态'
        },
        {
            name: 'btnVisible',
            value: 'Observable<Array<any>>',
            type: '@Input()',
            description: '用于变更按钮的可见状态'
        }
    ];
    clickEvents: Array<Others> = [
        {
            name: 'ResponseToolbarClickEvent',
            description:
                '参数类型 ResponseToolbarClickEvent，点击按钮时抛出事件，单纯点击下拉按钮是不会抛出事件的'
        }
    ];
    modelProperties01: Array<Propertiy> = [
        {
            name: 'id',
            value: 'string',
            type: '',
            description: '按钮 ID'
        },
        {
            name: 'text',
            value: 'string',
            type: '',
            description: '按钮文字'
        },
        {
            name: 'class',
            value: 'string',
            type: '',
            description: '追加的样式'
        },
        {
            name: 'disabled',
            value: 'boolean',
            type: '',
            description: '是否禁用'
        },
        {
            name: 'hidden',
            value: 'string',
            type: '',
            description: '是否隐藏'
        }
    ];
    modelProperties02: Array<Propertiy> = [
        {
            name: 'id',
            value: 'string',
            type: '',
            description: '按钮 ID'
        },
        {
            name: 'text',
            value: 'string',
            type: '',
            description: '按钮文字'
        },
        {
            name: 'class',
            value: 'string',
            type: '',
            description: '追加的样式'
        },
        {
            name: 'disabled',
            value: 'boolean',
            type: '',
            description: '是否禁用'
        },
        {
            name: 'hidden',
            value: 'string',
            type: '',
            description: '是否隐藏'
        },
        {
            name: 'isDP',
            value: 'boolean',
            type: '',
            description: '是否是下拉按钮'
        },
        {
            name: 'children',
            value: 'array',
            type: '',
            description:
                '类型是 ResponseToolbarItem 或 ResponseToolbarDropDown 下拉按钮的子按钮，可以是普通按钮也可以是下拉按钮'
        }
    ];
    modelProperties03: Array<Propertiy> = [
        {
            name: 'id',
            value: 'string',
            type: '',
            description: '按钮 ID'
        },
        {
            name: 'text',
            value: 'string',
            type: '',
            description: '按钮文字'
        },
        {
            name: 'hidden',
            value: 'string',
            type: '',
            description: '是否隐藏'
        }
    ];


    highLightID = "toolbar-001";
    toolbarDataPage = [
        {
            id: 'toolbarpage01',
            text: '新增',
            class: 'btn-primary',
            disabled: false
        },
        {
            id: 'toolbarpage02',
            text: '删除',
            disabled: true
        },
        {
            id: 'toolbarpage03',
            text: '查看',
            disabled: true
        }
    ]
    data2 = [
        {
            id: 'toolbar-0010',
            text: '第一个',
            class: 'btn-primary',
            disabled: false,
            icon:'f-icon-add'
        },
        {
            id: 'toolbar-0011',
            text: '空图标',
            class: 'btn-primary',
            disabled: false,
            icon:'  '
        },
        {
            id: 'toolbar-001',
            text: '第一个',
            class: 'btn-primary',
            disabled: false,
            tipsEnable: true,
            tipsText: '测试文字',
            icon:'f-icon-add'
        },
        {
            id: 'toolbar-002',
            text: '第二个禁用',
            disabled: true,
            tipsEnable: true,
            tipsText: '<span class="text-danger">注意:</span>选择文件后提交审批'
        },
        {
            id: 'toolbar-115',
            text: '朝上',
            class: 'btn-warning',
            dropdownCls: 'bg-success',
            split: true,
            isDP: true,
            placement: 'top',
            icon:'f-icon-add',
            children: [
                {
                    id: 'toolbar-116',
                    text: '第二层标签一',
                    tipsEnable: true,
                    icon:'f-icon-add',
                    tipsText: '<span class="text-danger">注意:</span><p>测试分行</p>'
                },
                {
                    id: 'toolbar-117',
                    text: '第二层标签二'
                },
                {
                    id: 'toolbar-118',
                    text: '第三层[禁|分]',
                    class: 'btn-danger',
                    dropdownCls: 'bg-info',
                    split: true,
                    isDP: true,
                    disabled: true,
                    placement: 'top',
                    children: [
                        {
                            id: 'toolbar-113',
                            text: '第三层标签一'
                        }
                    ]
                }
            ]
        },
        {
            id: 'toolbar-115-join01',
            text: '朝上',
            class: 'btn-warning',
            dropdownCls: 'bg-success',
            split: false,
            isDP: true,
            icon:'f-icon-add',
            placement: 'top',
            children: [
                {
                    id: 'toolbar-116-join01',
                    text: '第二层标签一',
                    tipsEnable: false,
                    tipsText: '<span class="text-danger">注意:</span><p>测试分行</p>'
                },
                {
                    id: 'toolbar-117-join01',
                    text: '第二层标签二'
                },
                {
                    id: 'toolbar-118-join01',
                    text: '第三层',
                    class: 'btn-danger',
                    dropdownCls: 'bg-info',
                    split: false,
                    isDP: true,
                    placement: 'top',
                    children: [
                        {
                            id: 'toolbar-113-join01',
                            text: '第三层标签一'
                        }
                    ]
                }
            ]
        },
        {
            id: 'toolbar-115-01',
            text: '朝下-未设置[分]',
            class: 'btn-warning',
            dropdownCls: 'bg-success',
            split: true,
            isDP: true,
            children: [
                {
                    id: 'toolbar-116-01',
                    text: '第二层标签一'
                },
                {
                    id: 'toolbar-117-01',
                    text: '第二层标签二'
                },
                {
                    id: 'toolbar-118-01',
                    text: '第三层[分]',
                    class: 'btn-danger',
                    dropdownCls: 'bg-info',
                    split: true,
                    isDP: true,
                    placement: 'bottom',
                    children: [
                        {
                            id: 'toolbar-113-01',
                            text: '第三层标签一'
                        }
                    ]
                }
            ]
        },
        {
            id: 'toolbar-115-01-join02',
            text: '朝下',
            class: 'btn-warning',
            dropdownCls: 'bg-success',
            split: false,
            isDP: true,
            placement: 'bottom',
            children: [
                {
                    id: 'toolbar-116-01-join02',
                    text: '第二层标签一'
                },
                {
                    id: 'toolbar-117-01-join02',
                    text: '第二层标签二'
                },
                {
                    id: 'toolbar-118-01-join02',
                    text: '第三层',
                    class: 'btn-danger',
                    dropdownCls: 'bg-info',
                    split: false,
                    isDP: true,
                    placement: 'bottom',
                    children: [
                        {
                            id: 'toolbar-113-01-join02',
                            text: '第三层标签一'
                        }
                    ]
                }
            ]
        },
        {
            id: 'toolbar-115-02',
            text: '朝右[分]',
            class: 'btn-warning',
            dropdownCls: 'bg-success',
            split: true,
            isDP: true,
            placement: 'right',
            children: [
                {
                    id: 'toolbar-116-02',
                    text: '第二层标签一'
                },
                {
                    id: 'toolbar-117-02',
                    text: '第二层标签二'
                },
                {
                    id: 'toolbar-118-02',
                    text: '第三层',
                    class: 'btn-danger',
                    dropdownCls: 'bg-info',
                    split: true,
                    isDP: true, placement: 'right',
                    children: [
                        {
                            id: 'toolbar-113-02',
                            text: '第三层标签一'
                        }
                    ]
                }
            ]
        },
        {
            id: 'toolbar-115-02-join03',
            text: '朝右',
            class: 'btn-warning',
            dropdownCls: 'bg-success',
            split: false,
            isDP: true,
            placement: 'right',
            children: [
                {
                    id: 'toolbar-116-02-join03',
                    text: '第二层标签一'
                },
                {
                    id: 'toolbar-117-02-join03',
                    text: '第二层标签二'
                },
                {
                    id: 'toolbar-118-02-join03',
                    text: '第三层',
                    class: 'btn-danger',
                    dropdownCls: 'bg-info',
                    split: false,
                    isDP: true, placement: 'right',
                    children: [
                        {
                            id: 'toolbar-113-02-join03',
                            text: '第三层标签一'
                        }
                    ]
                }
            ]
        },
        {
            id: 'toolbar-115-03',
            text: '朝左',
            class: 'btn-warning',
            dropdownCls: 'bg-success',
            split: true,
            isDP: true,
            placement: 'left',
            children: [
                {
                    id: 'toolbar-116-03',
                    text: '第二层标签一'
                },
                {
                    id: 'toolbar-117-03',
                    text: '第二层标签二'
                },
                {
                    id: 'toolbar-118-03',
                    text: '第三层',
                    class: 'btn-danger',
                    dropdownCls: 'bg-info',
                    placement: 'left',
                    split: true,
                    isDP: true,
                    children: [
                        {
                            id: 'toolbar-113-03',
                            text: '第三层标签一'
                        }
                    ]
                }
            ]
        },
        {
            id: 'toolbar-115-03-join04',
            text: '朝左',
            class: 'btn-warning',
            dropdownCls: 'bg-success',
            split: false,
            isDP: true,
            placement: 'left',
            children: [
                {
                    id: 'toolbar-116-03-join04',
                    text: '第二层标签一'
                },
                {
                    id: 'toolbar-117-03-join04',
                    text: '第二层标签二'
                },
                {
                    id: 'toolbar-118-03-join04',
                    text: '第三层',
                    class: 'btn-danger',
                    dropdownCls: 'bg-info',
                    placement: 'left',
                    split: false,
                    isDP: true,
                    children: [
                        {
                            id: 'toolbar-113-03-join04',
                            text: '第三层标签一'
                        }
                    ]
                }
            ]
        },
        {
            id: 'toolbar-004',
            text: '测试四'
        },
        {
            id: 'toolbar-005',
            text: '测试五'
        },
        {
            id: 'toolbar-215',
            text: '第六——下拉菜单',
            disabled: false,
            placement: 'bottom',
            isDP: true,
            children: [
                {
                    id: 'toolbar-216',
                    text: '第二层标签一'
                },
                {
                    id: 'toolbar-217',
                    text: '第二层标签二'
                },
                {
                    id: 'toolbar-218',
                    text: '第三层',
                    placement: 'right',
                    isDP: true,
                    children: [
                        {
                            id: 'toolbar-213',
                            text: '第二层标签一'
                        }
                    ]
                }
            ]
        },
        {
            id: 'toolbar-006',
            text: '测试七'
        },
        {
            id: 'toolbar-007',
            text: '测试八'
        },

        {
            id: 'toolbar-012',
            text: '测试十四',
            split: true,
            isDP: true,
            children: [
                {
                    id: 'toolbar-413',
                    text: '第一层标签一'
                },
                {
                    id: 'toolbar-414',
                    text: '第一层标签二'
                },
                {
                    id: 'toolbar-415',
                    text: '第二层',
                    isDP: true,
                    split: true,
                    children: [
                        {
                            id: 'toolbar-516',
                            text: '第二层标签一',
                            disabled: true
                        },
                        {
                            id: 'toolbar-517',
                            text: '第二层标签二'
                        },
                        {
                            id: 'toolbar-518',
                            text: '第三层',
                            isDP: true,
                            children: [
                                {
                                    id: 'toolbar-613',
                                    text: '第二层标签一'
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            id: 'toolbar-008',
            text: '测试九-按钮'
        },
        {
            id: 'toolbar-009',
            text: '测试十-文字按钮'
        },
        {
            id: 'toolbar-010',
            text: '测试十一'
        },
        {
            id: 'toolbar-011',
            text: '测试十二'
        },
        {
            id: 'toolbar-0129',
            text: '测试十三按钮'
        }
    ];
    data = [
        {
            id: 'toolbar-2-001',
            text: '新增',
            class: 'btn-primary',
            disabled: false
        },
        {
            id: 'toolbar-2-002',
            text: '禁用',
            disabled: true
        },
        {
            id: 'toolbar-2-003',
            text: '新增',
            class: 'btn-primary',
            disabled: false
        },
        {
            id: 'toolbar-2-004',
            text: '禁用',
            disabled: true
        },
        {
            id: 'toolbar-2-115',
            text: '第二层',
            class: 'btn-warning',
            dropdownCls: 'bg-success',
            isDP: true,
            placement: 'top',
            children: [
                {
                    id: 'toolbar-2-116',
                    text: '第二层标签一测试测试测试文字长短'
                },
                {
                    id: 'toolbar-2-117',
                    text: '第二层标签二'
                },
                {
                    id: 'toolbar-2-118',
                    text: '第三层',
                    class: 'btn-danger',
                    dropdownCls: 'bg-info',
                    isDP: true,
                    children: [
                        {
                            id: 'toolbar-2-113',
                            text: '第二层标签一'
                        }
                    ]
                }
            ]
        }
    ];
    data3 = [
        {
            id: 'd3toolbar-001',
            text: '新增',
            class: 'btn-primary',
            disabled: false
        },
        {
            id: 'd3toolbar-002',
            text: '编辑',
            class: '',
            disabled: false
        },
        {
            id: 'd3toolbar-003',
            text: '保存',
            class: '',
            disabled: false
        },
        {
            id: 'd3toolbar-004',
            text: '取消',
            class: '',
            disabled: false
        },
        {
            id: 'd3toolbar-005',
            text: '删除',
            class: '',
            disabled: false
        },
        {
            id: 'd3toolbar-006',
            text: '关闭',
            class: '',
            disabled: false
        },
        {
            id: 'd3toolbar-007',
            text: '新增按钮_下级向下',
            class: '',
            disabled: false
        },
        {
            id: 'd3toolbar-008',
            text: '新增按钮_下级向右',
            class: '',
            disabled: false
        },
        {
            id: 'd3toolbar-009',
            text: '新增按钮_下级向左',
            class: '',
            disabled: false
        },
        {
            id: 'd3toolbar-115',
            text: '第三个——下拉',
            class: 'btn-warning',
            dropdownCls: 'bg-success',
            isDP: true,
            isSplit: true,
            placement: 'top',
            children: [
                {
                    id: 'd3toolbar-116',
                    text: '第二层标签一测试测试测试文字长短'
                },
                {
                    id: 'd3toolbar-117',
                    text: '第二层标签二'
                },
                {
                    id: 'd3toolbar-118',
                    text: '第三层',
                    class: 'btn-danger',
                    dropdownCls: 'bg-info',
                    isSplit: true,
                    isDP: true,
                    children: [
                        {
                            id: 'd3toolbar-113',
                            text: '第二层标签一'
                        }
                    ]
                }
            ]
        },
        {
            id: 'd3toolbar-010',
            text: '新增按钮_1702',
            class: '',
            disabled: false
        },
        {
            id: 'd3toolbar-012',
            text: '测试十四',
            isDP: true,
            split: true,
            children: [
                {
                    id: 'd3toolbar-413',
                    text: '第一层标签一'
                },
                {
                    id: 'd3toolbar-414',
                    text: '第一层标签二'
                },
                {
                    id: 'd3toolbar-415',
                    text: '第二层',
                    isDP: true, split: true,
                    children: [
                        {
                            id: 'd3toolbar-516',
                            text: '第二层标签一',
                            disabled: true
                        },
                        {
                            id: 'd3toolbar-517',
                            text: '第二层标签二'
                        },
                        {
                            id: 'd3toolbar-518',
                            text: '第三层',
                            isDP: true,
                            split: true,
                            children: [
                                {
                                    id: 'd3toolbar-613',
                                    text: '第二层标签一'
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            id: 'd3toolbar-011',
            text: '新增按钮_5124',
            class: '',
            disabled: false
        }
    ];
    constructor(private attentionSer: AttentionService) { }

    ngOnInit() {
        this.btnVisible.next({
            'toolbar-001': false,
            'toolbar-002': false,
            'toolbar-115': false,
            'toolbar-005': false,
            'toolbar-006': false,
            'toolbar-007': false,
            'toolbar-008': false,
            'toolbar-009': false
        });


    }
    highLightBtn() {
        let ids = this.highLightID.split(",");
        let attEls = [];
        for (let k = 0; k < ids.length; k++) {
            attEls.push({
                idOrEl: ids[k]
            });
        }
        this.attentionSer.catchAttention(attEls);
    }
    highLightBtn2() {
        let attEls = [];
        attEls.push({
            idOrEl: document.getElementById('toolbar-001')
        },
            {
                idOrEl: document.getElementById('toolbar-002')
            },
        );

        this.attentionSer.catchAttention(attEls);
    }

    /**
     * 验证按钮的禁用状态变化
     */
    modifyDisableState() {
        this.btnDisable.next({
            'toolbar-001': true,
            'toolbar-002': false,
            'toolbar-115': true
        });
    }
    /**
     * 验证按钮的是否显示
     */
    modifyVisableState() {
        this.btnVisible.next({
            'toolbar-001': true,
            'toolbar-002': true,
            'toolbar-115': true,
            'toolbar-005': true,
            'toolbar-006': true,
            'toolbar-007': true,
            'toolbar-008': true,
            'toolbar-009': true
        });
    }

    responseToolbarClick(ev) {
        console.log('恭喜您选中了ID' + ev['id'] + '文字内容为' + ev['text']);
    }
    changeDirectionHandler(ev) {
        console.log(ev);
    }
    navStateChange(ev) {
        console.log(ev);
    }
}