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 } = main;

        const userMenu = currentUser.code ? (
            <Menu>
                <Menu.Item key="0">
                    <span>账号信息</span>
                </Menu.Item>
                {currentUser.role === 'admin' && <Menu.Item key="1">
                    <Link to='/admin'><Icon type="setting" />系统管理</Link>
                </Menu.Item>}
                <Menu.Divider />
                <Menu.Item key="3" onClick={() => {
                    window.localStorage.removeItem("token");
                    window.localStorage.removeItem("expireTime");
                    dispatch({ type: 'main/redirect', path: '/login' });
                }}>注销</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>
            <div className='navigator-content'>
                <Menu
                    className='navigator-menu'
                    selectedKeys={[currentPage]}
                    mode="horizontal"
                >     
                    <Menu.Item className='nav-page' key="home">
                        <Link to='/home'><Icon type="home" />我的</Link>
                    </Menu.Item>
                    <Menu.Item className='nav-page' key="dashboard">
                        <Link to='/dashboard'><Icon type="desktop" />报告与看板</Link>
                    </Menu.Item>
                    <Menu.Item className='nav-page' key="chart">
                        <Link to='/chart'><Icon type="area-chart" />图表</Link>
                    </Menu.Item>
                    <Menu.Item className='nav-page' key="datasource">
                        <Link to='/datasource'><Icon type="database" />数据源</Link>
                    </Menu.Item>
                    <Menu.Item className='nav-page' key="modeling">
                        <Link to='#'><Icon type="tool" />建模分析</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({ present: { main } }) {
    return { main };
}

export default connect(mapStateToProps)(Navigator)


