import React, { Component } from 'react'
import { Layout, Menu, Avatar, Dropdown, message } from 'antd';
import Icon from '@ant-design/icons';
import './style.css'
import { userRoutes, superviseRoutes, institutionRoutes } from '../../routers/router';
import { withRouter } from 'react-router-dom';
import { DownOutlined,LogoutOutlined } from '@ant-design/icons';
import { clearToken, whoLogined } from '../../utils/auth';

const { Header, Content, Sider } = Layout;
let routes; 
if(whoLogined().startsWith("user")){
    routes = userRoutes.filter(route => route.isShow);
} else if(whoLogined().startsWith("supervise")){
    routes = superviseRoutes.filter(route => route.isShow);
} else {
    routes = institutionRoutes.filter(route => route.isShow);
}

class Index extends Component {

    render() {
        const handleMenu = (p)=>{
            if(p.key === 'logout') {
                clearToken();
                this.props.history.push('/login');
            } else {
                message.info(p.key);
            }
        }
        const menu = (
            <Menu onClick={handleMenu}>
                <Menu.Item key="msg">
                    消息
                </Menu.Item>
                <Menu.Item key="setting">
                    设置
                </Menu.Item>
                <Menu.Item key="logout">
                    <LogoutOutlined />退出
                </Menu.Item>
            </Menu>
        );
        return (
            <Layout>
                <Header className="header">
                    <div className="logo">区块链信用模型共享及认证系统</div>
                    <Dropdown overlay={menu}>
                        <a className="ant-dropdown-link" href="/#" onClick={e => { e.preventDefault() }}>
                            <Avatar style={{ backgroundColor: '#f56a00' }}>U</Avatar><DownOutlined />
                        </a>
                    </Dropdown>
                </Header>
                <Layout>
                    <Sider width={200} className="site-layout-background">
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{ height: '100%', borderRight: 0 }}
                        >
                            {routes.map(route => {
                                return <Menu.Item key={route.path} onClick={p => this.props.history.push(p.key)}>
                                    <Icon component={route.icon}></Icon>
                                    {route.title}
                                </Menu.Item>
                            })}
                        </Menu>
                    </Sider>
                    <Layout style={{ padding: '16px' }}>
                        <Content
                            className="site-layout-background"
                            style={{
                                padding: 24,
                                margin: 0,
                                minHeight: 280,
                            }}
                        >
                            {this.props.children}
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        )
    }
}
export default withRouter(Index);