import React, { useEffect, useState, Fragment } from 'react';
import { Layout, Breadcrumb, Menu, Dropdown, Button } from 'antd';

import styles from './index.less';

const { Header, Content, Footer } = Layout;
const { SubMenu } = Menu;

import { history, withRouter } from 'umi';


function header(props) {

  const [selectKey, setSelectKey] = useState('');
  const [list, setList] = useState([
    { name: '可视化展示', key: '7', path: '/' },
    { name: '贷款企业管理', key: '4', path: '/enterpriseManagement' },
    { name: '金融机构管理', key: '5', path: '/financialManagement' },
    { name: '产业协同分析', key: '6', path: '/aaa' },
    {
      name: '系统管理', key: '1', path: '/system',
      children: [
        { name: '用户管理', key: '1-01', path: '/userManagement' },
        { name: '角色管理', key: '1-12', path: '/roleManagement' },
        { name: '菜单管理', key: '1-13', path: '/menuManagement' },
      ],
    },
  ]);

//核心是再这里监听路由变化高亮对应的菜单
  useEffect(() => {
    history.listen((routeInfo) => {
      const pathname = routeInfo.pathname.split('/');
      const path = '/' + pathname[pathname.length - 1];
      setSelectKey(path);
    });
  }, []);

  const handleClick = (e) => {
    setSelectKey(e.key);
    history.push(e.key);
  };
  /**
   *渲染树形菜单
   * @param list
   * @returns {*}
   */
  const renderMenu = (list) => {
    return list.map(item => {
      if (item.children && item.children.length > 0) {
        return <SubMenu key={item.path} title={item.name}>{renderMenu(item.children)}</SubMenu>;
      } else {
        return <Menu.Item key={item.path}>{item.name}</Menu.Item>;
      }
    });
  };
  /**
   * 用户信息展示
   */
  const menu = (
    <Menu>
      <Menu.Item>
        <a href=''>
          退出登录
        </a>
      </Menu.Item>
    </Menu>
  );

  return <Fragment>
    <div className={styles.header}>
      <Header>
        <div className={styles.logo}/>
        <Menu onClick={handleClick} theme='dark' selectedKeys={[selectKey]} mode="horizontal">
          {renderMenu(list)}
          <Menu.Item>
            <Dropdown overlay={menu} placement="bottomCenter">
              <span>用户名字</span>
            </Dropdown>
          </Menu.Item>
        </Menu>
      </Header>
    </div>
  </Fragment>;
}

export default withRouter(header);

import React, { useEffect, useState, Fragment } from 'react';
import { Layout, Breadcrumb, Menu, Dropdown, Button } from 'antd';
import styles from './index.less';

const { Header, Content, Footer } = Layout;
const { SubMenu } = Menu;

import { history, withRouter } from 'umi';

const list = [
  { name: '可视化展示', key: '7', path: '/' },
  { name: '贷款企业管理', key: '4', path: '/enterpriseManagement' },
  { name: '金融机构管理', key: '5', path: '/financialManagement' },
  { name: '产业协同分析', key: '6', path: '/aaa' },
  {
    name: '系统管理', key: '1', path: '/system',
    children: [
      { name: '用户管理', key: '1-01', path: '/userManagement' },
      { name: '角色管理', key: '1-12', path: '/roleManagement' },
      { name: '菜单管理', key: '1-13', path: '/menuManagement' },
    ],
  },
];

class Index extends React.Component {


  constructor(props) {
    super(props);
    this.state = {
      selectKey: '',
    };
  }

  /**
   * 高亮对应的菜单
   */
  heightMenu = () => {
    const pathname = this.props.location.pathname.split('/');
    const path = '/' + pathname[pathname.length - 1];
    this.setState({ selectKey: path });
  };
 //核心组件加载完成获取pathname，然后去setState设置当前选中的key
  componentDidMount() {
    this.heightMenu();
  }
　　//当切换路由时候对比上一个props里面的location是不是等于当前的路由呀，然后对应操作就行啦
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.location !== this.props.location) {
      this.heightMenu();
    }
  }

  handleClick = (e) => {
    history.push(e.key);
  };

  /**
   * 树形菜单
   * @param list
   * @returns {*}
   */
  renderMenu = (list) => {
    return list.map(item => {
      if (item.children && item.children.length > 0) {
        return <SubMenu key={item.path} title={item.name}>{this.renderMenu(item.children)}</SubMenu>;
      } else {
        return <Menu.Item key={item.path}>{item.name}</Menu.Item>;
      }
    });
  };


  render() {
    return (
      <Fragment>
        <div className={styles.header}>
          <Header>
            <div className={styles.logo}/>
            <Menu onClick={this.handleClick} theme='dark' selectedKeys={[this.state.selectKey]} mode="horizontal">
              {this.renderMenu(list)}
              <Menu.Item>
                <Dropdown overlay={<Menu>
                  <Menu.Item>
                    <a href=''>
                      退出登录
                    </a>
                  </Menu.Item>
                </Menu>} placement="bottomCenter">
                  <span>用户名字</span>
                </Dropdown>
              </Menu.Item>
            </Menu>
          </Header>
        </div>
      </Fragment>
    );
  }
}

export default withRouter(Index);