/*
 * @Descripttion:
 * @version: 0.01
 * @Author: Morpheus
 * @Date: 2020-10-22 11:05:09
 * @LastEditors: Morpheus
 * @LastEditTime: 2020-10-22 13:48:22
 */
import store from '@/store/index'
class PanoramaBox {
    /**
     * @popup 存放 dom 相关
     *
     */
    constructor(viewer, popup) {
        this._viewer = viewer
        this._popup = popup
        this._position = popup.position
        this.appendPopup()
    }

    get viewer() {
        return this._viewer
    }

    get popup() {
        return this._popup
    }

    get position() {
        return this._position
    }

    appendPopup() {
        /**
         * @domId 存放 dom 的id, 多个数组，单个字符串
         */

        this.createVideoWindowAll(this._popup.domId)
    }

    // 创建元素并追加
    createVideoWindowAll(id) {
        this._viewer.scene.postRender.addEventListener(this.movePopup(id))
    }

    movePopup(id) {
        var self = this
        return function() {
            var position = global.DC.Transform.transformCartesianToWGS84(self._position[0])
            var positionChange = null
            if (store.state.viewer.twoOrThree == '三 维') {
                positionChange = global.DC.Transform.transformWGS84ToCartesian(
                    new global.DC.Position(
                        Number(position.lng),
                        Number(position.lat),
                        Number(0)
                    )
                )
            } else {
                positionChange = global.DC.Transform.transformWGS84ToCartesian(
                    new global.DC.Position(
                        Number(position.lng),
                        Number(position.lat),
                        Number(50)
                    )
                )
            }

            const windowCoord = global.DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
                self._viewer.scene,
                positionChange
            )

            self.positionPopUp(windowCoord, id)
        }
    }

    positionPopUp(windowCoord, id) {
        if (document.getElementById(id) == null || document.getElementById(id) == undefined) {
            this._viewer.scene.postRender.removeEventListener(this.movePopup(id))
            return
        }
        if (windowCoord != undefined && windowCoord.x && windowCoord.x != undefined && !Number.isNaN(windowCoord.x) &&
            windowCoord.y && windowCoord.y != undefined && !Number.isNaN(windowCoord.y)) {
            const x = windowCoord.x
            const y = windowCoord.y - document.getElementById(id).offsetHeight
                // x = windowCoord.x - document.getElementById(id).offsetWidth

            document.getElementById(id).style.cssText = `
            visibility:visible;
            z-index:1;
            transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
            `
        }
    }
}

export default PanoramaBox