// import * as Cesium from 'cesium'
import naive from 'naive-ui'
import { createApp, h } from 'vue'
import Popup from './index.vue'

export default class Dialog {
  constructor(opts) {
    const { viewer, position, entity, closeEvent, ...rest } = opts
    this.viewer = viewer
    this.entity = entity
    // 点位的空间位置信息
    this.position = entity ? entity.position._value : position?._value
    const { vmInstance } = createDialog({
      ...rest,
      closeEvent: closeEvent ?? this.windowClose.bind(this),
    })
    if (this.vmInstance) {
      this.windowClose.bind(this)
    } else {
      this.vmInstance = vmInstance
    }
    // 将弹窗元素添加到渲染cesium的容器中
    viewer.cesiumWidget.container.appendChild(vmInstance.$el)
    this.addPostRender()
  }
  //添加场景事件
  addPostRender() {
    this.viewer.scene.postRender.addEventListener(this.postRender, this)
  }
  postRender() {
    if (!this.vmInstance.$el || !this.vmInstance.$el.style) return
    // 画布高度
    const canvasHeight =
      this.viewer.scene.canvas.height / window.devicePixelRatio
    // 实例化屏幕坐标
    let windowPosition = new Cesium.Cartesian2()
    // console.log(Cesium.SceneTransforms, 'Cesium.SceneTransforms')
    // 将WGS84 经纬度坐标转换成屏幕坐标。
    Cesium.SceneTransforms.wgs84ToWindowCoordinates(
      this.viewer.scene,
      this.entity ? this.entity.position?._value : this.position,
      windowPosition
    )
    // console.log('windowPosition', windowPosition)
    // 调整弹窗的位置
    this.vmInstance.$el.style.bottom =
      canvasHeight - windowPosition.y + 215 + 'px'
    const elWidth = this.vmInstance.$el.offsetWidth
    this.vmInstance.$el.style.left = windowPosition.x - elWidth / 2 + 105 + 'px'

    const cameraPosition = this.viewer.camera.position
    // 控制边界值
    let height =
      this.viewer.scene.globe.ellipsoid.cartesianToCartographic(
        cameraPosition
      ).height
    height += this.viewer.scene.globe.ellipsoid.maximumRadius
    if (
      !(
        Cesium.Cartesian3.distance(
          cameraPosition,
          this.entity ? this.entity.position._value : this.position
        ) > height
      ) &&
      this.viewer.camera.positionCartographic.height < 50000000
    ) {
      this.vmInstance.$el.style.display = 'block'
    } else {
      this.vmInstance.$el.style.display = 'none'
    }
  }
  //关闭弹窗
  windowClose() {
    if (this.vmInstance) {
      this.vmInstance.$el.remove()
    }
    this.viewer.scene.postRender.removeEventListener(this.postRender, this) //移除事件监听
  }
}

let parentNode = null
/**
 * @description: 渲染弹窗组件并插入div中
 * @param {*} opts 弹窗内容
 * @return {*}
 */
const createDialog = opts => {
  if (parentNode) {
    document.body.removeChild(parentNode)
    parentNode = null
  }
  console.log(opts, 'opts')
  const app = createApp({
    render() {
      return h(
        Popup,
        {
          ...opts,
        },
        {
          title: () => opts.slotTitle,
          content: () => opts.slotContent,
          footer: () => opts.slotFooter,
        }
      )
    },
  }).use(naive)

  parentNode = document.createElement('div')
  // 将Popup组件挂载到父级div中，生成弹窗实例
  const instance = app.mount(parentNode)
  document.body.appendChild(parentNode)
  return {
    vmInstance: instance,
  }
}
