import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { submit } from 'redux-form';
import { Menu, Icon } from 'antd';
import { pushRoute } from '../../utils/commonUtils';
import { changeSystemMenu } from '../../redux/actions/system';
import cx from 'classnames';

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

//格式化菜单
const formatMenu = (perms) => {
    const menu1 = {}, menu2 = {}, menus = [];
    if (perms) {
        perms.map((perm, i) => {
            if (!perm.parent_module) {
                menu1[perm.module] = {
                    ...perm,
                    display_name: perm.module_name
                };
            } else {
                if (menu2[perm.parent_module]) {
                    menu2[perm.parent_module].push({
                        ...perm,
                        display_name: perm.module_name
                    });
                } else {
                    menu2[perm.parent_module] = [{
                        ...perm,
                        display_name: perm.module_name
                    }];
                }
            }
        });
        const keys = Object.keys(menu1);
        keys.map((key, i) => {
            if (menu2[key]) {
                menus.push({
                    ...menu1[key],
                    children: menu2[key]
                });
            } else {
                menus.push({
                    ...menu1[key]
                });
            }
        });
    }
    return menus;
};


class SysMenu extends React.Component {
    static propTypes = {
        form: PropTypes.string,
        onClick: PropTypes.func
    }
    static defaultProps = {
    }
    constructor(props) {
        super(props);
        this.handelClick = this.handelClick.bind(this);
        this.renderSubMenu = this.renderSubMenu.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.handleOpenChange = this.handleOpenChange.bind(this);
    }
    componentDidMount() {
    }
    handelClick() {
        const { onClick, form, dispatch } = this.props;
        if (onClick) {
            onClick();
        } else {
            dispatch(submit(form));
        }
    }
    handleClick(modules) {
        const { dispatch } = this.props;
        const { keyPath, key } = modules;
        const newOpenKeys = [].concat(keyPath);
        if (newOpenKeys.length > 0)
            newOpenKeys.shift();
        dispatch(changeSystemMenu({
            openKeys: newOpenKeys,
            selectedKeys: [key]
        }));
        pushRoute(`main/${modules.key}`);
    }
    handleOpenChange(openKeys) {
        const { selectedKeys, dispatch } = this.props;
        dispatch(changeSystemMenu({
            openKeys,
            selectedKeys
        }));
    }
    renderSubMenu(subMenus) {
        return subMenus.map((subMenu, i) => {
            return (
                <Menu.Item key={subMenu.module}>
                    <span className="nav-text">{subMenu.display_name}{subMenu && subMenu.is_beta && subMenu.is_beta == 'y' && <span style={{ color: 'rgba(153, 169, 191,0.6)' }}>（ 试用 ）</span>}</span>
                </Menu.Item>
            );
        });
    }
    render() {
        const { system_menu_perms, openKeys, selectedKeys } = this.props;
        const menus = formatMenu(system_menu_perms);
        return (
            <Menu className={cx('system_wrap')}
                onClick={this.handleClick}
                style={{ width: '100%' }}
                onOpenChange={this.handleOpenChange}
                selectedKeys={selectedKeys}
                openKeys={openKeys}
                mode="inline">
                {menus && menus.map((menu, i) => {
                    if (menu.children) {
                        return (
                            <SubMenu key={menu.module} title={
                                <span><img style={{ width: '12px', marginRight: '8px', verticalAlign: 'baseline' }} src={'menuIconMap[menu.module]'} alt="" />{menu.display_name}</span>
                            }>
                                {this.renderSubMenu(menu.children)}
                            </SubMenu>
                        );
                    } else {
                        return (
                            <Menu.Item key={menu.module} >
                                <span className="nav-text">
                                    <img style={{ width: '12px', marginRight: '8px', verticalAlign: 'baseline' }} src={'menuIconMap[menu.module]'} alt="" />
                                    {menu.display_name}
                                    {menu && menu.module && menu.module == 'persontax' && <span className={cx('menu_new')}></span>}
                                </span>
                            </Menu.Item>
                        );
                    }
                })}
            </Menu>
        );
    }
}



const mapState = (state) => {
    const {
        router = {},
        system: { system_menu_selected_keys: { openKeys = [], selectedKeys = [] }, system_menu_perms = [] }
    } = state;
    return {
        router,
        uaa_tenant: {},
        system_menu_perms,
        openKeys,
        selectedKeys
    };
};
export default connect(mapState)(SysMenu);