import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { Propertiy } from 'src/app/interface/propertiy-interface';
import { BsModalService, BsModalRef } from '@farris/ui-modal';
import { DynamicGridComponent } from './dynamic-grid/dynamic-grid.component';
@Component({
    selector: 'farris-doc-button',
    templateUrl: './button.component.html',
    styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements OnInit {
    buttonProperties: Array<Propertiy> = [
        {
            name: 'type',
            value: "'primary'|'warning'|'danger'|'success'|'link'|'secondary'",
            type: '@Input()',
            description: '设置按钮类型，可选值为怕primary/warning/danger等几个类型，默认值为primary'
        },
        {
            name: 'disabled',
            value: 'boolean',
            type: '@Input()',
            description: '设置禁用，默认值为false'
        },
        {
            name: 'size',
            value: '"small"|"large"',
            type: '@Input()',
            description: '设置尺寸，默认值为small'
        }
    ];
    buttonGroupProperties: Array<Propertiy> = [
        {
            name: 'data',
            value: "Array<{ text: string; id: string}>",
            type: '@Input()',
            description: '设置按钮组的数据，默认值为[]'
        },
        {
            name: 'type',
            value: "'primary'|'warning'|'danger'|'success'|'link'|'secondary'",
            type: '@Input()',
            description: '设置按钮类型，可选值为怕primary/warning/danger等几个类型，默认值为primary'
        },
        {
            name: 'count',
            value: "number",
            type: '@Input()',
            description: '设置可见按钮数量，默认值为2'
        },
        {
            name: 'placement',
            value: "top|top-left|top-right|left|left-top|left-bottom|bottom|bottom-left|bottom-right|right|right-top|right-bottom",
            type: '@Input()',
            description: '设置下拉框的初始方向，默认值为bottom'
        },
        {
            name: 'changeState',
            value: "EventEmitter<boolean>",
            type: '@Output()',
            description: '下拉框展开或者收起的回调，参数是下拉框是否展开'
        },
        {
            name: 'change',
            value: "EventEmitter<string>",
            type: '@Output()',
            description: '触发按钮的回调，参数是触发按钮的id'
        },
        {
            name: 'clickMenuOut',
            value: "EventEmitter<>",
            type: '@Output()',
            description: '点击下拉框之外的回调'
        }
    ];

    dropdownplacements = [{
        "placement": 'bottom',
        "text": '朝下'
    },
    {
        "placement": 'bottom-left',
        "text": '朝下(朝左)'
    },
    {
        "placement": 'top',
        "text": '朝上'
    },
    {
        "placement": 'top-right',
        "text": '朝上(朝右)'
    },
    {
        "placement": 'top-left',
        "text": '朝上(朝左)'
    },
    {
        "placement": 'left',
        "text": '横向-朝左'
    },
    {
        "placement": 'left-bottom',
        "text": '横向-朝左(朝下)'
    },
    {
        "placement": 'left-top',
        "text": '横向-朝左(朝上)'
    }, {
        "placement": 'right',
        "text": '横向-朝右'
    }, {
        "placement": 'right-bottom',
        "text": '横向-朝右(朝下)'
    }, {
        "placement": 'right-top',
        "text": '横向-朝右(朝上)'
    }
    ];
    curPlacement = this.dropdownplacements[0]['placement'];
    group1Collapse = false;
    data = [
        {
            id: 'b1',
            text: '增加',
            type: 'primary'
        },
        {
            id: 'b2',
            text: '删除',
            type: 'warning'
        },
        {
            id: 'b3',
            text: '保存',
            type: 'success'
        },
        {
            id: 'b4',
            text: '编辑',
            type: 'danger'
        }
    ];
    data1 = [
        {
            id: 'b1',
            text: '增加',
            type: 'link'
        },
        {
            id: 'b2',
            text: '删除',
            type: 'link',
            disabled: true
        },
        {
            id: 'b3',
            text: '保存',
            type: 'link'
        },
        {
            id: 'b4',
            text: '编辑',
            type: 'link',
            disabled: true
        }
    ];
    data2 = [
        {
            id: 'iconbtn1',
            text: '增加',
            icon: 'f-icon-add'
        },
        {
            id: 'iconbtn2',
            text: '编辑',
            icon: 'f-icon-edit',
            disabled: true
        },
        {
            id: 'iconbtn2',
            text: '拷贝',
            icon: 'f-icon-yxs_copy',

        },
        {
            id: 'iconbtn3',
            text: '保存',
            icon: 'f-icon-save'
        },
        {
            id: 'iconbtn4',
            text: '删除',
            icon: 'f-icon-delete',
            disabled: true
        }
    ];
    dlg: BsModalRef;
    constructor(private modalService: BsModalService) {

    }
    showDialog(){

       this.dlg= this.modalService.show(DynamicGridComponent,{
            title:'验证弹出窗口按钮点击',
            width:500,
            height:400
        });

    }
    ngOnInit() {

    }
    changeEvent(value: any) {
        console.log(value);
    }
    change(e: any) {
        console.log('change事件' + e);
    }

    clickEvent(e: any) {
        console.log('click事件' + e.id);
    }
    divClick() {
        console.log('冒泡父元素');
    }
    touchPrimary(e) {
        console.log('object');
    }
    touchDanger(e) {
        console.log('object');
        this.data1.push({
            id: 'b5',
            text: '编辑1',
            type: 'link'
        });
    }
    changeSelectValue(index) {
        this.curPlacement = this.dropdownplacements[index]['placement'];
    }

}