import AssetsList from "@/components/AssetsList";
import { useResource } from "@/modules/resource";
import { defineComponent, onMounted } from "vue";
import Toolbar from "./Toolbar";

export default defineComponent({
  setup() {
    const resource = useResource();
    const { store, controls, actions } = resource;

    const loadPage = () => {
      controls.materialListCtrl.state.query = { fileType: store.type };
      controls.materialListCtrl.loadPage(1);
    };

    const changeType = (v: string) => {
      resource.store.setSourceType(v);
      if (v == "task") {
        controls.renderTaskListCtrl.loadPage(1);
        return;
      }
      loadPage();
    };

    onMounted(() => loadPage());

    return () => {
      const control =
        store.type == "task"
          ? controls.renderTaskListCtrl
          : controls.materialListCtrl;

      return (
        <>
          <Toolbar onChange={changeType} />
          <AssetsList
            columns={6}
            class="mt-30px"
            control={control}
            item={(record: any) => (
              <resource.components.MaterialItem
                record={record}
                use={store.type == "task" ? "task" : "show"}
                onDelete={() => actions.deleteMaterial(record)}
                onDownload={() => actions.downloadMaterial(record)}
              />
            )}
          />
        </>
      );
    };
  },
});