import React, { useState } from "react";
import { Layout } from "antd";
import { Header, Menu, Footer, Bread } from "@/components/Layout";
import { Outlet } from "react-router-dom";

import "./BaseLayout.less";

// const { Header, Footer, Sider, Content } = Layout;

function BaseLayout(): JSX.Element  {
  const [collapsed, setCollapsed] = useState(false); // 菜单栏是否收起
  return (
      <div className="base-layout">
        <Layout className='layout-box'>
          <Menu 
            collapsed={collapsed}
          ></Menu>
          <Layout className='content-layout-box' >
            <Header collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)}></Header>
            <div className='content-box-all'>
              <Layout.Content className='content-box'>
                  <Bread></Bread>
                  <div className='content'>
                    <div className='content-in'>
                      <Outlet />
                    </div>
                  </div>
              </Layout.Content>
              <Footer></Footer>
            </div>
          </Layout>
        </Layout>
      </div>
  );
}

export default BaseLayout;