import { Content, Header } from "antd/es/layout/layout";
import "./layout.less";
import { Menu } from "antd";
import { Footer } from "antd/lib/layout/layout";
import { Outlet, useLocation, useNavigate } from "react-router";
import { HomeTwoTone } from "@ant-design/icons";
import { inject, observer } from "mobx-react";
import { Store } from "antd/es/form/interface";
import { useEffect } from "react";
const LayOut = (props: Store) => {
  const { usrStore } = props;
  const nav = useNavigate();
  const location = useLocation();
 
  useEffect(() => {
    console.log("layout ",usrStore.isNeedLogin);
    if (usrStore.isNeedLogin) {
      nav("/login");
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [usrStore.isNeedLogin]);
  const items = [
    {
      key: "/admin/user",
      label: `用户管理`,
      children: [
        {
          key: "/admin/dep",
          label: `部门管理`,
        },
        {
          key: "/admin/user",
          label: `用户管理`,
        },
        {
          key: "/admin/teamMgmt",
          label: `队伍属性管理`,
        },
        {
          key: "/admin/persMgmt",
          label: `个人身份管理`,
        },
        {
          key: "/admin/community",
          label: `社区管理`,
        },
        {
          key: "/admin/grid",
          label: `网格管理`,
        },
        {
          key: "/admin/patrolBrigade",
          label: `巡防大队`,
        },
      ],
    },
    {
      key: "/admin/archives/box",
      label: `档案管理`,
    },
    {
      key: "/admin/material",
      label: `物资管理`,
      children: [
        {
          key: "/admin/whse/whseMgmt",
          label: `仓库管理`,
        },
        {
          key: "/admin/materialMgmt",
          label: `物资管理`,
        },
      ],
    },
    {
      key: "/admin/leaveApproval",
      label: `请假审批`,
    },
    {
      key: "/admin/political",
      label: `政治法规`,
      children: [
        {
          key: "/admin/politicalStudy",
          label: `政治学习`,
        },
        {
          key: `/admin/polRegulations`,
          label: `政治法规管理`,
        },
      ],
    },
    {
      key: "/admin/task",
      label: `任务管理`,
      children: [
        { label: "处突任务", key: "/admin/emergency" },
        { label: "巡逻任务", key: "/admin/patrol" },
        { label: "训练任务", key: "/admin/training" },
      ],
    },
    {
      key: "/admin/sys",
      label: `系统管理`,
      children: [
        { label: "系统设置", key: "/admin/sys/setting" },
        { label: "光荣牌审核", key: "/admin/sys/gp" },
      ],
    },
  ];
  return (
    <div className="layout">
      <Header
        style={{
          position: "sticky",
          top: 0,
          zIndex: 9,
          width: "100%",
          display: "flex",
          alignItems: "center",
          padding: "0 10px",
          boxSizing: "border-box",
        }}
      >
        <HomeTwoTone
          onClick={() => nav("/")}
          style={{ fontSize: "36px", marginRight: "10px" }}
        />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={[location.pathname]}
          items={items}
          onClick={(e) => {
            nav(e.key);
          }}
          style={{ flex: 1, minWidth: 0 }}
        />
      </Header>
      <Content style={{ padding: "0 20px" }}>
        <Outlet />
      </Content>
      <Footer style={{ textAlign: "center" }}>
      双流区黄水镇人民政府 ©{new Date().getFullYear()} Created
      </Footer>
    </div>
  );
};

export default inject("usrStore")(observer(LayOut));