/**
 * 文本框
 */
import Base from "../index";
class TextBox extends Base {
  constructor(sdk, options = {}) {
    // this.sdk = { ...sdk }
    // this.options = { ...options }
    super(sdk, options)
    this.clickTextDom = undefined
    this.handler = undefined
    this.textDom = undefined
    this.create(this)
    this.sdk.addIncetance(this.options.id, this)
  }

  async create(that) {
    let viewer = that.sdk.viewer
    // 创建div元素
    let dom = document.createElement('span');
    dom.id = that.options.id
    dom.className = 'popup-textarea'
    // 创建textarea元素
    var textarea = document.createElement('textarea');
    textarea.className = 'textarea'
    // 设置textarea的属性，例如行数和列数
    textarea.rows = 6;
    textarea.style.resize = 'none'
    // 将textarea添加到div中
    dom.appendChild(textarea);
    // 将div添加到body中
    // document.body.appendChild(dom);

    // 配置CSS样式和内容结构
    viewer.cesiumWidget.container.appendChild(dom);
    let posi = Cesium.Cartesian3.fromDegrees(that.options.positions.lng, that.options.positions.lat, that.options.positions.alt)

    that.handler = function () {
      const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
        viewer.scene, posi
      );
      let width = dom.clientWidth * 1
      let height = dom.clientHeight * 1
      dom.style.left = `${position.x - width / 2}px`;
      dom.style.top = `${position.y - height}px`;
    }
    viewer.scene.postRender.addEventListener(that.handler);
    that.textDom = dom
  }
  async setHandeler(data) {
    let that = this
    const ray = this.sdk.viewer.camera.getPickRay(new Cesium.Cartesian2(data.x, data.y));
    var cartesian = this.sdk.viewer.scene.globe.pick(ray, this.sdk.viewer.scene);
    if (Cesium.defined(cartesian)) {
      that.sdk.viewer.scene.postRender.removeEventListener(that.handler);

      var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      var longitude = Cesium.Math.toDegrees(cartographic.longitude);
      var latitude = Cesium.Math.toDegrees(cartographic.latitude);
      that.positions = {
        lng: longitude,
        lat: latitude,
        alt: cartographic.height
      }
      let posi = Cesium.Cartesian3.fromDegrees(longitude, latitude, cartographic.height)

      that.handler = function () {
        const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
          that.sdk.viewer.scene, posi
        );
        let width = that.textDom.clientWidth * 1
        let height = that.textDom.clientHeight * 1
        that.textDom.style.left = `${position.x - width / 2}px`;
        that.textDom.style.top = `${position.y - height}px`;
      }
      that.sdk.viewer.scene.postRender.addEventListener(that.handler);
    }
  }
  async returnFun() {
    return this.handler
  }
  get show() {
    return this.options.show
  }
  set show(v) {
    this.options.show = v
    this.textDom && (this.textDom.style.display = v ? 'block' : 'none');
  }
  get positions() {
    return this.options.positions
  }
  set positions(v) {
    this.options.positions = v
  }

  async remove() {
    if (this.handler) {
      this.sdk.viewer.scene.postRender.removeEventListener(this.handler);
      this.handler = undefined
    }
    if (this.textDom && this.textDom.parentNode) {
      this.sdk.viewer.cesiumWidget.container.removeChild(this.textDom);
    }
  }

  flicker() { }
}

export default TextBox