import { Link, useIntl, useLocation, useModel } from '@umijs/max';
import React from 'react';
// import { Card } from 'antd';
import './index.less';
import { Breadcrumb} from 'antd';
import { iconFront } from '@/pages/system/menu/components/iconfont';
import { PageContainer } from '@ant-design/pro-components';
// import routes from './../../../config/routes';

const PageHeader: React.FC = () => {
  const location = useLocation();
  const intl = useIntl();

  const { initialState } = useModel('@@initialState');
  const menuData = initialState?.menuData || [];
  
  //查找 menuData tree 中 所有type 为page 的节点

  const getMenuItems = () => {
    const { pathname } = location;
    const pathnameArr = pathname.split('/');
    const menuNode: any = menuData.find(
      (item: any) => item.path.includes(pathnameArr[1]),
    );
    if (!menuNode) {
      const key = pathname.replace(/\//g, '.');
      return [{
        title: intl.formatMessage({ id: `menu${key}`, defaultMessage: '-' }),
      }];
    }

    if (menuNode.menuType === 'page') {
      return [
        {
          title: menuNode.name,
          href: menuNode.path,
        },
      ];
    }
    if (menuNode.menuType === 'group') {
      const pageNode = menuNode.routes.find((item: any) => item.path.includes(pathnameArr[2]));
      return [
        {
          title: <>
            <span>{iconFront[menuNode.icon]}</span>
            <span>{menuNode.name}</span>
          </>,
          menu: {
            items: menuNode.routes.map((item: {
              access: string,
              path: string,
              name: string
            }) => ({
              key: item.access,
              label: (<Link to={`${item.path}`}>{item.name}</Link>)
            }))
          }
        }, {
          title: pageNode.name,
        }
      ];
    }


  };

  return <PageContainer fixedHeader
    pageHeaderRender={() => (<div className="page-header">
      <Breadcrumb
        items={getMenuItems()}
      />
    </div>)} />;
};
export default PageHeader;