import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';
import { Layout, Icon, Row, Col } from 'antd';
import { AdminMenu } from '../menu';
import './Admin.less';
const { Header, Sider, Content } = Layout;
// 判断移动端
const isPC = () => {
  const userAgentInfo = navigator.userAgent;
  const Agents = new Array('Android', 'iPhone', 'SymbianOS', 'Windows Phone');
  let flag = true;
  for (let v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
  }
  return flag;
}
class Admin extends Component {
  constructor() {
    super();
    this.state = { collapsed: false };
    this.toggle = this.toggle.bind(this);
  }
  componentWillMount() {
    if (!isPC()) {
      this.toggle();
    }
  }
  toggle() {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }
  render() {
    return (
      <DocumentTitle title="page">
        <Layout>
          <Sider
            style={{ minHeight: '100vh'}}
            breakpoint="lg"
            collapsedWidth={isPC() ? 64 : 0}
            className="sider"
            trigger={null}
            collapsible
            collapsed={this.state.collapsed}
          >
            <div className="logo">
              <img
                className="ezviz"
                src={this.props.logo}/>
              {!this.state.collapsed && <span className="admin-name">{this.props.name}</span>}
            </div>
            <AdminMenu
              url={this.props.menu.url}
            />
          </Sider>
        <Layout>
          <Header className="header">
            <Row>
              <Col span={isPC() ? 1 : 2}>
                <Icon
                  className="trigger"
                  type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                  onClick={this.toggle}
                />
              </Col>
              <Col span={isPC() ? 23 : 22}>
                {this.props.headerContent}
              </Col>
            </Row>
          </Header>
          {/* 用户内容区域 */}
          <Content style={{ background: 'white', margin: 12, minHeight: 280 }}>
            {this.props.children}
          </Content>
        </Layout>
      </Layout>
      </DocumentTitle>
    );
  }
}
export default Admin;