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

import { useCategory } from "@/modules/admin";
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    const categoryStore = useCategory();
    const MenuRender = (item: CategoryItem) => {
      if (item.children) {
        return (
          <Menu.SubMenu key={item._id} title={item.name}>
            {item.children.map((subItem: any) => {
              return MenuRender(subItem);
            })}
          </Menu.SubMenu>
        );
      } else {
        return (
          <Menu.Item key={`/detail/${item._id}`}>
            <router-link to={`/detail/${item._id}`}>{item.name}</router-link>
          </Menu.Item>
        );
      }
    };
    return () => (
      <div class={MenuRoot}>
        <Menu
          mode="inline"
          inlineIndent={12}
          selectedKeys={[router.currentRoute.value.path]}
        >
          <Menu.Item key={"/banner"}>
            <router-link to={"/banner"}>首页轮播</router-link>
          </Menu.Item>
          <Menu.Item key={"/category"}>
            <router-link to={"/category"}>菜单管理</router-link>
          </Menu.Item>
          {categoryStore.categoryTree.map((item: any) => {
            return MenuRender(item);
          })}
        </Menu>
      </div>
    );
  },
});
const MenuRoot = css`
  a {
    display: block;
  }
`;