import { MouseEvent } from './../../../../projects/modal/utils/src/facade/browser';
import { Component, OnInit } from '@angular/core';
import { Propertiy } from 'src/app/interface/propertiy-interface';
@Component({
    selector: 'checkbox-demo',
    templateUrl: './panel-demo.component.html'
})
export class PanelDemoComponent implements OnInit {
    inputVal = '第一个分组';
    inputCollapse = '收起';
    inputExpand = '展开';
    panelProperties: Array<Propertiy> = [
        {
            name: 'model',
            value: "Array<string>",
            type: '@Input()',
            description: '展开的panel value集合，默认[]'
        },
        {
            name: 'width',
            value: "number",
            type: '@Input()',
            description: '宽度'
        },
        {
            name: 'height',
            value: "number",
            type: '@Input()',
            description: '高度'
        },
        {
            name: 'foldable',
            value: "boolean",
            type: '@Input()',
            description: '设置是否可收折，默认为true'
        },
        {
            name: 'defaultExpand',
            value: 'boolean',
            type: '@Input()',
            description: '初始化是否全部展开，默认false'
        },
        {
            name: 'accordion',
            value: 'boolean',
            type: '@Input()',
            description: '手风琴模式，每次最多展开一个panel,默认为false'
        },
        {
            name: 'modelChange',
            value: 'EventEmitter<string[]>',
            type: '@Output()',
            description: '收折panel的回调，参数是已展开的panel集合'
        }
    ];
    panelItemProperties: Array<Propertiy> = [
        {
            name: 'value',
            value: "string",
            type: '@Input()',
            description: 'panel-item的标识,如果没有，会自动生成'
        },
        {
            name: 'title',
            value: "string|templateRef",
            type: '@Input()',
            description: '标题'
        },
        {
            name: 'width',
            value: 'number',
            type: '@Input()',
            description: '宽度'
        },
        {
            name: 'height',
            value: 'number',
            type: '@Input()',
            description: '高度'
        },
        {
            name: 'disable',
            value: 'boolean',
            type: '@Input()',
            description: '设置禁用，默认false'
        }
    ];
    binding = ['bb'];
    binding1 = ['bb'];
    data = [];
    constructor() {
        this.data = this.getItemsData([
            {
                id: 'toolbar-001',
                text: '新增',
                class: 'btn-primary',
                disabled: false
            },
            {
                id: 'toolbar-002',
                text: '禁用',
                disabled: true
            },
            {
                id: 'toolbar-115',
                text: '第二层',
                class: 'btn-warning',
                dropdownCls: 'bg-success',
                isDP: true,
                placement: 'top',
                children: [
                    {
                        id: 'toolbar-116',
                        text: '第二层标签一测试测试测试文字长短'
                    },
                    {
                        id: 'toolbar-117',
                        text: '第二层标签二'
                    },
                    {
                        id: 'toolbar-118',
                        text: '第三层',
                        class: 'btn-danger',
                        dropdownCls: 'bg-info',
                        isDP: true,
                        children: [
                            {
                                id: 'toolbar-113',
                                text: '第二层标签一'
                            }
                        ]
                    }
                ]
            }
        ]);
    }

    ngOnInit(): void { }
    getItemsData(data) {
        let tData = [];
        if (data) {
            tData = [].concat(data);
        } else {
            tData.push({
                id: 'toolbar-013',
                text: '测试十三'
            });
        }

        return tData;
    }
    responseToolbarClick(ev) {
        console.log(ev);
        console.log('恭喜您选中了ID' + ev['id'] + '文字内容为' + ev['text']);
    }
    clickEvent(e: MouseEvent) {
        // 阻止冒泡
        e.stopPropagation();
    }
}