import { defineComponent } from "vue";
import Material from "./components/Material";
import createController from "./controller";
import { useResource } from "@/modules/resource";
import { queenApi, useModal } from "queenjs";
import { string } from "vue-types";


const SelectMaterialDialog = defineComponent({
  props: {
    type: string<"image"|"video">()
  },
  setup(props) {
    const resource = useResource();
    const ctrl = createController(resource, true, props.type as string);
    const model  = useModal();
    
    return () => (
      <Material
        Controller={ctrl}
        slots={{
          MaterialItem: ({record})=>{
            return <div onClick={()=>{
                model.submit(record);
            }}>item</div>
          }
        }}
      ></Material>
    );
  },
});

export async function SelectOneImage() {
   return await queenApi.dialog(<SelectMaterialDialog type="image"/>, {title:"选择单张图片", width: "900px"})
}

export async function SelectOneVideo() {
  return  await queenApi.dialog(<SelectMaterialDialog type="image" />,  {title:"选择单个视频", width: "900px"})
}