import React from 'react'
import { Layout, Tabs, Dropdown, Menu } from 'antd'
import { connect } from 'dva'
import MenuLayout from './sider'
import DashboardViewToolbar from './toolbar'
import DashboardView from './view'
import EmptyContent from '../common/emptyContent/index'
import CusIcon from '../common/cusIcon/index'
import './index.less'
const { Sider, Content } = Layout
const TabPane = Tabs.TabPane

class Home extends React.Component {

    componentDidMount() {
        const { home, dispatch } = this.props;
        dispatch({ type: 'home/getFixedDashboard' }).then(data => {
            if(data && home.tabs.length === 0) {
                dispatch({ type: 'home/openTab', tab: data })
            }
        });
    }

    // componentWillUnmount() {
    //     const { home, dispatch } = this.props;
    //     const { tabs } = home;
    //     // 离开页面后将报表中的图表配置移除，以保证下次进入时触发自动刷新
    //     tabs.forEach(t => {
    //         t.config = null;
    //     });
    //     dispatch({ type: 'home/setField', name: 'tabs', value: tabs });
    // }

    generateTabs() {
        const { home } = this.props;
        const { tabs, fixedDashboard } = home;

        return tabs.map(t => (
            <TabPane tab={this.generateTabTitle(t.name, t.code)} key={t.code} closable={!fixedDashboard || t.code !== fixedDashboard.code}>
            {/* <TabPane tab={<span><CusIcon type='bi-nav-dashboard'/>{t.name}</span>} key={t.code}> */}
                <DashboardViewToolbar />
                <DashboardView code={t.code} config={t.config}/>
            </TabPane>
        ));
    }

    generateTabTitle = (text, tabKey) => (
        <Dropdown overlay={this.generateMenu(tabKey)} trigger={["contextMenu"]}>
            <span style={{ userSelect: "none" }}><CusIcon type='bi-nav-dashboard'/>{text}</span>
        </Dropdown>
    )

    generateMenu = (tabKey) => {
        const { fixedDashboard } = this.props.home
        return <Menu>
            <Menu.Item disabled={fixedDashboard && tabKey === fixedDashboard.code} key="1" onClick={e => {
                // 点击菜单项后触发tab的切换事件，这里将其事件阻断
                e.domEvent.stopPropagation();
                this.remove(tabKey);
            }}>关闭当前</Menu.Item>
            <Menu.Item key="2"onClick={e => {
                // 点击菜单项后触发tab的切换事件，这里将其事件阻断
                e.domEvent.stopPropagation();
                this.removeOther(tabKey);
            }}>关闭其他</Menu.Item>
            <Menu.Item key="3" onClick={e => {
                // 点击菜单项后触发tab的切换事件，这里将其事件阻断
                e.domEvent.stopPropagation();
                this.removeAll();
            }}>关闭所有</Menu.Item>
        </Menu>
    }

    onChange = (activeKey) => {
        const { dispatch, home } = this.props;
        const { selectedTab, tabs } = home;
        let tab = tabs.find(t => t.code === activeKey);
        dispatch({ type: 'home/saveCurrentTabDashboardConfig', code: selectedTab.code });
        dispatch({ type: 'home/changeTab', tab });
    }

    onEdit = (targetKey, action) => {
        this[action](targetKey);
    }

    remove = (targetKey) => {
        const { dispatch, home } =  this.props;
        const { tabs: allTabs } = home;
        let tab = allTabs.find(t => t.code === targetKey);
        dispatch({ type: 'home/closeTab', tab });
    }

    removeOther = (targetKey) => {
        const { dispatch, home } =  this.props;
        const { tabs: allTabs, fixedDashboard } = home;
        let tabs = allTabs.filter(t => (t.code !== targetKey && (!fixedDashboard || t.code !== fixedDashboard.code) ));
        let tab = allTabs.find(t => t.code === targetKey);
        dispatch({ type: 'home/closeTabs', tabs });
        dispatch({ type: 'home/changeTab', tab });
    }

    removeAll = () => {
        const { dispatch } =  this.props;
        dispatch({ type: 'home/closeAllTabs' });
    }

    render() {
        const { home } = this.props;
        const { tabs, selectedTab } = home;
        return <Layout className='layout-home'>
            <Sider
                width={300}
                collapsible
                collapsedWidth={0}
                trigger={null}
                theme='light'
                className='sider-home'
            >
                <MenuLayout />
            </Sider>
            <Content className='content-home'>
                {tabs.length > 0 ? <Tabs
                    type="editable-card"
                    hideAdd
                    onEdit={this.onEdit}
                    onChange={this.onChange}
                    activeKey={selectedTab ? selectedTab.code : null}
                >
                    { this.generateTabs() }
                </Tabs> : <EmptyContent />}
            </Content>
        </Layout>
    }
}

export default connect(({ present: { home, dashboard } }) => ({ home, dashboard }))(Home)