/*
 * @Author: cclu 1106109051@qq.com
 * @Date: 2025-02-27 15:55:46
 * @LastEditors: cclu 1106109051@qq.com
 * @LastEditTime: 2025-03-10 17:46:55
 * @FilePath: \umi4-admin-main\src\layouts\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import type { FC } from 'react';
import { useState, useEffect } from 'react';
import { Dropdown, Layout, Menu, Tabs, Tooltip } from 'antd';
import type { MenuProps } from 'antd';
import { Outlet, Link, useLocation, connect, history } from 'umi';
import PageAccess from '@/components/PageAccess';
import type { UserConnectedProps, UserModelState } from '@/models/user';
import LayoutWrapper from '@/components/LayoutWrapper';
import Nav from '@/components/Nav';
import Page404 from '@/pages/404';
import handleRecursiveNestedData from '@/utils/handleRecursiveNestedData';
import { MenuDataItem, ProLayout } from '@ant-design/pro-components';
import './index.less'
import logo from '../assets/logo.svg';
import upMenu from '@/assets/upMenu.svg'
import Icon, { DoubleRightOutlined, SmileOutlined } from '@ant-design/icons';
import { ProfileModelState } from '@/models/global';
import React from 'react';

const { Header, Content } = Layout;
const { TabPane } = Tabs;

/**
 * 获取openKeys的方法
 * @param currentLocation 当前位置, 由handleGetCurrentLocation方法返回
 * @returns openKeys
 */
const handleGetOpenKeys = (currentLocation: API.MenuItem[] | []): string[] => {
  //currentLocation为空
  if (!currentLocation.length) return [''];

  //currentLocation只有一项
  if (currentLocation.length === 1) {
    return currentLocation.map((item: API.MenuItem) => `${item.key}`);
  }

  const res = [];

  //currentLocation有多项, 只要前n-1项
  for (let i = 0; i < currentLocation.length - 1; i++) {
    res.push(`${currentLocation[i].key}`);
  }
  return res;
};

