/*
 * @Author: dengchao 754083046@qq.com
 * @Date: 2022-05-09 11:19:45
 * @LastEditors: dengchao 754083046@qq.com
 * @LastEditTime: 2023-02-06 17:06:06
 * @FilePath: \maintenance\src\components\GlobalHeader\RightContent.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useContext, useState, useEffect } from 'react';
import { RouteContext } from '@ant-design/pro-layout';
import { Breadcrumb } from 'antd';
import check from '@/components/Authorized/CheckPermissions';
import { Link, useLocation, matchPath } from 'react-router-dom';
import HeaderSearch from '../HeaderSearch';
import Colophon from '../Colophon';
import Avatar from './AvatarDropdown';
import styles from './index.less';

const routesOptions = route => {
  const buildOption = routeConfig => ({
    label: <Link to={routeConfig.path}>{routeConfig.name}</Link>,
    value: routeConfig.name,
  });
  return route.routes
    .map(r => {
      if (r.hideMenu) return null;
      if (r.authority) {
        if (r.routes) {
          return routesOptions(r);
        }
        return check(r.authority, buildOption(r), null);
      }
      if (r.routes) {
        return routesOptions(r);
      }
      return buildOption(r);
    })
    .flat()
    .filter(Boolean);
};

const GlobalHeaderRight = props => {
  const { theme, layout } = props;
  const [dosRouter, setDosRouter] = useState('');
  const [breadCrumbsRoutes, setBreadCrumbsRoutes] = useState([]);
  const { pathname } = useLocation();

  let className = styles.right;
  const value = useContext(RouteContext);
  useEffect(() => {
    // console.log(pathname, props.routes, props.history, 'location');
    // console.log(flattenRoutes(props.routes), 'flate');
    let list = getBreadcrumbs();
    // console.log(list, 'list');
    setBreadCrumbsRoutes(list);
    // console.log(value.breadcrumb.routes, 'value');
    setDosRouter(pathname);
  }, [pathname]);

  if (theme === 'dark' && layout === 'top') {
    className = `${styles.right}  ${styles.dark}`;
  }
  const flattenRoutes = arr => {
    return arr.reduce((res, next) => {
      return res.concat(Array.isArray(next.routes) ? [next, ...flattenRoutes(next.routes)] : next);
    }, []);
  };
  const getBreadcrumbs = () => {
    // 初始化匹配数组match
    let matches = [];
    pathname
      // 取得路径名，然后将路径分割成每一路由部分.
      .split('?')[0]
      .split('/')
      // 对每一部分执行一次调用`getBreadcrumb()`的reduce.
      .reduce((prev, curSection) => {
        // 将最后一个路由部分与当前部分合并，比如当路径为 `/x/xx/xxx` 时，pathSection分别检查 `/x` `/x/xx` `/x/xx/xxx` 的匹配，并分别生成面包屑
        const pathSection = `${prev}/${curSection}`;
        // 对于 拆分的路径，从 flattenRoutes 中查找对应的路由
        const breadcrumb = getBreadcrumb(flattenRoutes(props.routes), curSection, pathSection);

        // 将面包屑导入到matches数组中
        matches.push(breadcrumb);

        // 传递给下一次reduce的路径部分
        return pathSection;
      });
    return matches;
  };
  const getBreadcrumb = (routes, curSection, pathSection) => {
    let matchRoute = routes.find(ele => {
      const { path } = ele;
      return matchPath(pathSection, { path, exact: true });
    });

    return {
      breadcrumbName: matchRoute?.name,
      path: matchRoute?.path,
      component: matchRoute?.component,
    };
  };
  const itemRender = (route, params, routes, paths) => {
    const last = routes.indexOf(route) === routes.length - 1;
    return <span>{route.breadcrumbName}</span>;
    // return last ? (
    //   <span>{route.breadcrumbName}</span>
    // ) : (
    //   <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
    // );
  };
  return (
    <div className={className}>
      {/* <span className={styles.left}>{value.title}</span> */}
      {/* <Breadcrumb
        routes={value.breadcrumb.routes}
        // {...value.breadcrumb}
        className={styles.lineHeight}
      /> */}
      <Breadcrumb
        routes={breadCrumbsRoutes}
        itemRender={itemRender}
        className={styles.lineHeight}
      />
      <div style={{ flex: 1 }} />
      {/* <div style={{ margin: '0 10px' }}>
        <a
          target="_blank"
          href={`${window.location.origin}/civmanage/site/content${dosRouter}`}
          rel="noopener noreferer"
        >
          文档说明
        </a>
      </div> */}
      {/* <Colophon /> */}
      {/* <div style={{ margin: '0 10px' }}>
        <a
          target="_blank"
          href={`${window.location.origin}/cityoms3/4.0.html`}
          rel="noopener noreferer"
        >
          运维平台4.0
        </a>
      </div> */}
      {/* <HeaderSearch
        className={`${styles.action} ${styles.search} ${styles.toRight}`}
        placeholder="站内搜索"
        defaultValue=""
        filterOption={(inputValue, option) =>
          option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
        }
        options={[...routesOptions(value.route)]}
      /> */}
      {/* <NoticeIcon className={`${styles.action} ${styles.toRight}`} /> */}
      <Avatar className={styles.toRight} />
      {/* <SelectLang className={styles.action} /> */}
    </div>
  );
};

export default GlobalHeaderRight;
