import { css } from "@linaria/core";
import { Button, Card, PageHeader } from "ant-design-vue";
import { defineComponent } from "vue";
import CategoryTree from "./CategoryTree";
import { useCategory } from "@/modules";

export default defineComponent(() => {
  const categoryStore = useCategory();
  return () => (
    <Card class={Page}>
      <PageHeader title={"菜单管理"}>
        {{
          extra: () => {
            return (
              <Button
                type="primary"
                onClick={() => categoryStore.addCategoryItem()}
              >
                ＋ 添加菜单
              </Button>
            );
          },
        }}
      </PageHeader>
      <div class={"category_box"}>
        <CategoryTree
          data={categoryStore.categoryTree}
          onAdd={categoryStore.addCategoryItem}
          onUpdate={categoryStore.updateCategoryItem}
          onDelete={categoryStore.deleteCategoryItem}
        />
      </div>
    </Card>
  );
});
const Page = css`
  
  .category_box {
    padding: 20px;
    border: 1px solid #e5e5e5;
  }
`;
