import showDialog from './visualDialog.vue'
import Vue from "vue"; // 导入vue
 
// 将组件作为参数，使用vue提供的全局方法，创建一个构造函数
let DrawerConstructor = Vue.extend(showDialog);
 
let instance;
 
/**
 * 打开查看事件流程详情
 * @param {Object} value 
 * @example
 * {Scenario:[],eventId:'',eventName:''}
 * @returns 
 */
const Drawer = function(value) {
    return new Promise((resolve, reject) => {
        // 初始化实例，此时instance是一个组件实例，但未初始化未完成,这里的变量和方法优先组件内的变量和方法
        instance = new DrawerConstructor({
            data: function() {
                return {
                    visuals:value
                };
            },
            methods: {
                onSelect: res => {
                    unmount();
                    resolve(res);
                },
                handleClose: () => {
                    unmount();
                    // reject();
                }
            }
        });
        // 卸载组件
        const unmount = () => {
            instance.visible = false;
        };
        // 完成初始化
        instance.$mount();
 
        // 将组件添加到根节点body
        document.body.appendChild(instance.$el);
        instance.visible = true;
    });
};
 
export default Drawer;