class Bubble {
    constructor(val) {
        this.viewer = val.viewer;
        this.div = document.createElement("div");
    }
    addDynamicLabel(data,cartesian3) {
        let div = this.div;
        div.id = data.id;
        // div.style.display="inline"
        div.style.position = "absolute";
        div.style.minWidth = "380px";
        div.style.height = "auto";
        let keys = Object.keys(data);
        // 构建属性面板
        let HTMLTable = `
              <div class="bubble-box">
                
                <div class="box-wrap" id="bubbleContent">
                    <div class="pine"></div>
                  <div class="bubble-close" id="popupClose">x</div>
                  <div class="area">
                    <div class="area-title fontColor">${ data['name']?data['name']:data['名称'] }</div>
                  </div>
                  <div class="content" >
                    ${keys.map(item=>{
                        return `<div class="data-li">
                                  <div class="data-label textColor">${item}：</div>
                                  <div class="data-value">
                                    <span class="label-num yellowColor">${data[item]}</span>
                                  </div>
                                </div>`
                    }).join('')}
                  </div>
                </div>

                <!-- <img src="./layer_border.png" alt="Norway"> -->
              </div>
            `;
        div.innerHTML = HTMLTable;
        this.viewer.cesiumWidget.container.appendChild(div);
        document
            .getElementById("popupClose")
            .addEventListener("click", () => {
                this.clearDiv();
            });
        let gisPosition = cartesian3;
        this.handler = this.viewer.scene.postRender.addEventListener(() => {
          const canvasHeight = this.viewer.scene.canvas.height;
          const windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
              this.viewer.scene,
              gisPosition
          );
          let content = document.getElementById("bubbleContent");
          let height = content?content.clientHeight:220;
          div.style.bottom = canvasHeight - windowPosition.y + height + Math.sin(Math.PI/180*45)*60+ "px";
          const elWidth = div.offsetWidth;
          div.style.left = windowPosition.x - elWidth / 2 + 190 + "px";
        }, this);
    }
    clearDiv() {
        if (this.div && this.div.parentElement) {
            var parent = this.div.parentElement;
            parent.removeChild(this.div);
            this.handler&&this.handler();
        }
    }
}
export default Bubble;