import React, { useEffect, useState } from "react";
import { Menu } from "antd";
// import { useSelector } from "react-redux";
import { useNavigate, useLocation } from "react-router-dom";
// import styles from "./index.module.less";
// import logo from "../../assets/logo.png";

function getItem(
  label: any,
  key: any,
  icon: any,
  children: any,
  type: any,
  // permission: any
) {
  return {
    key,
    icon,
    children,
    label,
    type,
    // permission,
  };
}
const items = [
  getItem(
    "首页概览",
    "/",
    <i className={`iconfont icon-icon-home`} />,
    null,
    null,
  ),
  getItem(
    "人员总览",
    "/staff",
    <i className="iconfont icon-icon-category" />,
    null,
    null,
  ),
  getItem(
    "训练计划",
    "/plan",
    <i className="iconfont icon-icon-user" />,
    [
      getItem("周训练计划", "/plan/weekplan", null, null, null),
      getItem("月训练计划", "/plan/monthplan", null, null, null),
    ],
    null,
  ),
  getItem(
    "每日填报",
    "/daily",
    <i className="iconfont icon-icon-user" />,
    null,
    null,
  ),
  getItem(
    "考核成绩",
    "/assessment",
    <i className="iconfont icon-icon-user" />,
    [
      getItem("岗位", "/assessment/positionassessment", null, null, null),
      getItem("共同", "/assessment/commonassessment", null, null, null),
      getItem("体育", "/assessment/sportsassessment", null, null, null),
    ],
    null,
  ),
  getItem(
    "系统设置",
    "/admin",
    <i className="iconfont icon-icon-user" />,
    [
      getItem("基本设置", "/admin/base-setting", null, null, null),
      getItem("用户管理", "/admin/user", null, null, null),
      getItem("组织架构", "/admin/department", null, null, null),
      getItem("角色管理", "/admin/role", null, null, null),
      getItem("考核标准管理", "/admin/assessment-standard", null, null, null),
    ],
    null,
  ),
];

