import React, { useContext, useEffect } from 'react';
import { Row, Col, Button, Tabs, Spin, Result, Space } from 'antd';
import { ContainerOutlined, SearchOutlined } from '@ant-design/icons';
import { stores_Context } from '../config';
import { Line } from '@ant-design/charts';
import { observer } from 'mobx-react';
import DatePickerCharts from '../components/search/DatePickerCharts';
import { NavLink, useParams, Outlet, useOutlet, useLocation, useNavigate } from 'react-router-dom';
import * as comm from '../utils/commons';
import * as config from '../config';

const ProtectedRoute = ({ auth }) => {
  const { auth_store } = useContext(stores_Context);

  if (auth_store.has_permission(auth)) {
    return <Outlet />;
  }

  return (
    <div>
      <Result status="403" title="403 权限不足" subTitle={'试着联系一下技术，所需权限: ' + auth.toString()} extra={auth_store.user.name + '(' + auth_store.user.userid + ')'} />
    </div>
  );
};
export default observer(ProtectedRoute);