import React, { Component } from 'react';
import cx from 'classnames';
import Layout from '@ali/ice-layout';
import Header from '../../components/Header';
import Footer from '../../components/Footer';

import './Layout.scss';

export default class ScalableLayout extends Component {
  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);

    this.state = {
      collapse: false,
    };
  }

  render() {
    const { router, location: { pathname }, aside, children } = this.props;
    const splitedPath = pathname.replace(/^\//, '').split('/');
    return (
      <Layout
        style={{ minHeight: '100vh' }}
        className={cx({
          'ice-admin-layout': true,
          'ice-admin-scalable-aside-layout': true,
          [pathname.replace(/\//g, '-')]: true,
          [splitedPath[0]]: true,
        })}
      >
        <Header />

        <Layout.Section>
          {/* 边栏 */}
          {aside ? <Layout.Aside width={250}>{aside}</Layout.Aside> : null}
          {/* 主体内容 */}
          <Layout.Main>{children}</Layout.Main>
        </Layout.Section>

        <Footer />
      </Layout>
    );
  }
}