import {
	PageContainer as AntPageContainer,
	PageContainerProps,
} from '@ant-design/pro-components';
import { Access, history, useAccess } from '@umijs/max';
import { Button, Result } from 'antd';
import React from 'react';

interface PaginatorProps {
	children?: React.ReactNode;
	permission: string;
	fieldProps?: PageContainerProps;
}

const PageContainer: React.FC<PaginatorProps> = (props) => {
	const { permission } = props;
	const access = useAccess();

	return (
		<Access
			accessible={access.permission(permission)}
			fallback={
				<Result
					status={403}
					title={403}
					subTitle={'抱歉，你无权访问该页面'}
					extra={
						<Button type="primary" onClick={() => history.push('/')}>
							返回首页
						</Button>
					}
				/>
			}
		>
			<AntPageContainer {...props.fieldProps}>
				{props.children && props.children}
			</AntPageContainer>
		</Access>
	);
};

export default PageContainer;
