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

import { InitControllers } from "@/comm/ctx";
import { menuData } from "@/pages/website/routes";

const { Sider, Content } = Layout;

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

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

    onMounted(() => {
     

      const data = useRoute();
      state.menuKey = [data.path];
    });

    return () => {
      
      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;
  }
`;