import React, { useEffect } from 'react';
import { Layout, Menu } from 'antd';
import { connect } from 'dva';
import RightContent from './RightContent';
import Link from 'umi/link';

const { Header, Content, Footer } = Layout;
const { SubMenu } = Menu;

// 布局
function LayoutDetail(props) {
  const { currentUser, permission } = props;
  const isAdmin = currentUser.UserName == 'admin';
  var logoStyle = {
    color: 'white',
    fontWeight: 600,
    fontSize: 20,
    verticalAlign: 'middle',
    marginRight: 60,
    width: 120,
  };
  useEffect(() => {
    // 查询用户信息
    props.dispatch({
      type: 'user/fetchCurrent',
    });
  }, []);
  const checkReport = state => {
    if (isAdmin) return true;
    const manager = currentUser.is_leader || currentUser.is_opt_mgr || currentUser.is_wty_mgr;
    switch (state) {
      case 0:
        return currentUser.is_accountant || manager || permission['func-01-point-works-report'];
      case 1:
        return manager || permission['func-01-point-works-report-p'];
      case 2:
        return permission['func-01-point-works-report-d'];
      case 3:
        return currentUser.is_accountant || permission['func-01-point-works-report-p-s'];
    }
  };
  return (
    <Layout>
      <Header>
        <div style={{ display: 'flex', height: '100%', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', width: '70%' }}>
            <div style={logoStyle}>金科环境</div>
            <Menu
              theme="dark"
              mode="horizontal"
              defaultSelectedKeys={[props.location.pathname]}
              style={{ lineHeight: '64px', width: '100%' }}
            >
              <SubMenu key="/home/work-hours" title="工时管理">
                <Menu.Item key="/home/work-hours">
                  <Link to="/home/work-hours">上报工时</Link>
                </Menu.Item>
                <Menu.Item key="/home/work-hours-auth">
                  <Link to="/home/work-hours-auth">审批工时</Link>
                </Menu.Item>
              </SubMenu>

              <SubMenu key="/home/approval" title="项目立项">
                <Menu.Item key="/home/approval/list">
                  <Link to="/home/approval/list">项目列表</Link>
                </Menu.Item>
                <Menu.Item key="/home/approval/auth">
                  <Link to="/home/approval/auth">审核列表</Link>
                </Menu.Item>
              </SubMenu>

              {checkReport(0) && (
                <SubMenu key="/home/report" title="工时报表">
                  {/* <Menu.Item key="/home/report/resource">
                  <Link to="/home/report/resource">资源报表</Link>
                </Menu.Item> */}
                  {checkReport(1) && (
                    <Menu.Item key="/home/report/project">
                      <Link to="/home/report/project">项目报表</Link>
                    </Menu.Item>
                  )}
                  {checkReport(2) && (
                    <Menu.Item key="/home/report/department">
                      <Link to="/home/report/department">部门报表</Link>
                    </Menu.Item>
                  )}
                  {checkReport(3) && (
                    <Menu.Item key="/home/report/finance">
                      <Link to="/home/report/finance">财务报表</Link>
                    </Menu.Item>
                  )}
                </SubMenu>
              )}

              {/* <Menu.Item key="/home/demo" title="demo">
                <Link to="/home/demo">demo</Link>
              </Menu.Item> */}

              {/* {isAdmin && (
              <Menu.Item key="/home">
                <Link to="/home">采购清单</Link>
              </Menu.Item>
              )} */}
              {/* <Menu.Item key="/home/flow-list">
                <Link to="/home/flow-list">流程图</Link>
              </Menu.Item> */}
            </Menu>
          </div>
          <RightContent />
        </div>
      </Header>
      <Content style={{ padding: '0 50px', minHeight: 'calc(100vh - 64px)' }}>
        <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>{props.children}</div>
      </Content>
      {/* <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer> */}
    </Layout>
  );
}
export default connect(({ user }) => ({
  currentUser: user.currentUser,
  permission: user.currentUser.Permission,
}))(LayoutDetail);