import Vue from 'vue';
import dialogComponent from './dialog.vue';
export {default as luckysheetDialog } from './dialog.vue';

/**
 * 打开univerDialog对话框
 * @param {Object} options - 对话框配置选项
 * @param {Boolean} options.visiable - 是否可见
 * @param {String} options.data - Excel数据（JSON字符串）
 * @param {String} options.title - 对话框标题
 * @param {Boolean} options.readonly - 是否只读
 * @param {Object} options.options - univer配置选项
 * @param {Function} options.onConfirm - 确认回调函数
 * @param {Function} options.onClose - 关闭回调函数
 * @returns {Object} 对话框实例，包含close方法
 */
export function openLuckysheetDialog(options = {}) {
  let visiable = true;
  const {
    onClose,
  } = options;

  // 创建组件实例
  const DialogConstructor = Vue.extend(dialogComponent);
  const instance = new DialogConstructor({
    propsData: {
      visiable,
      options: options,
    }
  });

  // 挂载组件
  instance.$mount();
  document.body.appendChild(instance.$el);

  // 定义销毁函数
  const destroyDialog = () => {
    // 延迟销毁，确保动画完成
    setTimeout(() => {
      // 从DOM中移除
      if (instance.$el && instance.$el.parentNode) {
        instance.$el.parentNode.removeChild(instance.$el);
      }
      // 销毁组件实例
      instance.$destroy();
    }, 300);
  };

  // 监听关闭事件
  if (onClose) {
    instance.$on('update:visiable', (value) => {
      if (!value) {
        onClose();
        // 关闭后销毁
        destroyDialog();
      }
    });
  } else {
    // 如果没有传入onClose，也要确保关闭后销毁
    instance.$on('update:visiable', (value) => {
      if (!value) destroyDialog();
    });
  }

  // 返回实例，允许外部控制
  return {
    instance,
    close: () => {
      instance.close();
    }
  };
}
