import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { FarrisTabsComponent } from '../../../../projects/tabs/src/lib/';
import { TestTabsComponent } from './testtab/testtab.component';
import { Propertiy } from 'src/app/interface/propertiy-interface';
import { of, BehaviorSubject } from 'rxjs';

@Component({
    selector: 'tabs',
    templateUrl: './tabs.component.html'
})
export class TabsComponent implements OnInit, AfterViewInit {
    properties: Array<Propertiy> = [
        {
            name: 'searchBoxVisible',
            value: 'false || true,默认是true',
            type: '@Input()',
            description: 'tabs属性，下拉框中是否显示搜索框'
        },
        {
            name: 'titleLength',
            value: '数字，默认是7',
            type: '@Input()',
            description: 'tabs属性，标题长度超过多少隐藏，然后从后至前渐变显示'
        },
        {
            name: 'autoTitleWidth',
            value: 'false || true',
            type: '@Input()',
            description: 'tabs属性，标题是否自适应长度，不会出现隐藏或者……'
        },
        {
            name: 'width',
            value: '可不设 || 8 || 8px || 8rem || ...',
            type: '@Input()',
            description: 'tabs属性，组件宽度，默认不设'
        },
        {
            name: 'height',
            value: '可不设 || 8 || 8px || 8rem || ...',
            type: '@Input()',
            description: 'tabs属性，组件高度，默认不设'
        },
        {
            name: 'fill',
            value: '可不设 || true || false',
            type: '@Input()',
            description: 'tabs属性，组件标签页支持填充，默认false'
        },
        {
            name: 'value',
            value: '可不设 || aaa',
            type: '@Input()',
            description: 'tabs属性，组件初始化默认选中的标签页，默认为第一个标签页'
        },
        {
            name: 'contentFill',
            value: 'false || true',
            type: '@Input()',
            description: 'tabs属性，组件内容是否填充，默认是false'
        },
        {
            name: 'titleWidth',
            value: '数字 50',
            type: '@Input()',
            description: 'tabs属性，组件左侧标签页总宽度，默认是5/12,可调整，单位是百分比'
        },
        {
            name: 'btnStates',
            value: 'Observable',
            type: '@Input()',
            description: 'tabs属性，组件单个标签上工具条的按钮状态(disabled)，接受observable对象'
        },
        {
            name: 'btnVisible',
            value: 'Observable',
            type: '@Input()',
            description: 'tabs属性，组件单个标签上工具条的按钮状态(visible)，接受observable对象'
        },
        {
            name: 'tabChange',
            value: '{prevId: this.activeId, nextId: tab.id}',
            type: '@Output()',
            description: 'tabs属性，组件标签页切换事件，emit之前标签页id和当前标签页id'
        },
        {
            name: 'tabRemove',
            value: '{removeIndex: index,removeId:removeTab.id,activeId: this.activeId}',
            type: '@Output()',
            description: 'tabs属性，组件标签页删除事件，emit所删除标签索引、id和当前选中id'
        },
        {
            name: 'id',
            value: 'string字符串',
            type: '@Input()',
            description: 'tab属性，标签页id，用于标识'
        },
        {
            name: 'title',
            value: 'string字符串',
            type: '@Input()',
            description: 'tab属性，标签页标题'
        },
        {
            name: 'removeable',
            value: 'true||false',
            type: '@Input()',
            description: 'tab属性，是否可删除'
        },
        {
            name: 'disabled',
            value: 'true||false',
            type: '@Input()',
            description: 'tab属性，是否不可点击'
        },
        {
            name: 'toolbar',
            value: '{position: 位置, contents: [{id:id,disable:true,visible:true,title:标题,click:()=>{ },appearance:{"class":"btn tn-link mr-2"}}]}',
            type: '@Input()',
            description: 'tab属性，标签页工具条，是一个对象，真正起作用控制按钮的状态用上面的btnStates,btnVisible'
        },
        {
            name: 'farrisTabsExtend',
            value: '<ng-template farrisTabsExtend>扩展区域</ng-template>',
            type: '@ContentChild',
            description: 'tab属性，扩展区域模板'
        },
        {
            name: '#content',
            value: '<ng-template #content><div style="line-height: 60px;">有扩展区域，没有工具条</div></ng-template>',
            type: '@ContentChild',
            description: 'tab属性，内容区域模板'
        },
    ];
    codePath = {
        baseDemo: 'assets/codes/tabs/basedemo',
        absoluteDemo: 'assets/codes/tabs/absdemo',
        dropdownDemo: 'assets/codes/tabs/dropdemo',
        withExtendDemo: 'assets/codes/tabs/extenddemo',
        toolDemo: 'assets/codes/tabs/tooldemo',
        customDemo: 'assets/codes/tabs/customdemo',
        adendDemo: 'assets/codes/tabs/adenddemo',
        fillDemo: 'assets/codes/tabs/filldemo',
        autoWidthDemo: 'assets/codes/tabs/autodemo',
        posDemo: 'assets/codes/tabs/posdemo'
    };

