import { Layout, ConfigProvider } from "antd";
import MenuBar from "./components/MenuBar";
import ToolBar from "./components/ToolBar";
import Footer from "./components/Footer";
import Config from "./components/Config";
import Content from "./components/Content";
import styles from "./index.less";
import { useModel } from "umi";
import { useEffect } from "react";
export default function HomePage() {
  const { showRightPanel } = useModel("appModel");

  useEffect(() => {
    document.addEventListener(
      "mousewheel",
      function (e: any) {
        // 判断是否按下ctrl
        if (e.ctrlKey) {
          // 阻止默认事件
          e.preventDefault();
        }
      },
      { capture: false, passive: false }
    );
    document.addEventListener(
      "keydown",
      function (event) {
        if (
          (event.ctrlKey === true || event.metaKey === true) &&
          (event.keyCode === 61 ||
            event.keyCode === 107 ||
            event.keyCode === 173 ||
            event.keyCode === 109 ||
            event.keyCode === 187 ||
            event.keyCode === 189 ||
            event.keyCode === 80)
        ) {
          event.preventDefault();
        }
      },
      false
    );
  }, []);

  return (
    <ConfigProvider
      prefixCls="shalu"
      theme={{
        token: {
          // colorPrimary: "#000",
        },
        components: {
          Tabs: {
            itemActiveColor: "#000",
            inkBarColor: "#000",
            itemSelectedColor: "#000",
            itemColor: "#999",
            itemHoverColor: "#000",
          },
        },
      }}
    >
      <Layout className={styles.layout}>
        {/* 菜单栏 */}
        <Layout.Header className={styles.header}>
          <MenuBar />
        </Layout.Header>

        {/* 工具栏 */}
        <ToolBar />

        <Layout.Content className={styles.content}>
          <Layout className="h-full">
            <Layout.Content className={styles.content}>
              <div className={styles.contentCenter}>
                <Content />
              </div>
              <Footer />
            </Layout.Content>
            {/* 右侧配置表单 */}
            <Layout.Sider
              className={styles.config}
              width={showRightPanel ? 280 : 0}
            >
              <Config />
            </Layout.Sider>
          </Layout>
        </Layout.Content>
      </Layout>
    </ConfigProvider>
  );
}
