import { defineComponent, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import { Layout, Menu } from "ant-design-vue";
import { css } from "@linaria/core";

import { menuData } from "@/pages/website/routes";
import { useCtx } from "@/pages/website/context";

const { Header, Sider, Content } = Layout;

export default defineComponent({
  setup() {
    const ctx = useCtx();
    const state = reactive({
      menuKey: ["/backend/upload"],
    });

    const menuChange = (keyPath: any) => {
      state.menuKey = keyPath;
    };

    onMounted(() => {
      const data = useRoute();
      state.menuKey = [data.path];
      ctx.list.backendList.loadPage(1, 1000);
    });

    return () => (
      <Layout class={HomeStyle}>
        <Sider width={200} trigger={null} collapsible>
          <div class="layout_menu">
            <Menu
              theme="dark"
              selectedKeys={state.menuKey}
              mode="inline"
              onSelect={(item: any) => {
                menuChange(item.keyPath);
              }}
            >
              {menuData?.children &&
                menuData.children.map((menu: any) => {
                  return (
                    <Menu.Item key={menu.path}>
                      <router-link to={menu.path}>
                        {menu.meta.title}
                      </router-link>
                    </Menu.Item>
                  );
                })}
            </Menu>
          </div>
        </Sider>
        <Layout>
          <Content
            class="layout_background"
            style={{
              margin: "24px 16px",
              minHeight: 280,
            }}
          >
            <router-view />
          </Content>
        </Layout>
      </Layout>
    );
  },
});

const HomeStyle = css`
  width: 100%;
  min-height: 100vh;
  .ant-layout-content {
    flex: 1;
    overflow: auto;
  }
  .layout_background {
    background-color: #fff;
  }
  .layout_menu {
    margin-top: 64px;
  }
  .header_right {
    text-align: right;
  }
`;
