import { css } from "@linaria/core";
import { Menu } from "ant-design-vue";

import { defineComponent } from "vue";
import { MenusConfig } from "../config/menus";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    return () => (
      <div>
        <Menu mode="inline" selectedKeys={[router.currentRoute.value.path]}>
          {MenusConfig.map((item: any) => {
            console.log(item);
            if (item.children) {
              return (
                <Menu.SubMenu key={item.name} title={item.name}>
                  {item.children.map((subItem: any) => {
                    return (
                      <Menu.Item key={subItem.path}>
                        <router-link to={subItem.path}>
                          {subItem.name}
                        </router-link>
                      </Menu.Item>
                    );
                  })}
                </Menu.SubMenu>
              );
            } else {
              return (
                <Menu.Item key={item.path}>
                  <router-link to={item.path}>{item.name}</router-link>
                </Menu.Item>
              );
            }
          })}
        </Menu>
      </div>
    );
  },
});