import React from 'react';
import { Tabs, Layout } from 'antd';
import asyncComponent from '../../routers/AsyncComponent.js';
import ErrorBoundary from '../errorView/ErrorBoundary.jsx';
import './style/style.css';

const { TabPane } = Tabs;
const { Content } = Layout;

export default class Breadcrumbs extends React.Component {

    constructor() {
        super();
        this.state = {
            tabsData: [],
            activeKey: "主页",/**默认打开主页 */
            currentIndex: 0
        };
        this.openWindowBySubTab = this.openWindowBySubTab.bind(this);
        this.setCurrentActiveKey = this.setCurrentActiveKey.bind(this);
        this.deleteSubMenuTabData = this.deleteSubMenuTabData.bind(this);
        this.dynamicLoadComponent = this.dynamicLoadComponent.bind(this);
    }

    /*打开子窗口 - tab  */
	openWindowBySubTab = (tab) => {
		this.props.addSubMenuTabData(tab);
    }
    
    /**跳转指定标签页  */
    setCurrentActiveKey = (activeKey) => {
        this.props.gotoMeunTabByActiveKey(activeKey);
    }

    /**删除指定标签页 */
    deleteSubMenuTabData = (targetKey, activeKey) => {
        this.props.deleteSubMenuTabData(targetKey, activeKey);
    }

    /** 切换菜单，更改activeKey*/
    onChange = activeKey => {
        this.props.setActiveKey(activeKey);
    };

    onEdit = (targetKey, action) => {
        this[action](targetKey);
    };
    /**
     * 删除tab
     * 1，记录当前activeKey
     * 2，记录删除当前tab下标的前一页lastIndex
     * 3，调用父类deleteSubMenuTabData方法删除数据
     * 4，判断：tabs数组不为空 且 当前删除的tab页正处于激活状态 下
     *      再判断记录的lastIndex是否大于>0
     *          是：则直接显示tabs组数唯一一条数据
     *          否：显示自动切换到当前删除页的前一页
     * 5，不做任何处理了
     */
    remove = targetKey => {
        let { activeKey } = this.state;
        let lastIndex;
        this.props.tabs.forEach((tab, i) => {
            if (tab.title === targetKey) {
            lastIndex = i - 1;
            }
        });
        this.props.deleteSubMenuTabData(targetKey);
        if (this.props.tabs.length && activeKey === targetKey) {
            if (lastIndex >= 0) {
            activeKey = this.props.tabs[lastIndex].title;
            } else {
            activeKey = this.props.tabs[0].title;
            }
        }
        this.setState({ activeKey });
    };

    /**动态加载component */
    dynamicLoadComponent = (component, itemParas) => {
        if(component !== "" && typeof component === 'string') {
            return asyncComponent(() => import('../../' + component));
        } else if(typeof component === 'function' || typeof component === 'object') {
            // console.log(component)
            return component;
        }
    }

    render() {
        return (
            <div style={style}>
                <Tabs
                    hideAdd
                    onChange={this.onChange}
                    activeKey={this.props.activeKey}
                    type="editable-card"
                    onEdit={this.onEdit}
                    className="custom-breadcrumb"
                >
                    {this.props.tabs && this.props.tabs.map((item, index) => {
                        const DynamicComponent = this.dynamicLoadComponent(item.component, item.Paras);
                        item['component'] = DynamicComponent;
                        item&&item.component ? item.component['Paras'] = item.Paras : "";
                        let s= document.body.clientHeight;
                        let header = 48 + 40 + 10;
                        let height = s - header;
                        return (
                            <TabPane 
                                tab={item.title} key={item.title} 
                                closable={index == 0 ? false : true}
                            >
                                <Content style={{ padding: '0 10px 10px 10px', width: '100%', height: '100%', overflow: 'hidden' }}>
                                    <div style={{ background: '#fff', height: height, overflowY: 'auto', position: 'relative', width: '100%'}}>
                                    {
                                        DynamicComponent === undefined 
                                        ? '' : 
                                        <ErrorBoundary>
                                            <DynamicComponent 
                                                setCurrentActiveKey={this.setCurrentActiveKey} 
                                                openWindowBySubTab={this.openWindowBySubTab} 
                                                paras={item.Paras} 
                                                deleteSubMenuTabData={this.deleteSubMenuTabData}
                                            />
                                        </ErrorBoundary>
                                    }
                                    </div>
                                </Content>
                            </TabPane>
                        )
                    })}
                </Tabs>
            </div>
        )
    }
};
let style = {
    width: '100%',
    lineHeight: '40px',
    background: '#f0f2f5',
    // height: '40px',
	// background: '#fff',
    // marginBottom: '10px',
}
