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

const { Header, Content, Footer } = Layout;
const { SubMenu } = Menu;
let timer;
const isMobile = isMobileDevice();
// 布局
function LayoutDetail(props) {
  const { currentUser, permission, dispatch, authList } = props;
  const isAdmin = currentUser.UserName == 'admin';
  var logoStyle = {
    color: 'white',
    fontWeight: 600,
    fontSize: 20,
    verticalAlign: 'middle',
    marginRight: 60,
    width: 120,
  };

  const authCount = useMemo(() => {
    let count = 0;
    Object.values(authList).forEach(list => (count += list.length));
    return count;
  }, [authList]);

  useEffect(() => {
    if (isMobile) return;
    // 查询用户信息
    dispatch({
      type: 'user/fetchCurrent',
    });
  }, []);

  useEffect(() => {
    if (isMobile) return;
    if (!currentUser.ID) return;
    dispatch({
      type: 'authList/queryAuthList',
      payload: { user_id: currentUser.ID },
    });
    clearInterval(timer);
    timer = setInterval(() => {
      if (location.href.indexOf('/bom/home/audit') != -1) return;
      dispatch({
        type: 'authList/queryAuthList',
        payload: { user_id: currentUser.ID },
      });
    }, 60000);

    return () => clearInterval(timer);
  }, [currentUser.ID]);

  // 不支持移动端使用，做判断
  if (isMobile) {
    return (
      <Layout>
        <Header>
          <div style={{ display: 'flex', height: '100%', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', width: '70%' }}>
              <div style={logoStyle}>金科环境</div>
            </div>
          </div>
        </Header>
        <Content
          style={{
            padding: '50px 0',
            minHeight: 'calc(100vh - 64px)',
            textAlign: 'center',
            fontSize: 24,
          }}
        >
          请使用PC端进行审批
        </Content>
      </Layout>
    );
  }
  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%' }}
            >
              <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.Item key="/home/auth">
                <Link to="/home/auth">
                  <Badge count={authCount} className={styles.badge}>
                    审核列表
                  </Badge>
                </Link>
              </Menu.Item>
              <Menu.Item key="/home/submit">
                <Link to="/home/submit">已提交审批</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>
  );
}

function isMobileDevice() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
export default connect(({ user, authList }) => ({
  currentUser: user.currentUser,
  permission: user.currentUser.Permission,
  authList: authList.authList,
}))(LayoutDetail);