text: /**
   * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
   * You can view component api by:
   * https://github.com/ant-design/ant-design-pro-layout
   */
  import ProLayout, { DefaultFooter, SettingDrawer } from '@ant-design/pro-layout';
  import React, { useRef, Suspense } from 'react';
  import { connect, Link, useIntl, history } from 'umi';
  import { Result, Button } from 'antd';
  import Authorized from '@/utils/Authorized';
  import RightContent from '@/components/GlobalHeader/RightContent';
  import { getAuthorityFromRouter } from '@/utils/utils';
  import logo from '../assets/logo.svg';
  
  const noMatch = (
    <Result
      status={403}
      title="403"
      subTitle="Sorry, you are not authorized to access this page."
      extra={
        <Button type="primary">
          <Link to="/user/login">Go Login</Link>
        </Button>
      }
    />
  );
  
  /**
   * Use Authorized check all menu item
   */
  const menuDataRender = (menuList) =>
    menuList.map((item) => {
      const localItem = {
        ...item,
        children: item.children ? menuDataRender(item.children) : undefined,
      };
      return Authorized.check(item.authority, localItem, null);
    });
  
  const BasicLayout = (props) => {
    const {
      dispatch,
      children,
      settings,
      location = {
        pathname: '/',
      },
    } = props;
  
    const menuDataRef = useRef([]);
  
    const handleMenuCollapse = (payload) => {
      if (dispatch) {
        dispatch({
          type: 'global/changeLayoutCollapsed',
          payload,
        });
      }
    };
  
    const renderSettingDrawer = () => {
      // Do not render SettingDrawer in production
      if (process.env.NODE_ENV === 'production') {
        return null;
      }
      return (
        <SettingDrawer
          settings={settings}
          onSettingChange={(config) =>
            dispatch({
              type: 'settings/changeSetting',
              payload: config,
            })
          }
        />
      );
    };
    // get children authority
    const authorized = getAuthorityFromRouter(props.route.routes, location.pathname || '/') || {
      authority: undefined,
    };
  
    const { formatMessage } = useIntl();
  
    return (
      <>
        <ProLayout
          logo={logo}
          formatMessage={formatMessage}
          {...props}
          {...settings}
          onCollapse={handleMenuCollapse}
          onMenuHeaderClick={() => history.push('/')}
          menuItemRender={(menuItemProps, defaultDom) => {
            if (menuItemProps.isUrl || !menuItemProps.path || location.pathname === menuItemProps.path) {
              return defaultDom;
            }
            return <Link to={menuItemProps.path}>{defaultDom}</Link>;
          }}
          breadcrumbRender={(routers = []) => [
            {
              path: '/',
              breadcrumbName: formatMessage({
                id: 'menu.home',
                defaultMessage: 'Home',
              }),
            },
            ...routers,
          ]}
          itemRender={(route, params, routes, paths) => {
            const first = routes.indexOf(route) === 0;
            return first ? <Link to={paths.join('/')}>{route.breadcrumbName}</Link> : <span>{route.breadcrumbName}</span>;
          }}
          footerRender={() => {
            if (settings.footerRender || settings.footerRender === undefined) {
              return <DefaultFooter links={[]} copyright={<span>copyright</span>} />;
            }
            return null;
          }}
          menuDataRender={menuDataRender}
          rightContentRender={() => <RightContent />}
          postMenuData={(menuData) => {
            menuDataRef.current = menuData || [];
            return menuData || [];
          }}
          waterMarkProps={{
            content: 'Amy',
            fontColor: 'rgba(24,144,255,0.15)',
          }}
        >
          <Authorized authority={authorized.authority} noMatch={noMatch}>
            {children}
          </Authorized>
        </ProLayout>
        <Suspense fallback={null}>{renderSettingDrawer()}</Suspense>
      </>
    );
  };
  
  export default connect(({ global, settings }) => ({
    collapsed: global.collapsed,
    settings,
  }))(BasicLayout);
  