import React from 'react';

import {Link, withRouter} from 'react-router-dom';

import {Layout, Menu, Icon} from 'antd';

const {SubMenu} = Menu;

const {Sider} = Layout;

class SideBar extends React.Component {

    constructor(props) {

        super(props);

        this.state =  {

            collapsed: false,

            currentPath : this.props.history.location || '/user'

        }

    }

    toggleCollapsed() {

        this.setState({

            collapsed: !this.state.collapsed

        });

    }

    render() {

        return (

            <Sider

                width={250}

                collapsible

                onCollapse={() => this.toggleCollapsed()}

                collapsed={this.state.collapsed}

                style={{background: '#fff'}}>

                <Menu

                    mode="inline"

                    defaultSelectedKeys={['0']}

                    //defaultOpenKeys={['sub1']}

                    style={{height: '100%'}}>

                    <Menu.Item key="0">

                        <Link to="/">

                            <Icon type="home" />首页

                        </Link>

                    </Menu.Item>

                    <SubMenu key="sub1" title={<span><Icon type="laptop"/>主导航</span>}>

                        <Menu.Item key="1">

                            <Link to="/antForm">多组表单form处理</Link>

                        </Menu.Item>

                        <Menu.Item key="2">

                            <Link to="/antTable">表格table</Link>

                        </Menu.Item>

                        <Menu.Item key="3">

                            <Link to="/login">首页</Link>

                        </Menu.Item>

                    </SubMenu>

                    <SubMenu key="sub2" title={<span><Icon type="save"/>商品</span>}>

                        <Menu.Item key="6">

                            <Link to="/product">商品管理</Link>

                        </Menu.Item>

                        <Menu.Item key="10">

                            <Link to="/product/add">商品添加</Link>

                        </Menu.Item>

                        <Menu.Item key="7">

                            <Link to="/product.category">品类管理</Link>

                        </Menu.Item>

                    </SubMenu>

                    <SubMenu key="sub3" title={<span><Icon type="shopping-cart"/>订单</span>}>

                        <Menu.Item key="8">

                            <Link to="/order">订单管理</Link>

                        </Menu.Item>

                    </SubMenu>

                    <SubMenu key="sub4" title={<span><Icon type="user"/>用户</span>}>

                        <Menu.Item key="9">

                            <Link to="/user">用户管理</Link>

                        </Menu.Item>

                    </SubMenu>

                </Menu>

            </Sider>

        );

    };

}

export default withRouter(SideBar);