import List from "@/components/AssetsList";
import { useResource } from "@/modules/resource";
import { onMounted } from "vue";
import Header from "./Header";
import PromotionItem from "./PromotionItem";
import { defineUI } from "queenjs";
import { any } from "vue-types";
import { PromotionController } from "@/modules/resource/controllers/PromotionController";

export default defineUI({
  props: {
    Controller: any<PromotionController>().isRequired,
  },

  slots: {
    Header,
    List,
  },
  setup(props, { slots }) {
    onMounted(() => {
      props.Controller.ListCtrl.loadPage(1);
    });

    return () => {
      return (
        <div>
          <slots.Header onAdd={props.Controller.createPromotion} />
          <slots.List
            gap="25px"
            class="my-30px"
            columns={4}
            control={props.Controller.ListCtrl}
            item={(record: any) => (
              <PromotionItem
                record={record}
                onMenu={(name) => {
                  props.Controller.onMenuClick(name, record);
                }}
                onEdit={(record) => props.Controller.onEdit(record)}
              />
            )}
          />
        </div>
      );
    };
  },
});