import React from 'react'
import { Menu, Icon, Avatar, Dropdown } from 'antd'
import { Link } from 'react-router-dom'
import { connect } from 'dva'
import './navigator.less'

class Navigator extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
        }
    };
    

    render() {
        const { main, dispatch } = this.props;
        const { currentUser, currentPage, lastWorkshopPage, lastSettingPage } = main;

        let page = currentPage.match(/\/(\w+)/g)[0].replace('/', '');

        const userMenu = currentUser.code ? (
            <Menu>
                <Menu.Item key="0" onClick={() => {
                    dispatch({ type: 'main/redirect', path: '/userinfo' });
                }}>
                    <Icon type="info-circle-o" /><span>账号信息</span>
                </Menu.Item>
                <Menu.Divider />
                <Menu.Item key="3" onClick={() => {
                    dispatch({ type: 'main/logout' });
                    dispatch({ type: 'main/redirect', path: '/login' });
                }}><Icon type="logout" />退出系统</Menu.Item>
            </Menu>
        ) : (
            <Menu>
                <Menu.Item key="0" onClick={() => {
                    dispatch({ type: 'main/redirect', path: '/login' });
                }}>
                    <span>登录</span>
                </Menu.Item>
            </Menu>
        );

        return <div className='navigator'>
            <div className='navigator-left'>
                <div className='logo' style={{ cursor: 'pointer' }} onClick={() => {
                    dispatch({ type: 'main/redirect', path: '/home' });
                }}></div>
                <span className='logo-text' style={{ cursor: 'pointer' }} onClick={() => {
                    dispatch({ type: 'main/redirect', path: '/home' });
                }}>BI商业智能</span>
            </div>
            <div className='navigator-content'>
                {(currentUser.role === 'admin' || currentUser.role === 'superAdmin') && <Menu
                    className='navigator-menu'
                    selectedKeys={[page]}
                    mode="horizontal"
                >     
                    <Menu.Item className='nav-page' key="home">
                        <Link to='/home'>首页</Link>
                    </Menu.Item>
                    <Menu.Item className='nav-page' key="workshop">
                        <Link to={lastWorkshopPage}>报表制作</Link>
                    </Menu.Item>
                    {currentUser.role === 'superAdmin' && <Menu.Item className='nav-page' key="setting">
                        <Link to={lastSettingPage}>系统管理</Link>
                    </Menu.Item>}
                </Menu>}
            </div>
            <div className='navigator-right'>
                <Dropdown overlay={userMenu} trigger={['click']}>
                    <div>
                        <Avatar className='user-icon' size="small" icon="user" />
                        <span className='user-name'>{currentUser.code ? currentUser.name : '未登录'}</span>
                    </div>
                </Dropdown>
            </div>
        </div>
    }
}

function mapStateToProps({ main }) {
    return { main };
}

export default connect(mapStateToProps)(Navigator)


