import { Component, OnInit } from '@angular/core';
import { Propertiy } from 'src/app/interface/propertiy-interface';

@Component({
    selector: 'app-section',
    templateUrl: './section.component.html',
    styleUrls: ['./section.component.scss']
})
export class SectionComponent implements OnInit {
    toolbarA = {
        position: 'inHead',
        contents: [
            {
                id: 'a',
                // disabled: false,
                title: '新增',
                click: 'addRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: true
            },
            {
                id: 'b',
                // disabled: false,
                title: '删除',
                click: 'deleteRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: true
            },
            {
                id: 'c',
                // disabled: false,
                title: '更新',
                click: 'updateRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: true
            },
            {
                id: 'd',
                // disabled: true,
                title: '查询',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            }
        ]
      };
      toolbarB = {
        position: 'inHead',
        contents: [
            {
                id: 'a002',
                // disabled: false,
                title: '新增',
                click: 'addRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: true
            },
            {
                id: 'b002',
                // disabled: false,
                title: '删除',
                click: 'deleteRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: true
            },
            {
                id: 'c002',
                // disabled: false,
                title: '更新',
                click: 'updateRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: true
            },
            {
                id: 'd002',
                // disabled: true,
                title: '查询',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            }
        ]
      };
    properties: Array<Propertiy> = [
        {
            name: 'ngResizable',
            value: 'ngResizable || [ngResizable]=true',
            type: '指令',
            description: 'splitter启用resizable功能'
        },
        {
            name: 'rzHandles',
            value: 'n||s||e||w||ne||nw||se||sw',
            type: '@Input()',
            description: 'ngResizable的拖拽方向'
        },
        {
            name: 'rzMinWidth',
            value: 'number',
            type: '@Input()',
            description: 'ngResizable的拖拽最小宽度'
        },
        {
            name: 'rzMinHeight',
            value: 'number',
            type: '@Input()',
            description: 'ngResizable的拖拽最小高度'
        },
        {
            name: 'rzMaxWidth',
            value: 'number',
            type: '@Input()',
            description: 'ngResizable的拖拽最大宽度'
        },
        {
            name: 'rzMaxHeight',
            value: 'number',
            type: '@Input()',
            description: 'ngResizable的拖拽最大高度'
        },
        {
            name: 'rzStart',
            value: 'EventEmitter<IResizeEvent>',
            type: '@Output()',
            description: 'ngResizable开始拖拽时触发'
        },
        {
            name: 'rzResizing',
            value: 'EventEmitter<IResizeEvent>',
            type: '@Output()',
            description: 'ngResizable的拖拽中'
        },
        {
            name: 'rzStop',
            value: 'EventEmitter<IResizeEvent>',
            type: '@Output()',
            description: 'ngResizable的拖拽结束时触发'
        }
    ]

    codePath = {
        baseDemo: 'assets/codes/splitter/basedemo',
        moduleDemo: 'assets/codes/splitter/moduledemo'
    };
    /**
     * 控制splitter-pane组件的
     */
    // 是否启用収折
    enableCollapse=true;
    // 拖拽到某个值时，自动收起的阈值
    resizeCollapseThreshold=20;
    // 初始是否収折
    collapsed=true;
    // 设置展开时距离
    expandDistance='';

    constructor() { }

    ngOnInit() {
    }

    movingOffset(e) {
        console.log(e);
    }
    /**
     * 収折状态
     * @param ev 
     */
    collapseStateChangeHandler(ev){
        if(ev){
            console.log('处于收起状态');
        }else{
            console.log('处于展开状态');
        }
    }
    /**
     * 拖拽停止事件
     */
    rzStopHandler(ev){
        
    }
}