import styles from "./index.module.scss";
import LeftBar from "@/components/LeftBar";
import React, { useMemo } from "react";
import SpinLoding from "@/components/SpinLoding";
import { Route, Switch } from "react-router-dom";
import AuthRoute from "@/components/AuthRoute";
import NotFound from "@/components/NotFound";

const LookObject1 = React.lazy(
  () => import("../ObjectSon/Object1/LookObject1")
);
const LookObject2 = React.lazy(
  () => import("../ObjectSon/Object2/LookObject2")
);

export default function Object() {
  const data = useMemo(() => {
    return [
      {
        id: 1,
        name: "藏品登记",
        Com: React.lazy(() => import("../ObjectSon/Object1")),
        path: "/object",
      },
      {
        id: 2,
        name: "藏品总账",
        Com: React.lazy(() => import("../ObjectSon/Object2")),
        path: "/object/2",
      },
      {
        id: 3,
        name: "入库管理",
        Com: React.lazy(() => import("../ObjectSon/Object3")),
        path: "/object/3",
      },
      {
        id: 4,
        name: "出库管理",
        Com: React.lazy(() => import("../ObjectSon/Object4")),
        path: "/object/4",
      },
      {
        id: 5,
        name: "藏品修改",
        Com: React.lazy(() => import("../ObjectSon/Object5")),
        path: "/object/5",
      },
      {
        id: 6,
        name: "藏品注销",
        Com: React.lazy(() => import("../ObjectSon/Object6")),
        path: "/object/6",
      },
    ];
  }, []);

  const dataIn = useMemo(() => {
    return [
      {
        id: 1001,
        name: "藏品登记新增",
        Com: React.lazy(() => import("../ObjectSon/Object1/AddObject1")),
        path: "/object/1/add",
      },
      {
        id: 1002,
        name: "藏品登记审核",
        Com: React.lazy(() => import("../ObjectSon/Object1/AuditObject1")),
        path: "/object/1/audit",
      },
    ];
  }, []);

  return (
    <div className={styles.Object}>
      <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="/object/1/look" component={LookObject1} />
            <AuthRoute path="/object/2/look" component={LookObject2} />

            {/* 新增 */}
            {dataIn.map((v) => (
              <AuthRoute key={v.id} path={v.path} component={v.Com} />
            ))}

            <Route path="*" component={NotFound} />
          </Switch>
        </React.Suspense>
      </div>
    </div>
  );
}