import React, { useEffect, useState, useRef } from 'react';
import { useModel, useLocation, history, FormattedMessage } from 'umi';
import styles from './index.less';
import { Select, Spin } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

export default () => {
  const location = useLocation();
  const [pathList, setPathList] = useState([]);

  useEffect(() => {
    var pathname = location.pathname;
    var list = location.pathname.split('/');
    var list2 = list.slice(1, list.length - 1);
    setPathList(
      list2.map((item, index, originList) => {
        return {
          path: item,
          id: ['menu', ...originList.slice(0, index + 1)].join('.'),
        };
      }),
    );
  }, [location]);
  const pathClick = (item, index, originList) => {
    var list2 = originList.slice(0, index + 1);
    var pathstr = list2
      .map((ele) => {
        return ele.path;
      })
      .join('/');
    history.push(`/${pathstr}`);
  };
  return (
    <div>
      {pathList.map((item, index, originList) => {
        return (
          <div
            className={styles.ntitle}
            key={item.path}
            onClick={() => {
              pathClick(item, index, originList);
            }}
          >
            <FormattedMessage id={`${item.id}`} />
          </div>
        );
      })}
    </div>
  );
};