//自定义的layout页面, 顶部导航通栏+侧边栏(菜单)布局, 可根据需要做调整
const BasicLayout: FC<{ user: UserModelState, global: ProfileModelState, dispatch: any, location: any }> = (props) => {
  const [collapsed, setCollapsed] = useState(false);
  const { pathname } = useLocation();

  const {
    dispatch,
    user: {
      menu, rootSubmenuKeys, indexAllMenuItemById,
      indexValidMenuItemByPath
    },
    global: {
      tabsRoutes
    }
  } = props;

  console.log('props', props);
  console.log('pathname', pathname);
  console.log('indexValidMenuItemByPath', indexValidMenuItemByPath);
  const validMenuItem = indexValidMenuItemByPath[pathname];
  // const selectedKeys = validMenuItem?.key;
  const [activeKey, setActiveKey] = useState<string>(validMenuItem?.path || '/')

  //Menu中的selectedKeys和openKeys不是一回事:
  //openKeys:
  //当前展开的SubMenu菜单项key数组, 有子菜单的父菜单, 当selectedKeys为没子菜单的父菜单时该值应该设为[''],
  //也就是关闭所有有子菜单的父菜单;
  //selectedKeys:
  //当前选中的菜单项key数组, 有子菜单则是子菜单(叶子节点), 没有子菜单则是父菜单(一级菜单), 始终是可选中的

  //点击有子菜单的父菜单的回调
  // const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
  //   setOpenKeys(keys)
  //   dispatch({
  //     namespace: "global/setProfileData",
  //     payload: {
  //       keys
  //     }
  //   })
  // };

  //所有MenuItem:
  //有children的: 一定都有path, lable不动, children下的label修改为<Link to={path} />
  //无children的: 有path的label修改为<Link to={path} />, 没path的label不动
  const consumableMenu = handleRecursiveNestedData(
    menu,
    (item: API.MenuItem) => ({
      ...item,
      name: item.path
        ? (
          <Link
            to={item.path}
            style={{ color: pathname === item.path ? '#1890ff' : 'inherit' }}
            className={pathname === item.path ? 'ant-menu-item-selected' : ''}
          >{item.name}</Link>
        )
        : item.name,
    }),
  );
  // const consumableMenu: MenuDataItem[] = [
  //   {
  //     path: '/',
  //     name: 'Dashboard',
  //     icon: <SmileOutlined />,
  //   },
  //   {
  //     path: '/about',
  //     name: 'Users',
  //     icon: <SmileOutlined />,
  //     children: [
  //       {
  //         path: '/about/u',
  //         name: 'User List',
  //       },
  //       {
  //         path: '/about/m',
  //         name: 'User Profile',
  //       },
  //     ],
  //   },
  // ];
  const location = useLocation();


  // 改变panes
  const handleTabsPanes = (payload: any): void => {
    dispatch({
      type: 'global/changeTabsRoutes',
      payload: { data: payload, action: 'add' },
    });
  };

  // 关闭当前标签
  const handleEdit = (targetKey: string | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>, action: "add" | "remove"): void => {

    if (action === 'remove' && dispatch) {
      const index = tabsRoutes.findIndex((n: { path: string }) => n.path === targetKey)

      // 定位关闭当前标签后，需要选中的下一个标签
      // eslint-disable-next-line no-nested-ternary
      const nextkey = tabsRoutes[index + 1] ? tabsRoutes[index + 1].path : (tabsRoutes[index - 1] ? tabsRoutes[index - 1].path : '')
      history.push(nextkey || '/')
      setActiveKey(nextkey)

      // 缓存路由栈数据
      dispatch({
        type: 'global/changeTabsRoutes',
        payload: { data: [targetKey], action },
      })

    }
  }

  // 全部菜单一层的数组
  const oneFloorList = [
    {
      SYSTEMMODULE_DESC: "",
      guid: "1",
      hideInMenu: false,
      name: "生成标准页面",
      path: "/standard/index",
    },
    {
      SYSTEMMODULE_DESC: "",
      guid: "2",
      hideInMenu: false,
      name: "考评分类管理",
      path: "/examine/index",
    },
    {
      SYSTEMMODULE_DESC: "",
      guid: "3",
      hideInMenu: false,
      name: "考核问题管理",
      path: "/examine/question",
    },
    {
      SYSTEMMODULE_DESC: "",
      guid: "4",
      hideInMenu: false,
      name: "考核点位管理",
      path: "/examine/modal",
    },
    {
      SYSTEMMODULE_DESC: "",
      guid: "5",
      hideInMenu: false,
      name: "考核记录管理",
      path: "/examine/record",
    },
    {
      SYSTEMMODULE_DESC: "",
      guid: "6",
      hideInMenu: false,
      name: "菜单管理",
      path: "/setting/menu",
    }
  ]

  console.log('tabsRoutes', tabsRoutes);
  console.log('location', location);
  console.log('consumableMenu', consumableMenu);


  return (
    <LayoutWrapper>
      <ProLayout
        className={"pageLayout"}
        logo={logo}
        contentWidth={"Fluid"}
        fixedHeader={true}
        fixSiderbar={true}
        colorWeak={false}
        title={"驿商云平台"}
        pwa={false}
        iconfontUrl={'//at.alicdn.com/t/font_2794551_djdgwbunsvg.js'}
        footerRender={false}
        location={location}
        style={{ minHeight: '100vh' }}
        siderWidth={208}
        selectedKeys={[pathname]}
        defaultSelectedKeys={[pathname]}
        menuDataRender={() => consumableMenu}
        menuItemRender={(menuItemProps, defaultDom) => {
          if (menuItemProps.isUrl || !menuItemProps.path) {
            return defaultDom;
          }
          return (
            <Link to={menuItemProps.path}>{defaultDom}</Link>
          );
        }}
        subMenuItemRender={(menuItemProps) => {
          if (menuItemProps.icon && typeof menuItemProps.icon === 'string') {
            const ele = React.createElement(Icon[menuItemProps.icon])
            return <div className="ant-pro-menu-item">
              <span style={{ marginRight: 10 }} className="ant-pro-menu-item">{ele}</span>
              <span className='ant-pro-menu-item-title'>{menuItemProps.name}</span>
            </div>;
          }
          return <div>
            {menuItemProps.name}
          </div>;
        }}
        menuItemRender={(menuItemProps, defaultDom) => {
          if (
            menuItemProps.isUrl ||
            !menuItemProps.path ||
            location.pathname === menuItemProps.path
          ) {
            return defaultDom;
          }
          return <Link to={menuItemProps.path || '/'} onClick={() => {
          }}>
            {defaultDom}
            {/* {menuItemProps.name} */}
          </Link>;
        }}
        breadcrumbRender={false}
        itemRender={(route, params, routes, paths) => {
          const first = routes.indexOf(route) === 0;
          return first ? (
            <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
          ) : (
            <span>{route.breadcrumbName}</span>
          );
        }}
        actionsRender={() => <nav />}
        onPageChange={(location) => {
          console.log('location', location);

          if (location?.pathname && location?.pathname !== '/') {

            const nextModule: any = oneFloorList.filter(n => location?.pathname === n?.path)
            let title = ''
            if (nextModule && nextModule.length > 0) {
              title = nextModule[0].name
            }
            handleTabsPanes({ path: location?.pathname, key: location?.pathname, title: title })
            setActiveKey(location?.pathname || '')
          }
        }}
      >
        <Layout>
          <Header style={{ background: '#fff', height: '48px', padding: '0 16px' }}>
            <Nav />
          </Header>
          <Content>
            <Tabs
              hideAdd
              type="editable-card"
              onChange={(value) => {
                history.push(value)
                setActiveKey(value)
              }}
              activeKey={activeKey}
              onEdit={handleEdit}
              size="small"
              className='main-tab'
              tabBarExtraContent={
                <Tooltip title="关闭选项卡" placement="topRight">
                  <Dropdown overlay={
                    <Menu onClick={(targetKey) => {
                      let closeTabKeys: string[] = []
                      switch (targetKey.key) {
                        case 'other':
                          closeTabKeys = [...tabsRoutes.filter(n => n.path !== activeKey).map(n => n.path)];
                          break;
                        case 'now':
                          handleEdit(activeKey, 'remove')
                          return;
                        default:
                          closeTabKeys = [...tabsRoutes.map(n => n.path)];
                          history.push('/')
                          break;
                      }

                      dispatch({
                        type: 'global/changeTabsRoutes',
                        payload: { data: closeTabKeys, action: 'remove' },
                      })
                    }}>
                      <Menu.Item key="other">关闭其他标签</Menu.Item>
                      <Menu.Item key="now">关闭当前标签</Menu.Item>
                      <Menu.Item key="all">关闭全部标签</Menu.Item>
                    </Menu>
                  }
                    trigger={['click']}
                    placement="bottomRight"
                    arrow>
                    <div onClick={(e) => {
                      e.preventDefault()

                    }}>
                      <img style={{ width: '20px', height: '20px', cursor: 'pointer' }} src={upMenu} />
                    </div>
                  </Dropdown >
                </Tooltip>
              }
              moreIcon={<DoubleRightOutlined style={{ color: "#7b828c" }} />}
            >
              {tabsRoutes && tabsRoutes.map((item: any) =>
                <TabPane
                  tab={item.title} key={item?.path}
                  style={{ padding: 24, paddingTop: 0 }}>
                  {
                    //统一对所有有效路由做页面鉴权的处理
                    validMenuItem
                      ? (
                        <PageAccess>
                          <Outlet />
                        </PageAccess>
                      )
                      : <Page404 />
                  }
                </TabPane>)
              }
            </Tabs>

          </Content>
        </Layout>
      </ProLayout>
    </LayoutWrapper >
  );
};

export default connect(
  ({ user, global }: { user: UserConnectedProps['user'], global: any }) => ({
    user,
    global
  }),
)(BasicLayout);