import ViewerComponent from './ImageViewer.vue'

let vm: {
  open: boolean
  setImage: (imageUrl: string, blobFilename?: string) => Promise<void>
} & Vue
export const createContainer = async () => {
  vm = new ViewerComponent({
    propsData: {
      image: '',
      open: false,
    },
  }).$mount() as typeof vm
  document.body.insertAdjacentElement('beforeend', vm.$el)
  return vm
}
export const showImage = async (imageUrl: string, blobFilename?: string) => {
  if (!vm) {
    await createContainer()
  }
  return new Promise<typeof vm>((resolve, reject) => {
    setTimeout(() => {
      // 等浏览器端完成一次任务处理, 防止容器创建瞬间 open = true 导致没有过渡动画
      vm.setImage(imageUrl, blobFilename)
        .then(() => {
          vm.open = true
          resolve(vm)
        })
        .catch(reject)
    })
  })
}