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

const LookStores3 = React.lazy(
  () => import("../StoresSon/Stores3/LookStores3")
);

export default function Stores() {
  const dataTemp = useMemo(() => {
    return [
      {
        id: 1,
        done: false,
        name: "库房设置",
        Com: React.lazy(() => import("../StoresSon/Stores1")),
        path: "/stores",
      },
      {
        id: 2,
        done: true,
        name: "统计报表",
        Com: React.lazy(() => import("../StoresSon/Stores2")),
        path: "/stores/2",
      },
      {
        id: 3,
        done: false,
        name: "藏品移库",
        Com: React.lazy(() => import("../StoresSon/Stores3")),
        path: "/stores/3",
      },
    ];
  }, []);

  const dataInTemp = useMemo(() => {
    return [
      {
        id: 1001,
        done: false,
        name: "藏品移库审核",
        Com: React.lazy(() => import("../StoresSon/Stores3/AuditStores3")),
        path: "/stores/3/audit",
      },
    ];
  }, []);

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

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

  useEffect(() => {
    powerInfo.forEach((v: any) => {
      if (v.id === 700) dataTemp[0].done = true;
      if (v.id === 800) {
        v.children.forEach((v2: any) => {
          if (v2.id === 805 && v2.authority) dataInTemp[0].done = true;
        });
        dataTemp[2].done = true;
      }
    });
    setData(dataTemp.filter((v) => v.done));
    setDataIn(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.Stores}>
      <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>
  );
}
