import React from 'react';
import { Layout } from 'antd';
import { withRouter } from 'react-router';
import { inject, observer } from 'mobx-react';
// import { computed } from 'mobx';
import MainMenu from '../../components/menu';
import MainHeader from '../../components/header';
import './main.less';

@withRouter
@inject('global')
@observer
export default class Main extends React.Component {

  render() {
    return (
      <Layout className="main">
        <Layout.Sider className="sider">
          <div className="logo-wrap">{/* <img src={Logo} className="logo" alt="logo" /> */}</div>
          <div className="menu-wrap">
            <MainMenu />
          </div>
        </Layout.Sider>
        <Layout className="main-right">
          <Layout.Header className="main-header">
            <MainHeader notificationNewCount={this.notificationNewCount} />
          </Layout.Header>
          <Layout.Content className="main-content">{this.props.children}</Layout.Content>
        </Layout>
      </Layout>
    );
  }
}