/*
 * @Author: cclu 1106109051@qq.com
 * @Date: 2025-02-25 11:39:58
 * @LastEditors: cclu 1106109051@qq.com
 * @LastEditTime: 2025-03-10 15:30:28
 * @FilePath: \umi4-admin-main\src\components\PageAccess.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import type { FC, ReactElement } from 'react';
import { connect, history, useLocation } from 'umi';
import { Button, Result } from 'antd';
import authority from '@/pages/authority';
import type { UserConnectedProps } from '@/models/user';

type Props = {
  children: ReactElement;
} & UserConnectedProps;

//处理页面权限的组件, 放置在所有需要鉴权的页面的最外层
const PageAccess: FC<Props> = (props): ReactElement | null => {
  const { user, children } = props;
  const { authority: userAuthority } = user;
  const { pathname } = useLocation();
  //可选操作符用来处理子路由跳转的情形, 因为这里的权限都是有效路由的权限,
  //当遇到输入的是菜单组件中可展开的节点的path的时候就没有权限了, 此时可能会报错,
  //加可选操作符可避免这个报错导致的页面渲染问题
  const accessible = authority[pathname]?.some((item: string) => userAuthority.includes(item));
  console.log('authority', authority);
  console.log('userAuthority', userAuthority);
  console.log('children', children);

  let res = children;

  if (!accessible) {
    res = (
      <Result
        title="403"
        status="403"
        subTitle="对不起, 您没有访问此页面的权限"
        extra={(
          <Button
            type="primary"
            onClick={
              () => history.push('/')
            }
          >返回首页</Button>
        )}
      />
    );
  }

  return res;
};

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