text: import React from 'react';
  import dynamic from 'dva/dynamic';
  import { getMenuData } from './menu';
  
  // wrapper of dynamic
  const dynamicWrapper = (app, models, component) => dynamic({
    app,
    models: () => models.map(m => import(`../models/${m}.js`)),
    // add routerData prop
    component: () => {
      const p = component();
      return new Promise((resolve, reject) => {
        p.then((Comp) => {
          resolve(props => <Comp {...props} routerData={getRouterData(app)} />);
        }).catch(err => reject(err));
      });
    },
  });
  
  function getFlatMenuData(menus) {
    let keys = {};
    menus.forEach((item) => {
      if (item.children) {
        keys[item.path] = item.name;
        keys = { ...keys, ...getFlatMenuData(item.children) };
      } else {
        keys[item.path] = item.name;
      }
    });
    return keys;
  }
  
  export const getRouterData = (app) => {
    const routerData = {
      '/': {
        component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),
      },
      '/tables': {
        component: dynamicWrapper(app, ['rule'], () => import('../routes/Campaign')),
      },
      '/create': {
        component: dynamicWrapper(app, ['form'], () => import('../routes/Campaign/Create')),
      },
      '/report': {
        component: dynamicWrapper(app, ['rule'], () => import('../routes/Report/Account')),
      },
      '/dashboard/analysis': {
        component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')),
      },
      '/dashboard/monitor': {
        component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/Monitor')),
      },
      '/dashboard/workplace': {
        component: dynamicWrapper(app, ['project', 'activities', 'chart'], () => import('../routes/Dashboard/Workplace')),
        // hideInBreadcrumb: true,
        // name: '工作台',
      },
      '/form/basic-form': {
        component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/BasicForm')),
      },
      '/form/step-form': {
        component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm')),
      },
      '/form/step-form/confirm': {
        component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step2')),
      },
      '/form/step-form/result': {
        component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step3')),
      },
      '/form/advanced-form': {
        component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/AdvancedForm')),
      },
      '/list/table-list': {
        component: dynamicWrapper(app, ['rule'], () => import('../routes/List/TableList')),
      },
      '/list/basic-list': {
        component: dynamicWrapper(app, ['list'], () => import('../routes/List/BasicList')),
      },
      '/list/card-list': {
        component: dynamicWrapper(app, ['list'], () => import('../routes/List/CardList')),
      },
      '/list/search': {
        component: dynamicWrapper(app, ['list'], () => import('../routes/List/List')),
      },
      '/list/search/projects': {
        component: dynamicWrapper(app, ['list'], () => import('../routes/List/Projects')),
      },
      '/list/search/applications': {
        component: dynamicWrapper(app, ['list'], () => import('../routes/List/Applications')),
      },
      '/list/search/articles': {
        component: dynamicWrapper(app, ['list'], () => import('../routes/List/Articles')),
      },
      '/profile/basic': {
        component: dynamicWrapper(app, ['profile'], () => import('../routes/Profile/BasicProfile')),
      },
      '/profile/advanced': {
        component: dynamicWrapper(app, ['profile'], () => import('../routes/Profile/AdvancedProfile')),
      },
      '/result/success': {
        component: dynamicWrapper(app, [], () => import('../routes/Result/Success')),
      },
      '/result/fail': {
        component: dynamicWrapper(app, [], () => import('../routes/Result/Error')),
      },
      '/exception/403': {
        component: dynamicWrapper(app, [], () => import('../routes/Exception/403')),
      },
      '/exception/404': {
        component: dynamicWrapper(app, [], () => import('../routes/Exception/404')),
      },
      '/exception/500': {
        component: dynamicWrapper(app, [], () => import('../routes/Exception/500')),
      },
      '/user': {
        component: dynamicWrapper(app, [], () => import('../layouts/UserLayout')),
      },
      '/user/login': {
        component: dynamicWrapper(app, ['login'], () => import('../routes/User/Login')),
      },
      '/user/register': {
        component: dynamicWrapper(app, ['register'], () => import('../routes/User/Register')),
      },
      '/user/register-result': {
        component: dynamicWrapper(app, [], () => import('../routes/User/RegisterResult')),
      },
      // '/user/:id': {
      //   component: dynamicWrapper(app, [], () => import('../routes/User/SomeComponent')),
      // },
    };
    // Get name from ./menu.js or just set it in the router data.
    const menuData = getFlatMenuData(getMenuData());
    const routerDataWithName = {};
    Object.keys(routerData).forEach((item) => {
      routerDataWithName[item] = {
        ...routerData[item],
        name: routerData[item].name || menuData[item.replace(/^\//, '')],
      };
    });
    return routerDataWithName;
  };
  