// 引入事件总线用于跨组件通信
import Bus from '@/utils/bus'
// 引入 Vue 的 createApp 以动态挂载组件
import { createApp } from 'vue'

// 标记是否已完成一次性挂载
let mounted = false
// 缓存挂载中的 Promise，避免并发重复挂载
let mountingPromise = null

// 保证全局抽屉只挂载一次
async function ensureMounted() {
  // 已挂载则直接返回
  if (mounted) return
  // 已在挂载中则复用同一个 Promise
  if (mountingPromise) return mountingPromise
  // 首次进入挂载流程，创建异步任务
  mountingPromise = (async () => {
    // 动态导入组件以实现代码分割
    const { default: GlobalDrawer } = await import('@/components/global/customDrawer.vue')
    // 获取或创建挂载容器节点
    let container = document.getElementById('global-drawer-root')
    // 若不存在则新建容器并插入到 body
    if (!container) {
      container = document.createElement('div')
      container.id = 'global-drawer-root'
      document.body.appendChild(container)
    }
    // 创建并挂载组件实例到容器
    const app = createApp(GlobalDrawer)
    app.mount(container)
    // 标记已挂载，后续跳过
    mounted = true
  })()
  // 返回挂载中的 Promise
  return mountingPromise
}

// 打开全局抽屉并传入 URL 与选项
export const openGlobalDrawer = async (url, options = {}) => {
  // 确保组件已挂载后再发事件
  await ensureMounted()
  // 通过事件总线通知组件打开并携带参数
  Bus.$emit('global-drawer-open', { url, options })
}

// 关闭全局抽屉
export const closeGlobalDrawer = () => {
  // 未挂载下发事件也安全，不会被监听
  Bus.$emit('global-drawer-close')
}
