text: import React from 'react';
  import Cookies from 'js-cookie';
  import PropTypes from 'prop-types';
  import { Layout, Icon, message } from 'antd';
  import DocumentTitle from 'react-document-title';
  import { connect } from 'dva';
  import { Route, Redirect, Switch, routerRedux } from 'dva/router';
  import { ContainerQuery } from 'react-container-query';
  import classNames from 'classnames';
  import { enquireScreen } from 'enquire-js';
  import GlobalHeader from '../components/GlobalHeader';
  import GlobalFooter from '../components/GlobalFooter';
  import NotFound from '../routes/Exception/404';
  import { getRoutes } from '../utils/utils';
  import { getMenuData } from '../common/menu';
  import Authorized from '../utils/Authorized';
  import logo from '../assets/logo.svg';
  import { logout, login } from '../services/user';
  
  const { AuthorizedRoute, check } = Authorized;
  
  
  /**
   * 根据菜单取得重定向地址.
   */
  const redirectData = [];
  const getRedirect = (item) => {
    if (item && item.children) {
      if (item.children[0] && item.children[0].path) {
        redirectData.push({
          from: `/${item.path}`,
          to: `/${item.children[0].path}`,
        });
        item.children.forEach((children) => {
          getRedirect(children);
        });
      }
    }
  };
  getMenuData().forEach(getRedirect);
  
  const { Content } = Layout;
  const query = {
    'screen-xs': {
      maxWidth: 575,
    },
    'screen-sm': {
      minWidth: 576,
      maxWidth: 767,
    },
    'screen-md': {
      minWidth: 768,
      maxWidth: 991,
    },
    'screen-lg': {
      minWidth: 992,
      maxWidth: 1199,
    },
    'screen-xl': {
      minWidth: 1200,
    },
  };
  
  let isMobile;
  enquireScreen((b) => {
    isMobile = b;
  });
  
  class PRSPLayout extends React.PureComponent {
    static childContextTypes = {
      location: PropTypes.object,
      breadcrumbNameMap: PropTypes.object,
    }
    state = {
      isMobile,
    };
    getChildContext() {
      const { location, routerData } = this.props;
      return {
        location,
        breadcrumbNameMap: routerData,
      };
    }
    componentDidMount() {
      enquireScreen((mobile) => {
        this.setState({
          isMobile: mobile,
        });
      });
  
      /*  this.props.dispatch({
         type: 'user/fetch',
       }); */
      // console.log('基础也渲染好了', Cookies.get('userinfo'));
    }
    getPageTitle() {
      const { routerData, location } = this.props;
      const { pathname } = location;
      let title = '工业魔方';
      if (routerData[pathname] && routerData[pathname].name) {
        title = `${routerData[pathname].name} - 工业魔方`;
      }
      return title;
    }
    getBashRedirect = () => {
      // According to the url parameter to redirect
      // 这里是重定向的,重定向到 url 的 redirect 参数所示地址
      const urlParams = new URL(window.location.href);
  
      const redirect = urlParams.searchParams.get('redirect');
      // Remove the parameters in the url
      if (redirect) {
        urlParams.searchParams.delete('redirect');
        window.history.replaceState(null, 'redirect', urlParams.href);
      } else {
        const { routerData } = this.props;
        // get the first authorized route path in routerData
        const authorizedPath = Object.keys(routerData).find(
          item => check(routerData[item].authority, item) && item !== '/'
        );
        return authorizedPath;
      }
      return redirect;
    };
    handleMenuCollapse = (collapsed) => {
      this.props.dispatch({
        type: 'global/changeLayoutCollapsed',
        payload: collapsed,
      });
    }
    handleNoticeClear = (type) => {
      message.success(`清空了${type}`);
      this.props.dispatch({
        type: 'global/clearNotices',
        payload: type,
      });
    }
    handleMenuClick = ({ key }) => {
      console.log('退出登录');
      if (key === 'triggerError') {
        this.props.dispatch(routerRedux.push('/exception/trigger'));
        return;
      }
      if (key === 'logout') {
        // 退出登录
        logout();
      }
      // 登录
      if (key === 'login') {
        login();
      }
      // 个人中心
      if (key === 'user') {
        this.props.history.push('/setting/userinfo');
      }
    }
    handleNoticeVisibleChange = (visible) => {
      if (visible) {
        this.props.dispatch({
          type: 'global/fetchNotices',
        });
      }
    }
    render() {
      const {
        collapsed, fetchingNotices, notices, routerData, match, location,
      } = this.props;
      const currentUser = Cookies.get('userinfo') ? JSON.parse(Cookies.get('userinfo')) : {};
      const bashRedirect = this.getBashRedirect();
      const layout = (
        <Layout>
          <Layout>
            <GlobalHeader
              logo={logo}
              currentUser={currentUser}
              match={this.props.match}
              fetchingNotices={fetchingNotices}
              notices={notices}
              collapsed={collapsed}
              isMobile={this.state.isMobile}
              onNoticeClear={this.handleNoticeClear}
              onCollapse={this.handleMenuCollapse}
              onMenuClick={this.handleMenuClick}
              onNoticeVisibleChange={this.handleNoticeVisibleChange}
  
            />
            <Content style={{ margin: '24px 24px 0', height: '100%' }}>
              <div style={{ minHeight: 'calc(100vh - 260px)' }}>
                <Switch>
                  {redirectData.map(item => (
                    <Redirect key={item.from} exact from={item.from} to={item.to} />
                  ))}
                  {getRoutes(match.path, routerData).map(item => (
                    <AuthorizedRoute
                      key={item.key}
                      path={item.path}
                      component={item.component}
                      exact={item.exact}
                      authority={item.authority}
                      redirectPath="/exception/403"
                    />
                  ))}
                  <Redirect exact from="/" to="/test" />
                  <Route render={NotFound} />
                </Switch>
              </div>
              <GlobalFooter
                copyright={
                  <div>
                    Copyright <Icon type="copyright" /> 2018 工业魔方
                  </div>
                }
              />
            </Content>
          </Layout>
        </Layout>
      );
  
      return (
        <DocumentTitle title={this.getPageTitle()}>
          <ContainerQuery query={query}>
            {params => <div className={classNames(params)}>{layout}</div>}
          </ContainerQuery>
        </DocumentTitle>
      );
    }
  }
  
  export default connect(state => ({
    collapsed: state.global.collapsed,
    fetchingNotices: state.global.fetchingNotices,
    notices: state.global.notices,
  }))(PRSPLayout);
  