import React, { PureComponent } from "react";
import { Breadcrumb, Icon } from "antd";
import { connect } from "dva";
import { Link, routerRedux } from "dva/router";
import styles from "./index.less";
import MenuDatas from "../../layouts/buyer/menuDatas.json";

class BreadcrumbPackage extends PureComponent {
  constructor(props) {
    super(props);
  }
  matchMenuPath(menuPath) {
    const { searchParam } = this.props;
    const items = [];
    for (let i = 0; i < MenuDatas.length; i++) {
      const firstMenu = MenuDatas[i];
      let secondMenu = null;
      let currMenu = null;
      if (firstMenu.children) {
        const secondMenus =  firstMenu.children;
        currMenu = secondMenus.find(
          item => (item.path == menuPath || item.path == (menuPath + searchParam))
        );
        if (currMenu && currMenu.key) {
          items.push(firstMenu);
          items.push(currMenu);
          return items;
        } else {
          for (let j = 0; j < secondMenus.length; j++) {
            secondMenu = secondMenus[j];
            if (secondMenu.children) {
              currMenu = secondMenu.children.find(
                item => (item.path == menuPath || item.path == (menuPath + searchParam))
              );
              if (currMenu && currMenu.key) {
                items.push(firstMenu);
                items.push(secondMenu);
                items.push(currMenu);
                return items;
              }
            }
          }
        }
      }
    }
    return [];
  }
  render() {
    const { dispatch, menuItemPath, additems } = this.props;
    let menuPath = menuItemPath;
    if (!menuPath) {
      menuPath = localStorage.getItem("menuItemPath");
    }
    const getBreadcrumbHtml = () => {
      if (!menuPath && !(additems && additems.length > 0)) {
        dispatch(
          routerRedux.push({
            pathname: "/"
          })
        );
      }
      let items = [];
      if (menuPath) {
        const length = menuPath.split("/").length;
        for (let i = length - 1; i >= 2; i--) {
          items = this.matchMenuPath(menuPath);
          if (items && items.length > 0) break;
          menuPath = menuPath.substring(0, menuPath.lastIndexOf("/"));
        }
      }
      if (additems) {
        items = items.concat(additems);
      }
      const length = items.length - 1;
      return items.map((item, index) => {
        if (item.path && index < length) {
          return (
            <Breadcrumb.Item key={item.key}>
              <Link to={item.path}>{item.title}</Link>
            </Breadcrumb.Item>
          );
        } else {
          return <Breadcrumb.Item key={item.key}>{item.title}</Breadcrumb.Item>;
        }
      });
    };
    return (
      <div className={styles.classHead}>
        <Breadcrumb separator={<Icon type="right" />}>
          <Breadcrumb.Item>
            <Link to="/">首页</Link>
          </Breadcrumb.Item>
          {getBreadcrumbHtml()}
        </Breadcrumb>
      </div>
    );
  }
}
export default connect(state => ({
  menuItemPath: state.global.menuItem.menuItemPath,
  searchParam: state.global.menuItem.searchParam || "",
  additems: state.global.additems
}))(BreadcrumbPackage);
