import AuthRoute from "@/components/AuthRoute";
import LeftBar from "@/components/LeftBar";
import NotFound from "@/components/NotFound";
import SpinLoding from "@/components/SpinLoding";
import React from "react";
import { useMemo } from "react";
import { Route, Switch } from "react-router-dom";
import styles from "./index.module.scss";
export default function System() {
  const data = useMemo(() => {
    return [
      {
        id: 1,
        name: "用户管理",
        Com: React.lazy(() => import("../SystemSon/System1")),
        path: "/system",
      },
      {
        id: 2,
        name: "角色管理",
        Com: React.lazy(() => import("../SystemSon/System2")),
        path: "/system/2",
      },
      {
        id: 3,
        name: "系统日志",
        Com: React.lazy(() => import("../SystemSon/System3")),
        path: "/system/3",
      },
    ];
  }, []);
  return (
    <div className={styles.System}>
      <div className="leftBar">
        <LeftBar data={data} />
      </div>
      {/* 三级路由页面 */}
      <div className="rightMain">
        <React.Suspense fallback={<SpinLoding />}>
          <Switch>
            {data.map((v, i) => (
              <AuthRoute
                exact
                // exact={i === 0 ? true : false}
                key={v.id}
                path={v.path}
                component={v.Com}
              />
            ))}
            {/* 查看页面，无需权限 */}
            {/* <AuthRoute path="/stores/3/look" component={LookStores3} /> */}
            {/* 新增 */}
            {/* {dataIn.map((v) => (
              <AuthRoute key={v.id} path={v.path} component={v.Com} />
            ))} */}
            <Route path="*" component={NotFound} />
          </Switch>
        </React.Suspense>
      </div>
    </div>
  );
}
