import Dialog from '../../Element/Dialog';
import cy_slider from "../../Element/cy_html_slider";
import { html } from "./_element";
import EventBinding from '../../Element/Dialog/eventBinding';
import Base from "../index";
import MouseEvent from '../../../Event/index'
import { syncData } from '../../../Global/MultiViewportMode'
import MouseTip from '../../../MouseTip'
import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen'
import { setActiveViewer, closeRotateAround, closeViewFollow} from '../../../Global/global'

class GroundImage extends Base {
  /**
   * @constructor
   * @param sdk 
   * @description 贴地图片
   * @param options {object} 属性
   * @param options.id {string} 唯一标识
   * @param options.show=true {boolean} 显示/隐藏
   * @param options.name {string} 名称
   * @param options.angle=0 {number} 旋转角度
   * @param options.scale=1 {number} 比例
   * @param options.flipe {object} 翻转
   * @param options.flipe.x=false {boolean} 绕X轴翻转
   * @param options.flipe.y=false {boolean} 绕Y轴翻转
   * @param options.url {string} 图片地址
   * @param {Array.<object>} options.positions 经纬度和高度的列表，值交替 [{lon,lat,alt},...]
   * @param _Dialog {object} 弹框事件
   * @param _Dialog.confirmCallBack {function} 弹框确认时的回调
   * */
  constructor(sdk, options = {}, _Dialog = {}) {
    super(sdk, options);
    this.options.name = options.name || '未命名对象'
    this.options.show = (options.show || options.show === false) ? options.show : true
    this.options.url = options.url
    this.options.angle = options.angle || 0
    this.options.scale = (options.scale || options.scale === 0) ? options.scale : 1
    this.options.positions = options.positions

    this.options.flipe = options.flipe || {}
    this.options.flipe.x = this.options.flipe.x || false
    this.options.flipe.y = this.options.flipe.y || false

    this.entity = {
      id: this.options.id
    }
    this._positionEditing = false
    this.Dialog = _Dialog
    this._elms = {};
    this.previous = {
      positions: { ...this.options.positions }
    }
    this._EventBinding = new EventBinding()
    this.event = new MouseEvent(this.sdk)
    this.sdk.addIncetance(this.options.id, this)
    this.create()
  }

  get angle() {
    return this.options.angle
  }

  set angle(v) {
    this.options.angle = v
    this._elms.angle && this._elms.angle.forEach((item) => {
      item.value = v
    })
  }

  get scale() {
    return this.options.scale
  }

  set scale(v) {
    this.options.scale = v
    this._elms.scale && this._elms.scale.forEach((item) => {
      item.value = v
    })
  }