    @ViewChild('tabs1') tabs1: FarrisTabsComponent;
    @ViewChild('withToolbarTab') withToolbarTab: FarrisTabsComponent;
    @ViewChild('basicTabs') basicTabs: FarrisTabsComponent;
    @ViewChild('testTab') testTab: TestTabsComponent;
    selectId = 'b';
    tab1Show = true;
    position = 'top';
    toolbarSan = {};
    toolbarFour = {
        position: 'inHead',
        contents: []
    }
    firstBtnStates = new BehaviorSubject({});
    firstBtnVisible = new BehaviorSubject({
        "addFirst": true,
        "deleteFirst": true,
        "updateFirst": true,
        "searchFirst": true,
        "daSearchFirst": true,
        "searchqqwFirst": true,
        "searchtextFirst": true,
        "searchtext2First": true
    });


    toolbarA = {
        position: 'inHead',
        contents: [
            {
                id: 'addFirst',
                // disabled: false,
                title: '新增',
                click: 'addRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: true
            },
            {
                id: 'deleteFirst',
                // disabled: false,
                title: '删除删除',
                click: 'deleteRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: true
            },
            {
                id: 'updateFirst',
                // disabled: false,
                title: '更新',
                click: 'updateRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: true
            },
            {
                id: 'searchFirst',
                // disabled: true,
                title: '查询',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            },
            {
                id: 'daSearchFirst',
                // disabled: true,
                title: 'da查询',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            },
            {
                id: 'searchqqwFirst',
                // disabled: true,
                title: '查qqw询',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            },
            {
                id: 'searchtextFirst',
                // disabled: true,
                title: '查询文字长度',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            },
            {
                id: 'searchtext2First',
                // disabled: true,
                title: '查询文字长度的超长文字验证',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            },
            {
                id: 'searchtext3First',
                // disabled: true,
                title: '查询按钮03',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            },
            {
                id: 'searchtext4First',
                // disabled: true,
                title: '查询按钮04',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            },
            {
                id: 'searchtext5First',
                // disabled: true,
                title: '查询按钮05',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            }
        ]
    };
    toolbarContent = {
        position: 'inContent',
        contents: [
            {
                id: 'addFirst',
                // disabled: false,
                title: '测试新增',
                click: function () {
                    console.log('点击测试新增按钮');
                },
                appearance: {
                    class: 'btn btn-link'
                },
                visible: true
            },
            {
                id: 'deleteFirst',
                // disabled: false,
                title: '删除删除',
                click: 'deleteRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: true
            },
            {
                id: 'updateFirst',
                // disabled: false,
                title: '更新',
                click: 'updateRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: true
            },
            {
                id: 'searchFirst',
                // disabled: true,
                title: '查询',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            },
            {
                id: 'daSearchFirst',
                // disabled: true,
                title: 'da查询',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            },
            {
                id: 'searchqqwFirst',
                // disabled: true,
                title: '查qqw询',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            },
            {
                id: 'searchtextFirst',
                // disabled: true,
                title: '查询文字长度',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            },
            {
                id: 'searchtext2First',
                // disabled: true,
                title: '查询文字长度的超长文字验证',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            },
            {
                id: 'searchtext3First',
                // disabled: true,
                title: '查询按钮03',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            },
            {
                id: 'searchtext4First',
                // disabled: true,
                title: '查询按钮04',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            },
            {
                id: 'searchtext5First',
                // disabled: true,
                title: '查询按钮05',
                click: 'selectRecord',
                appearance: {
                    class: 'btn btn-link'
                },
                visible: false
            }
        ]
    };
    toolbarB = {
        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
            }
        ]
    };
    toolbarC = {
        position: 'inHead',
        contents: [
            {
                id: 'a',
                disabled: false,
                title: '新增',
                click: 'addRecord',
                appearance: {
                    class: 'k-button k-flat mr-2'
                },
                visible: true
            }
        ]
    };
    // @ViewChild('tabs') tabs:
    pageTabs = [
        {
            id: 'a',
            disabled: false,
            title: '标签一',
            content: '标签一内容'
        },
        {
            id: 'b',
            disabled: false,
            title: '标签二',
        },
        {
            id: 'c',
            disabled: false,
            title: '标签三',
        },
        {
            id: 'd',
            disabled: false,
            title: '标签四',
            content: 'sadas'
        },
        {
            id: 'e',
            disabled: false,
            title: '标签五',
        }
    ];
    first_tab_title = '第一个标签页标题';
    // 是否启用pill样式
    tabType="";

    constructor(private testTabs: TestTabsComponent) {

    }
    ngOnInit() {
        // 处理这个toolbar上的按钮状态，避免输出warning
        let stateResults = {};
        [this.toolbarA.contents, this.toolbarContent.contents, this.toolbarB.contents, this.toolbarC.contents].forEach((item, index) => {
            item.forEach((btnInfo) => {
                if (!stateResults.hasOwnProperty(btnInfo.id)) {
                    stateResults[btnInfo.id] = false;
                }
            });

        });
        this.firstBtnStates.next(stateResults);
    }
    ngAfterViewInit() {
    }
    changePosition() {

    }
    // 切换tabType类型
    changeTabType(){
        
        if(!this.tabType){
            this.tabType="pills";
        }else{
            this.tabType="";
        }
    }

    changeFirstTabTitle() {
        this.first_tab_title = 'first-tab-title';
    }
    changeTabShow() {
        const numbers = Math.round(Math.random() * 10);
        switch (numbers) {
            case 1:
            case 2:
                this.selectId = 'c';
                break;
            case 3:
            case 4:
                this.selectId = 'd';
                break;
            case 5:
            case 6:
                this.selectId = 'e';
                break;
            case 8:
            case 7:
                this.selectId = 'f';
                break;
            case 9:
            case 10:
                this.selectId = 'g';
                break;
        }
    }
    addOneTab() {
        const str = 's' + Math.random();
        this.withToolbarTab.addTabs([{
            id: str,
            disabled: false,
            title: '标签' + str,
            content: '标签内容' + str,
            removeable: true,
            show: true
        }], this.withToolbarTab.tabs.length - 1, str);
    }
    setDisable(str: any, isDisabled: boolean) {
        if (this.withToolbarTab.toolbarConf) {
            this.withToolbarTab.toolbarConf.contents.forEach((item) => {
                if (item.id === str) {
                    item.disable = isDisabled;
                }
            });
        }
    }
    tabToolbarPos(farrisTab, pos) {
        if (pos && farrisTab.toolbarConf) {
            farrisTab.toolbarConf.position = pos;
        }
    }
    hideSecondTab() {
        this.withToolbarTab.hideTab('b');
    }
    showSecondTab() {
        this.withToolbarTab.showTab('b');
        this.withToolbarTab.showTab('c');
    }
    tabChange(e) {
        console.log(e);
    }
    tabRemove(e) {
        console.log(e);
    }
    addTabs(tabs) {

    }
    closeTab(tabs) {
        tabs.closeTab('d');
    }
    show() {
        this.tab1Show = !this.tab1Show;
    }
    toTop() {
        this.position = 'top';
    }
    toBottom() {
        this.position = 'bottom';
    }
    toLeft() {
        this.position = 'left';
    }
    toRight() {
        this.position = 'right';
    }
    changeTab() {
        this.testTab.tabs1.tabs = [];
        this.testTab.changeTab([
            {
                id: 'cc',
                disabled: false,
                title: '标签三三',
            },
            {
                id: 'dd',
                disabled: false,
                title: '标签四四',
                content: 'sadas'
            },
            {
                id: 'ee',
                disabled: false,
                title: '标签五五',
            }
        ]);
    }


    onBeforSelectTab = ($event) => {
        console.log('beforeSelect tab even:', $event);
        return of(true);
    }
}