const NavigationMenu: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const children2Parent: any = {
    "^/plan/weekplan": ["/plan"],
    "^/plan/monthplan": ["/plan"],
    // 添加考核成绩子路径的匹配规则
    "^/assessment/positionassessment": ["/assessment"],
    "^/assessment/commonassessment": ["/assessment"],
    "^/assessment/sportsassessment": ["/assessment"],
    "^/admin/base-setting": ["/admin"],
    "^/admin/department": ["/admin"],
    "^/admin/role": ["/admin"],
    "^/admin/assessment-standard": ["/admin"],
    "^/admin/user": ["/admin"],
  };

  // 同时在 useEffect 中更新路径判断逻辑
  useEffect(() => {
    if (location.pathname.indexOf("/staff") !== -1) {
      setSelectedKeys(["/staff"]);
      setOpenKeys(openKeyMerge("/staff"));
    } else if (
      // 添加考核成绩路径的判断
      location.pathname.startsWith("/assessment/") ||
      location.pathname === "/plan/weekplan" ||
      location.pathname === "/plan/monthplan"
    ) {
      setSelectedKeys([location.pathname]);
      setOpenKeys([location.pathname.split('/').slice(0, 2).join('/')]);
    } else if (
      location.pathname.startsWith("/admin/")
    ) {
      setSelectedKeys([location.pathname]);
      setOpenKeys([location.pathname.split('/').slice(0, 2).join('/')]);
    } else {
      setSelectedKeys([location.pathname]);
      setOpenKeys(openKeyMerge(location.pathname));
    }
  }, [location.pathname]);

  const hit = (pathname: string): string[] => {
    for (const p in children2Parent) {
      if (pathname.search(p) >= 0) {
        return children2Parent[p];
      }
    }
    return [];
  };

  const openKeyMerge = (pathname: string): string[] => {
    const newOpenKeys = hit(pathname);
    for (let i = 0; i < openKeys.length; i++) {
      let isIn = false;
      for (let j = 0; j < newOpenKeys.length; j++) {
        if (newOpenKeys[j] === openKeys[i]) {
          isIn = true;
          break;
        }
      }
      if (isIn) {
        continue;
      }
      newOpenKeys.push(openKeys[i]);
    }
    return newOpenKeys;
  };

  // 选中的菜单
  const [selectedKeys, setSelectedKeys] = useState<string[]>([
    location.pathname,
  ]);
  // 展开菜单
  const [openKeys, setOpenKeys] = useState<string[]>(hit(location.pathname));
  // const permissions = useSelector(
  //   (state: any) => state.loginUser.value.permissions
  // );
  const [activeMenus, setActiveMenus] = useState<any>(items);

  const onClick = (e: any) => {
    navigate(e.key);
  };
  // console.log(items)
  useEffect(() => {
    setActiveMenus(items);
    // console.log(activeMenus)
  }, [items])
  // useEffect(() => {
  //   checkMenuPermissions(items, permissions);
  // }, [items, permissions]);

  // const checkMenuPermissions = (items: any, permissions: any) => {
  //   const menus: any = [];
  //   if (permissions.length === 0) {
  //     setActiveMenus(menus);
  //     return;
  //   }

  //   for (const i in items) {
  //     const menuItem = items[i];
  //     // 一级菜单=>没有子菜单&配置了权限
  //     if (menuItem.children === null) {
  //       if (
  //         menuItem.permission !== null &&
  //         typeof permissions[menuItem.permission] === "undefined"
  //       ) {
  //         continue;
  //       }
  //       menus.push(menuItem);
  //       continue;
  //     }
  //     const children = [];

  //     for (const j in menuItem.children) {
  //       const childrenItem = menuItem.children[j];

  //       if (
  //         typeof permissions[childrenItem.permission] !== "undefined" ||
  //         !childrenItem.permission
  //       ) {
  //         // 存在权限
  //         children.push(childrenItem);
  //       }
  //     }

  //     if (children.length > 0) {
  //       menus.push(Object.assign({}, menuItem, { children: children }));
  //     }
  //   }
  //   setActiveMenus(menus);
  // };

  useEffect(() => {
    if (location.pathname.indexOf("/staff") !== -1) {
      setSelectedKeys(["/staff"]);
      setOpenKeys(openKeyMerge("/staff")); // 修正为当前路径的父级
    } else if (
      location.pathname === "/weekplan" ||
      location.pathname === "/monthplan"
    ) {
      setSelectedKeys([location.pathname]);
      setOpenKeys(["/plan"]); // 直接展开训练计划父菜单
    } else {
      setSelectedKeys([location.pathname]);
      setOpenKeys(openKeyMerge(location.pathname));
    }
  }, [location.pathname]);

  return (
    <div className='w-[200px] h-full bg-#fff'>
      <div
        style={{
          textDecoration: "none",
          cursor: "pointer",
          position: "sticky",
          top: 0,
          zIndex: 10,
          background: "#fff",
        }}
        onClick={() => {
          window.location.href = "/";
        }}
      >
        {/* 此处为版权标识，严禁删改
        <img src={logo}  className="w-[124px] h-[40px]"/> */}
      </div>
      <div className='w-[200px] h-[calc(100%-74px)] overflow-y-auto overflow-x-hidden'>
        <Menu
          onClick={onClick}
          style={{
            width: 200,
            background: "#ffffff",
          }}
          selectedKeys={selectedKeys}
          openKeys={openKeys}
          mode="inline"
          items={activeMenus}
          onSelect={(data: any) => {
            setSelectedKeys(data.selectedKeys);
          }}
          onOpenChange={(keys: any) => {
            setOpenKeys(keys);
          }}
        />
      </div>
    </div>
  );
};

export default NavigationMenu;


















// import { Menu } from "antd";
// import { useNavigate, useLocation } from "react-router-dom";

// export default function NavigationMenu() {
//     const navigate = useNavigate();
//     const location = useLocation();
//     console.log(location.pathname);
//     // 导航菜单项配置
//   const menuItems = [
//     { key: 'staff', label: '人员总览', path: '/' }, // 将path改为根路径
//     { key: 'plan', label: '培训计划', path: '/plan' },
//     { key: 'day', label: '每日填报', path: '/daily' },
//     { key: 'exam', label: '考核成绩', path: '/exam' },
//   ];

//   return (
//     <>
//         <Menu
//           theme="dark"
//           mode="inline"
//           className="!bg-transparent !border-0 pt-4 [&_.ant-menu-item]:!mt-2"
//           selectedKeys={[ // 改用selectedKeys替代defaultSelectedKeys
//             menuItems.find((item) => location.pathname.startsWith(item.path))?.key,
//           ]}
//         >
//           {menuItems.map((item) => (
//             <Menu.Item
//               key={item.key}
//               className="!h-14 !flex !items-center !text-gray-300 hover:!text-white group !rounded-lg mx-4"
//               onClick={() => navigate(item.path)}
//             >
//               <div className="flex items-center justify-center w-full px-4 transition-all duration-300 h-full rounded-lg">
//                 <span className="text-xl font-medium">{item.label}</span>
//               </div>
//             </Menu.Item>
//           ))}
//         </Menu>
//     </>
//   );
// }