import AssetsList from "@/components/AssetsList";
import { useResource } from "@/modules/resource";
import { useModal } from "queenjs";
import { defineComponent, onBeforeUnmount, onMounted } from "vue";
import { string } from "vue-types";

export default defineComponent({
  props: {
    type: string(),
  },
  setup(props) {
    const modal = useModal();
    const resource = useResource();

    onMounted(() => {
      const ctrl = resource.controls.matTempListCtrl;
      if (props.type == "video") {
        ctrl.state.query = { hasVideo: true };
      }
      ctrl.loadPage(1);
    });

    onBeforeUnmount(() => {
      const ctrl = resource.controls.matTempListCtrl;
      ctrl.state.query = {};
    });

    return () => {
      return (
        <div>
          <AssetsList
            control={resource.controls.matTempListCtrl}
            item={(record: any) => (
              <resource.components.MaterialItem
                use="select"
                record={record}
                onUse={() => {
                  modal.cancel();
                  resource.actions.selectMaterial(record);
                }}
              />
            )}
          />
        </div>
      );
    };
  },
});
