import {ref, render, createVNode} from 'vue'
import { Deferred } from './promise.util';

// 动态创建Component, 并append至body, 返回一个对象, 用于调用Component的方法
export const createModal = (Component, props) => {
  const visible = ref(false);
  props.visible = visible;
  const container = document.createElement('div')
  document.body.appendChild(container)
  const deferred = new Deferred();
  const show = () => {
    visible.value = true;
    return deferred.promise;
  };

  const close = (result) => {
    visible.value = false;
    container.remove();
    deferred.resolve(result);
  };
  props.close = close;
  const vnode = createVNode(Component, props)
  render(vnode, container)
  return {
    close,
    show
  }
}