import styles from "./index.module.scss";
import LeftBar from "@/components/LeftBar";
import React, { useEffect, useMemo, useState } from "react";
import SpinLoding from "@/components/SpinLoding";
import { Route, Switch } from "react-router-dom";
import AuthRoute from "@/components/AuthRoute";
import NotFound from "@/components/NotFound";
import history from "@/utils/history";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import { getStores1ListAPI } from "@/store/action/stores1";

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

const LookObject4 = React.lazy(
  () => import("../ObjectSon/Object4/LookObject4")
);
const LookObject5 = React.lazy(
  () => import("../ObjectSon/Object5/LookObject5")
);
const LookObject6 = React.lazy(
  () => import("../ObjectSon/Object6/LookObject6")
);

export default function Object() {
  const dispatch = useDispatch();
  // 进入馆藏管理的时候调用仓库数据
  useEffect(() => {
    dispatch(getStores1ListAPI());
  }, [dispatch]);

  const powerInfo = useSelector(
    (state: RootState) => state.loginStore.authPageArr
  );

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

  const dataInTemp = useMemo(() => {
    return [
      {
        id: 1001,
        done: false,
        name: "藏品登记新增",
        Com: React.lazy(() => import("../ObjectSon/Object1/AddObject1")),
        path: "/object/1/add",
      },
      {
        id: 1002,
        done: false,
        name: "藏品登记审核",
        Com: React.lazy(() => import("../ObjectSon/Object1/AuditObject1")),
        path: "/object/1/audit",
      },
      {
        id: 3001,
        done: false,
        name: "入库管理新增",
        Com: React.lazy(() => import("../ObjectSon/Object3/AddObject3")),
        path: "/object/3/add",
      },
      {
        id: 3002,
        done: false,
        name: "入库管理审核",
        Com: React.lazy(() => import("../ObjectSon/Object3/AuditObject3")),
        path: "/object/3/audit",
      },
      {
        id: 4001,
        done: false,
        name: "出库管理新增",
        Com: React.lazy(() => import("../ObjectSon/Object4/AddObject4")),
        path: "/object/4/add",
      },
      {
        id: 4002,
        done: false,
        name: "出库管理审核",
        Com: React.lazy(() => import("../ObjectSon/Object4/AuditObject4")),
        path: "/object/4/audit",
      },
      {
        id: 5001,
        done: false,
        name: "出库管理审核",
        Com: React.lazy(() => import("../ObjectSon/Object5/AuditObject5")),
        path: "/object/5/audit",
      },
      {
        id: 6001,
        done: false,
        name: "藏品注销新增",
        Com: React.lazy(() => import("../ObjectSon/Object6/AddObject6")),
        path: "/object/6/add",
      },
      {
        id: 6002,
        done: false,
        name: "藏品注销审核",
        Com: React.lazy(() => import("../ObjectSon/Object6/AuditObject6")),
        path: "/object/6/audit",
      },
    ];
  }, []);

  const [data, setData] = useState(dataTemp);
  const [dataIn, setDadaIn] = useState(dataInTemp);

  useEffect(() => {
    powerInfo.forEach((v: any) => {
      if (v.id === 100) {
        dataTemp[0].done = true;
        v.children.forEach((v2: any) => {
          if (v2.id === 102 && v2.authority) dataInTemp[0].done = true;
          if (v2.id === 105 && v2.authority) dataInTemp[1].done = true;
        });
      }
      if (v.id === 200) dataTemp[1].done = true;
      if (v.id === 300) {
        dataTemp[2].done = true;
        v.children.forEach((v2: any) => {
          if (v2.id === 302 && v2.authority) dataInTemp[2].done = true;
          if (v2.id === 305 && v2.authority) dataInTemp[3].done = true;
        });
      }
      if (v.id === 400) {
        dataTemp[3].done = true;
        v.children.forEach((v2: any) => {
          if (v2.id === 402 && v2.authority) dataInTemp[4].done = true;
          if (v2.id === 405 && v2.authority) dataInTemp[5].done = true;
        });
      }
      if (v.id === 500) {
        v.children.forEach((v2: any) => {
          if (v2.id === 505 && v2.authority) dataInTemp[6].done = true;
        });
        dataTemp[4].done = true;
      }
      if (v.id === 600) {
        dataTemp[5].done = true;
        v.children.forEach((v2: any) => {
          if (v2.id === 602 && v2.authority) dataInTemp[7].done = true;
          if (v2.id === 605 && v2.authority) dataInTemp[8].done = true;
        });
      }
    });
    setData(dataTemp.filter((v) => v.done));
    setDadaIn(dataInTemp.filter((v) => v.done));
  }, [dataInTemp, dataTemp, powerInfo]);

  useEffect(() => {
    // 没有藏品登记页面的权限 跳到有权限的页面
    if (data[0].id !== 1) {
      // 并且不是从藏品总账里面点击操作记录的查看进来
      if (!window.location.href.includes("look")) history.replace(data[0].path);
    }
  }, [data]);

  return (
    <div className={styles.Object}>
      <div className="leftBar">
        <LeftBar data={data} />
      </div>
      {/* 三级路由页面 */}
      <div className="rightMain">
        <React.Suspense fallback={<SpinLoding />}>
          <Switch>
            {data.map((v: any, i: number) => (
              <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} />
            <AuthRoute path="/object/3/look" component={LookObject3} />
            <AuthRoute path="/object/4/look" component={LookObject4} />
            <AuthRoute path="/object/5/look" component={LookObject5} />
            <AuthRoute path="/object/6/look" component={LookObject6} />

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

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