  get flipeY() {
    return this.options.flipe.y
  }
  set flipeY(v) {
    if (typeof v === "boolean") {
      this.options.flipe.y = v
      if (!this.entity) {
        return
      }
      const img = new Image();
      img.src = this.options.url;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 设置画布大小
        canvas.width = img.width;
        canvas.height = img.height;

        // 绘制图像
        if (this.flipeX) {
          ctx.scale(1, -1);
          ctx.translate(0, -canvas.height)
        }
        if (this.flipeY) {
          ctx.scale(-1, 1);
          ctx.translate(-canvas.width, 0);
        }
        ctx.drawImage(img, 0, 0);
        this.entity && (this.entity.rectangle.material = new Cesium.ImageMaterialProperty({
          image: canvas,
          transparent: true
        }))
      }
    } else {
      console.error("参数必须为boolean")
    }
  }
  get flipeX() {
    return this.options.flipe.x
  }
  set flipeX(v) {
    if (typeof v === "boolean") {
      this.options.flipe.x = v
      if (!this.entity) {
        return
      }
      const img = new Image();
      img.src = this.options.url;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 设置画布大小
        canvas.width = img.width;
        canvas.height = img.height;

        // 绘制图像
        if (this.flipeX) {
          ctx.scale(1, -1);
          ctx.translate(0, -canvas.height)
        }
        if (this.flipeY) {
          ctx.scale(-1, 1);
          ctx.translate(-canvas.width, 0);
        }
        ctx.drawImage(img, 0, 0);
        this.entity.rectangle.material = new Cesium.ImageMaterialProperty({
          image: canvas,
          transparent: true
        })
      }
    } else {
      console.error("参数必须为boolean")
    }
  }

  async create() {
    // let gap = Math.abs(Math.cos(Math.PI/180 * this.options.positions.lat)) * (0.0001*this.options.scale)
    // let fromDegreesArray = [
    //   this.options.positions.lng - 0.05, this.options.positions.lat - 0.05,
    //   this.options.positions.lng + 0.05, this.options.positions.lat - 0.05,
    //   this.options.positions.lng + 0.05, this.options.positions.lat + 0.05,
    //   this.options.positions.lng - 0.05, this.options.positions.lat + 0.05,
    // ]
    let response = await fetch(this.options.url, {
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
      }
    })
    if (response.ok) {
      // let data = await response.blob()
      // let arrayBuffer = await data.arrayBuffer()
      // const str = String.fromCharCode(...new Uint8Array(arrayBuffer));
      const img = new Image();
      img.src = this.options.url;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 设置画布大小
        canvas.width = img.width;
        canvas.height = img.height;
        // 绘制图像
        if (this.flipeX) {
          ctx.scale(1, -1);
          ctx.translate(0, -canvas.height)
        }
        if (this.flipeY) {
          ctx.scale(-1, 1);
          ctx.translate(-canvas.width, 0);
        }
        ctx.drawImage(img, 0, 0);

        this.entity = this.sdk.viewer.entities.add({
          id: this.options.id,
          show: this.options.show,
          rectangle: {
            coordinates: new Cesium.CallbackProperty(() => {
              let gap = Math.abs(Math.cos(Math.PI / 180 * this.options.positions.lat)) * (0.0001 * this.options.scale)
              let fromDegreesArray = [
                this.options.positions.lng - (0.0001 * this.options.scale), this.options.positions.lat - gap,
                // this.options.positions.lng + 0.05, this.options.positions.lat - 0.05,
                this.options.positions.lng + (0.0001 * this.options.scale), this.options.positions.lat + gap,
                // this.options.positions.lng - 0.05, this.options.positions.lat + 0.05,
              ]

              return Cesium.Rectangle.fromDegrees(...fromDegreesArray)
            }, false),
            material: new Cesium.ImageMaterialProperty({
              image: canvas,
              transparent: true
            }),
            rotation: new Cesium.CallbackProperty(() => {
              return Cesium.Math.toRadians(this.options.angle)
            }, false),
            stRotation: new Cesium.CallbackProperty(() => {
              return Cesium.Math.toRadians(this.options.angle)
            }, false)
          },
        })
        if (this.sdk.viewer._element.className === 'cesium-viewer 2d') {
          this.entity.rectangle.height = 0
        }
        syncData(this.sdk, this.options.id)
        if(this.options.show) {
           
          setSplitDirection(0, this.options.id)
        }
      }

      // if (data.code === 200 || data.code === 0) {
      //   this.$message({
      //     message: '添加成功！',
      //     type: 'success',
      //     duration: 1500
      //   });
      //   this.close()
      //   // this.$emit('getBuildingList')
      //   // this.$emit('onSubmitCallBack')
      // }
    }

  }

  // 编辑框
  async edit(state) {
    let _this = this
    this.originalOptions = { ...this.options }
    if (this._DialogObject && this._DialogObject.close) {
      this._DialogObject.close()
      this._DialogObject = null
    }
    if (state) {
      this._DialogObject = await new Dialog(this.sdk, this.originalOptions, {
        title: '军标属性', left: '180px', top: '100px',
        confirmCallBack: (options) => {
          this.name = this.name.trim()
          if (!this.name) {
            this.name = '未命名对象'
          }
          this.originalOptions = this.deepCopyObj(this.options)
          this._DialogObject.close()
          this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(this.originalOptions)
          syncData(this.sdk, this.options.id)
          syncSplitData(this.sdk, this.options.id)
        },
        resetCallBack: () => {
          this.reset()
          this.Dialog.resetCallBack && this.Dialog.resetCallBack()
        },
        removeCallBack: () => {
          this.Dialog.removeCallBack && this.Dialog.removeCallBack()
        },
        closeCallBack: () => {
          this.reset()
          // this.entity.style = new Cesium.Cesium3DTileStyle({
          //   color: "color('rgba(255,255,255," + this.newData.transparency + ")')",
          //   show: true,
          // });
          this.positionEditing = false
          this.Dialog.closeCallBack && this.Dialog.closeCallBack()
        },
        showCallBack: (show) => {
          this.show = show
          this.Dialog.showCallBack && this.Dialog.showCallBack()
        },
        translationalCallBack: () => {
          this.positionEditing = !this.positionEditing
        },
        addFootElm: [
          {
            tagName: 'button',
            className: 'flipe-over-y',
            innerHTML: 'Y轴翻转',
            event: [
              'click',
              () => {
                this.flipeY = !this.flipeY
              }
            ]
          },
          {
            tagName: 'button',
            className: 'flipe-over-x',
            innerHTML: 'X轴翻转',
            event: [
              'click',
              () => {
                this.flipeX = !this.flipeX
              }
            ]
          }
        ]
      }, true)
      this._DialogObject._element.body.className = this._DialogObject._element.body.className + ' ground-image'
      let contentElm = document.createElement('div');
      contentElm.innerHTML = html()
      this._DialogObject.contentAppChild(contentElm)
      let all_elm = contentElm.getElementsByTagName("*")
      this._EventBinding.on(this, all_elm)
      this._elms = this._EventBinding.element

    } else {
      if (this._DialogObject && this._DialogObject.remove) {
        this._DialogObject.remove()
        this._DialogObject = null
      }
    }
  }

  /**@desc 打开平移功能
   *
   * @memberOf Source
   * @param status {boolean}
   *
   * */
  set positionEditing(status) {
    if (!this.sdk || !this.sdk.viewer || !this.entity) {
      return
    }
    this._positionEditing = status
    this.previous = {
      positions: { ...this.options.positions }
    }
    if (status === true) {
      this.tip && this.tip.destroy()
      this.tip = new MouseTip('点击鼠标左键确认，右键取消', this.sdk)
      this.event.mouse_move((movement, cartesian) => {
        let positions = this.cartesian3Towgs84(cartesian, this.sdk.viewer)
        this.options.positions.lng = positions.lng
        this.options.positions.lat = positions.lat
        this.options.positions.alt = positions.alt
        this.tip.setPosition(
          cartesian,
          movement.endPosition.x,
          movement.endPosition.y
        )
      })
      this.event.mouse_left((movement, cartesian) => {
        let positions = this.cartesian3Towgs84(cartesian, this.sdk.viewer)
        this.options.positions.lng = positions.lng
        this.options.positions.lat = positions.lat
        this.options.positions.alt = positions.alt
        this.event.mouse_move(() => { })
        this.event.mouse_left(() => { })
        this.event.mouse_right(() => { })
        this.event.gesture_pinck_start(() => { })
        this.event.gesture_pinck_end(() => { })
        this.positionEditing = false
      })
      this.event.mouse_right((movement, cartesian) => {
        this.options.positions.lng = this.previous.positions.lng
        this.options.positions.lat = this.previous.positions.lat
        this.options.positions.alt = this.previous.positions.alt
        this.positionEditing = false
      })

      this.event.gesture_pinck_start((movement, cartesian) => {
        let startTime = new Date()
        this.event.gesture_pinck_end(() => {
          let endTime = new Date()
          if (endTime - startTime >= 500) {
            // 长按取消
            this.options.positions.lng = this.previous.positions.lng
            this.options.positions.lat = this.previous.positions.lat
            this.options.positions.alt = this.previous.positions.alt
            this.positionEditing = false
          }
          else {
            let positions = this.cartesian3Towgs84(cartesian, this.sdk.viewer)
            this.options.positions.lng = positions.lng
            this.options.positions.lat = positions.lat
            this.options.positions.alt = positions.alt
            this.event.mouse_move(() => { })
            this.event.mouse_left(() => { })
            this.event.mouse_right(() => { })
            this.event.gesture_pinck_start(() => { })
            this.event.gesture_pinck_end(() => { })
            this.positionEditing = false
          }
        })
      })
    }
    else {
      if (this.event) {
        this.event.mouse_move(() => { })
        this.event.mouse_left(() => { })
        this.event.mouse_right(() => { })
        this.event.gesture_pinck_start(() => { })
        this.event.gesture_pinck_end(() => { })
      }
      this.tip && this.tip.destroy()
      this.options.positions.lng = this.previous.positions.lng
      this.options.positions.lat = this.previous.positions.lat
      this.options.positions.alt = this.previous.positions.alt
    }
  }

  get positionEditing() {
    return this._positionEditing
  }

  /**
   * 飞到
  */
  async flyTo(options = {}) {
    setActiveViewer(0)
    closeRotateAround(this.sdk)
  closeViewFollow(this.sdk)

    if (this.options.customView && this.options.customView.relativePosition && this.options.customView.orientation) {
      let orientation = {
        heading: Cesium.Math.toRadians(this.options.customView.orientation.heading || 0.0),
        pitch: Cesium.Math.toRadians(this.options.customView.orientation.pitch || -60.0),
        roll: Cesium.Math.toRadians(this.options.customView.orientation.roll || 0.0)
      }

      let lng = this.options.customView.relativePosition.lng
      let lat = this.options.customView.relativePosition.lat
      let alt = this.options.customView.relativePosition.alt
      let destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt)

      let position = { lng: 0, lat: 0 }
      if (this.options.position) {
        position = { ...this.options.position }
      }
      else if (this.options.positions) {
        position = { ...this.options.positions[0] }
      }
      else if (this.options.center) {
        position = { ...this.options.center }
      }
      else if (this.options.start) {
        position = { ...this.options.start }
      }
      else {
        if (this.options.hasOwnProperty('lng')) {
          position.lng = this.options.lng
        }
        if (this.options.hasOwnProperty('lat')) {
          position.lat = this.options.lat
        }
        if (this.options.hasOwnProperty('alt')) {
          position.alt = this.options.alt
        }
      }
      // 如果没有高度值，则获取紧贴高度计算
      if (!position.hasOwnProperty('alt')) {
        position.alt = await this.getClampToHeight(position)
      }
      lng = this.options.customView.relativePosition.lng + position.lng
      lat = this.options.customView.relativePosition.lat + position.lat
      alt = this.options.customView.relativePosition.alt + position.alt
      destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt)
      this.sdk.viewer.camera.flyTo({
        destination: destination,
        orientation: orientation
      })
    }
    else {
      let gap = Math.abs(Math.cos(Math.PI / 180 * this.options.positions.lat)) * (0.0001 * this.options.scale)
      let fromDegreesArray = [
        [this.options.positions.lng - (0.0001 * this.options.scale), this.options.positions.lat - gap],
        [this.options.positions.lng + (0.0001 * this.options.scale), this.options.positions.lat + gap],
      ]
      let positionArray = []
      let height = 0
      let position = this.options.positions
      let point1 = Cesium.Cartesian3.fromDegrees(position.lng, position.lat, 0);
      let point2 = Cesium.Cartesian3.fromDegrees(position.lng, position.lat, 10000000);
      let direction = Cesium.Cartesian3.subtract(point2, point1, new Cesium.Cartesian3());
      let c = Cesium.Cartesian3.normalize(direction, direction);
      let ray = new Cesium.Ray(point1, c);
      let r = {}
      let pickedObjects = this.sdk.viewer.scene.drillPickFromRay(ray);
      for (let i = 0; i < pickedObjects.length; i++) {
        if (pickedObjects[i].position) {
          r = pickedObjects[i]
          break
        }
      }
      if (r && r.position) {
        height = this.cartesian3Towgs84(r.position, this.sdk.viewer).alt
      }
      else {
        try {
          var promise = await Cesium.sampleTerrainMostDetailed(this.sdk.viewer.terrainProvider, [Cesium.Cartographic.fromDegrees(position.lng, position.lat)]);
          height = promise[0].height
        } catch (error) {
        }
      }
      for (let i = 0; i < fromDegreesArray.length; i++) {
        let a = Cesium.Cartesian3.fromDegrees(...fromDegreesArray[i], height)
        positionArray.push(a.x, a.y, a.z)
      }
      let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray)
      this.sdk.viewer.camera.flyToBoundingSphere(BoundingSphere, {
        offset: options.orientation || {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-90.0),
          roll: Cesium.Math.toRadians(0.0)
        }
      })
    }
  }

  reset() {
    if (!this.entity) {
      return
    }
    this.name = this.originalOptions.name
    this.angle = this.originalOptions.angle
    this.scale = this.originalOptions.scale
  }

  async remove() {
    this.event && this.event.destroy()
    this.tip && this.tip.destroy()
    this.sdk.viewer.entities.remove(this.entity)
    this.entity = null
    if (this._DialogObject && !this._DialogObject.isDestroy) {
      this._DialogObject.close()
      this._DialogObject = null
    }
    await this.sdk.removeIncetance(this.options.id)
    await syncData(this.sdk, this.options.id)
  }

  setPosition(v) {
    this.options.positions.lng = v.position.lng
    this.options.positions.lat = v.position.lat
    this.options.positions.alt = v.position.alt
  }
}

export default GroundImage