import React from 'react'
import { connect } from 'dva'
import { Layout } from 'antd'
import DashboardMenu from './menu'
import DashboardList from './list'
import Loading from '../common/loading/index'
import './layout.less'
const { Sider, Content } = Layout

class DashboardLayout extends React.Component {

    render() {
        const { siderLoading, dashboard, dispatch } = this.props;
        const { currentMenu, currentMenuParents } = dashboard;
        return <Layout
            className='layout-dashboard'
        >
            <Sider width={300}>
                <Loading visible={siderLoading} />
                <DashboardMenu
                    model={dashboard}
                    editable={true}
                    searchMenu={true}
                    onlyMenu={true}
                    hideEmptyMenu={false}
                    onMount={(menuList, menuTree) => {
                        if(menuTree.length > 0) {
                            if(currentMenu) {
                                dispatch({ type: 'dashboard/remoteMenuDashboardList', menuCode: currentMenu.code });
                            }else {
                                dispatch({ type: 'dashboard/setFields', fields: [
                                    { name: 'currentMenu', value: menuTree[0] },
                                    { name: 'currentMenuParents', value: [menuTree[0], {code: '-1', name: '报表目录'}] },
                                    { name: 'menuSelectedKeys', value: [menuTree[0].code] },
                                    { name: 'menuExpandedKeys', value: [menuTree[0].code] },
                                    { name: 'menuAutoExpandParent', value: true },
                                ] });
                                dispatch({ type: 'dashboard/remoteMenuDashboardList', menuCode: menuTree[0].code });
                            }
                        }
                    }}
                    onExpand={menus => {
                        dispatch({ type: 'dashboard/setFields', fields: [
                            { name: 'menuExpandedKeys', value: menus.map(m => m.code) },
                            { name: 'menuAutoExpandParent', value: true },
                        ] });
                    }}
                    onSelect={(selectedMenu, parents) => {
                        dispatch({ type: 'dashboard/setFields', fields: [
                            { name: 'currentMenu', value: selectedMenu },
                            { name: 'currentMenuParents', value: parents },
                            { name: 'menuSelectedKeys', value: [selectedMenu.code] },
                        ] })
                        if(!!selectedMenu) {
                            if(selectedMenu.code === '-1') {
                                dispatch({ type: 'dashboard/fetchList', mandatory: true });
                            }else {
                                dispatch({ type: 'dashboard/remoteMenuDashboardList', menuCode: selectedMenu.code });
                            }
                        }
                    }}
                    onSearch={(keyword, expandedMenus) => {
                        dispatch({ type: 'dashboard/setFields', fields: [
                            { name: 'menuExpandedKeys', value: expandedMenus.map(m => m.code) },
                            { name: 'menuFilterLabel', value: keyword },
                            { name: 'menuAutoExpandParent', value: true },
                        ] });
                    }}
                    onMenuModify={(menu) => {
                        if(menu.code === currentMenu.code) {
                            let newParents = currentMenuParents.map(m => {
                                if(m.code === menu.code) {
                                    return { ...m, ...menu };
                                }else {
                                    return m
                                }
                            });
                            dispatch({ type: 'dashboard/setFields', fields: [
                                { name: 'currentMenu', value: menu },
                                { name: 'currentMenuParents', value: newParents },
                            ] })
                        }
                    }}
                    onMenuDelete={(menu) => {
                        if(menu.code === currentMenu.code) {
                            let currentMenuParents_ = [ ...currentMenuParents ];
                            currentMenuParents_.splice(0, 1);
                            dispatch({ type: 'dashboard/setFields', fields: [
                                { name: 'currentMenu', value: currentMenuParents_[0] },
                                { name: 'currentMenuParents', value: currentMenuParents_ },
                                { name: 'menuSelectedKeys', value: [currentMenuParents_[0].code] },
                            ] })
                        }
                    }}
                    silentFetch={true}
                />
            </Sider>
            <Content>
                <DashboardList />
            </Content>
        </Layout>
    }
}
function mapStateToProps({ present: { loading, dashboard }}) {
    let effectsArr = ['dashboard/remoteMenuTree', 'dashboard/remoteAddMenu', 'dashboard/remoteDeleteMenu'];
    let flag = false;
    for(let i = 0; i < effectsArr.length; i++) {
        if(loading.effects[effectsArr[i]]) {
            flag = true;
            break;
        }
    }

    return { siderLoading: flag, dashboard }
}
export default connect(mapStateToProps)(DashboardLayout)