import Dialog from '../../../BaseDialog';
import { html } from "./_element";
import DrawPolygon from "../../../Draw/drawPolygon"
import Tools from "../../../Tools";
import { closeRotateAround, closeViewFollow} from '../../../Global/global'
class Submerge extends Tools {
  /**
   * @constructor
   * @param sdk 
   * @description 淹没效果
   * */
  constructor(sdk, options = {}, _Dialog = {}) {
    super(sdk, options);
    this.sdk = sdk
    this.options = {}
    this.options.name = options.name
    this.options.risingSpeed = 1
    this.options.minWaterLevel = 0
    this.options.maxWaterLevel = 0
    this.options.waterVolume = 0
    this.currentWaterLaver
    this.color = '#00d9ff66'
    this.Dialog = _Dialog
    this.Draw = new DrawPolygon(this.sdk)
    this.positions
    this.status = true
    this.area = 0
    this._elms = {};
    YJ.Analysis.AnalysesResults.push(this)
    Submerge.EditBox(this)
    // Submerge.create(this)
  }

  static create(that) {
    that.Draw.start((a, positions) => {
      if (!positions || positions.length < 3) {
        let _error = '至少需要三个坐标！'
        console.warn(_error)
        window.ELEMENT &&
          window.ELEMENT.Message({
            message: _error,
            type: 'warning',
            duration: 1500
          })
        return
      }
      that.destroy()
      if (!positions || positions.length == 0) {
        that.positions = []
        that._positions = []
        that.options.minWaterLevel = 0
        that.options.maxWaterLevel = 0
        that.options.waterVolume = 0
        that.area = 0
        return
      }
      let fromDegreesArray = []
      that.positions = positions
      that._positions = positions
      that.options.minWaterLevel = positions[0].alt
      for (let i = 0; i < positions.length; i++) {
        if (that.options.minWaterLevel > positions[i].alt) {
          that.options.minWaterLevel = positions[i].alt
        }
        fromDegreesArray.push(positions[i].lng, positions[i].lat)
      }
      // for (let i = 0; i < positions.length; i++) {
      //   fromDegreesArray.push(positions[i].lng, positions[i].lat, that.options.minWaterLevel)
      // }
      let pos = Cesium.Cartesian3.fromDegreesArray(fromDegreesArray)
      that.currentWaterLaver = that.options.minWaterLevel
      that.entity = that.sdk.viewer.entities.add({
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(pos),
          height: new Cesium.CallbackProperty(function () {
            return that.options.minWaterLevel
          }, false),
          extrudedHeight: new Cesium.CallbackProperty(function () {
            return that.currentWaterLaver
          }, false),
          material: Cesium.Color.fromCssColorString(that.color),
        },
      })
      that.area = that.computeArea(positions)
      if (that.TweenAnimate) {
        TWEEN.remove(that.TweenAnimate)
        that.TweenAnimate = null
      }
      let contentElm = that._DialogObject._element.body
      let pauseBtn = contentElm.getElementsByClassName('pause')[0];
      let startBtn = contentElm.getElementsByClassName('start')[0];
      startBtn.style.display = 'flex'
      pauseBtn.style.display = 'none'
      // that.move()
      // Submerge.EditBox(that)
    })
  }

  static async EditBox(that) {
    if (that._DialogObject && that._DialogObject.close) {
      that._DialogObject.close()
      that._DialogObject = null
    }
    that._DialogObject = await new Dialog(that.sdk.viewer._container, {
      title: '淹没分析', left: '180px', top: '100px',
      closeCallBack: () => {
        that.destroy()
        that.Dialog.closeCallBack && that.Dialog.closeCallBack()
      },
    })
    await that._DialogObject.init()
    that._DialogObject._element.body.className = that._DialogObject._element.body.className + ' submerge'
    let contentElm = document.createElement('div');
    contentElm.innerHTML = html()
    that._DialogObject.contentAppChild(contentElm)
    let stopBtn = document.createElement('button');
    stopBtn.className = 'el-button'
    stopBtn.innerHTML = '暂停'
    stopBtn.style.width = '80px'

    let drawBtn = contentElm.getElementsByClassName('draw')[0]
    drawBtn.addEventListener('click', () => {
      Submerge.create(that)
    })
    let analogBtn = contentElm.getElementsByClassName('analog')[0];
    analogBtn.addEventListener('click', () => {
      that.move()
    })
    let flytoBtn = contentElm.getElementsByClassName('flyto')[0];
    flytoBtn.addEventListener('click', () => {
      that.flyTo()
    })
    let resetBtn = contentElm.getElementsByClassName('reset')[0];
    resetBtn.addEventListener('click', () => {
      that.restart()
    })
    let pauseBtn = contentElm.getElementsByClassName('pause')[0];
    let startBtn = contentElm.getElementsByClassName('start')[0];
    pauseBtn.addEventListener('click', () => {
      that.pause()
      pauseBtn.style.display = 'none'
      startBtn.style.display = 'flex'
    })
    startBtn.addEventListener('click', () => {
      that.start()
      startBtn.style.display = 'none'
      pauseBtn.style.display = 'flex'
    })

    // that._DialogObject.footAppChild(stopBtn)
    // that._DialogObject.footAppChild(resetBtn)
    // that._DialogObject.footAppChild(flytoBtn)
    // that._DialogObject.footAppChild(analogBtn)
    // that._DialogObject.footAppChild(drawBtn)

    // 速度
    let e_risingSpeed = contentElm.querySelectorAll("input[name='risingSpeed']")
    e_risingSpeed[0].value = that.options.risingSpeed
    e_risingSpeed[1].value = that.options.risingSpeed
    e_risingSpeed[0].addEventListener('input', e => {
      that.options.risingSpeed = Number(e.target.value);
    });
    e_risingSpeed[1].addEventListener('input', e => {
      if (e.data != '.') {
        let value = Number(e.target.value)
        let max = Number(e_risingSpeed[0].max)
        let min = Number(e_risingSpeed[0].min)
        if (value > max) {
          that.options.risingSpeed = max;
        }
        else if (value < min) {
          that.options.risingSpeed = min;
        }
        else {
          that.options.risingSpeed = Math.floor(value * 100) / 100;
        }
      }
    });
    Object.defineProperty(that.options, 'risingSpeed', {
      get() {
        return e_risingSpeed[0].value
      },
      set(value) {
        e_risingSpeed[0].value = value
        e_risingSpeed[1].value = value
      }
    })
    that.waterLevel = that.options.maxWaterLevel - that.options.minWaterLevel
    // 最低水位
    let e_minWaterLevel = contentElm.querySelector("input[name='minWaterLevel']")
    e_minWaterLevel.value = that.options.minWaterLevel
    e_minWaterLevel.addEventListener('input', e => {
      if (e.data != '.') {
        let value = Number(e.target.value)
        if (value > 999999999) {
          value = 999999999
        }
        if (value < 0) {
          value = 0
        }
        that.options.minWaterLevel = Math.floor(value * 10000) / 10000;
        that.options.maxWaterLevel = that.options.minWaterLevel + that.waterLevel;
      }
    });
    Object.defineProperty(that.options, 'minWaterLevel', {
      get() {
        return Number(e_minWaterLevel.value)
      },
      set(value) {
        e_minWaterLevel.value = Math.floor(Number(value) * 10000) / 10000;
      }
    })

    // 最高水位
    let e_maxWaterLevel = contentElm.querySelector("input[name='maxWaterLevel']")
    e_maxWaterLevel.value = that.options.maxWaterLevel
    e_maxWaterLevel.addEventListener('input', e => {
      if (e.data != '.') {
        let value = Number(e.target.value)
        if (value > 999999999) {
          value = 999999999
        }
        if (value < 0) {
          value = 0
        }
        if (value < that.options.minWaterLevel) {
          that.options.maxWaterLevel = that.options.minWaterLevel;
        }
        else {
          that.options.maxWaterLevel = Math.floor(value * 10000) / 10000;
        }
        that.waterLevel = that.options.maxWaterLevel - that.options.minWaterLevel
        that.options.waterVolume = Number((that.waterLevel * that.area).toFixed(4))
      }
    });
    Object.defineProperty(that.options, 'maxWaterLevel', {
      get() {
        return Number(e_maxWaterLevel.value)
      },
      set(value) {
        if (isNaN(value)) {
          value = 0
        }
        e_maxWaterLevel.value = Math.floor(Number(value) * 10000) / 10000;
      }
    })

    // 水量
    let e_waterVolume = contentElm.querySelector("input[name='waterVolume']")
    e_waterVolume.value = that.options.waterVolume
    e_waterVolume.addEventListener('input', e => {
      if (e.data != '.') {
        let value = Number(e.target.value)
        if (value > 99999999999999) {
          value = 99999999999999
        }
        if (value < 0) {
          value = 0
        }
        that.options.waterVolume = Math.floor(value * 10000) / 10000;
        if (that.area) {
          that.waterLevel = Number((that.options.waterVolume / that.area).toFixed(4))
          that.options.maxWaterLevel = that.options.minWaterLevel + that.waterLevel
        }
      }
    });
    Object.defineProperty(that.options, 'waterVolume', {
      get() {
        return Number(e_waterVolume.value)
      },
      set(value) {
        e_waterVolume.value = value
      }
    })

    // 面积
    let e_area = contentElm.getElementsByClassName('area')[0]
    e_area.value = that.area
    Object.defineProperty(that, 'area', {
      get() {
        return Number(e_area.value)
      },
      set(value) {
        e_area.value = value
        that.waterLevel = Number((that.options.waterVolume / that.area).toFixed(4))
        that.options.maxWaterLevel = that.options.minWaterLevel + that.waterLevel
      }
    })
    // 表格
    let e_tableBody = contentElm.getElementsByClassName('table-body')[0]
    let e_tableEmpty = contentElm.getElementsByClassName('table-empty')[0]
    Object.defineProperty(that, 'positions', {
      get() {
        return that._positions
      },
      set(value) {
        if (value && value.length > 0) {
          e_tableEmpty.style.display = 'none'
          let tr = ''
          for (let i = 0; i < value.length; i++) {
            tr = tr + `<div class="tr">
                <div class="td">${i + 1}</div>
                <div class="td">${Number(value[i].lng.toFixed(10))}</div>
                <div class="td">${Number(value[i].lat.toFixed(10))}</div>
                <div class="td">${Number(value[i].alt.toFixed(4))}</div>
            </div>`
          }
          e_tableBody.innerHTML = tr
        }
        else {
          e_tableBody.innerHTML = ''
          e_tableEmpty.style.display = 'flex'
        }
      }
    })
  }

  move() {
    if (this.TweenAnimate) {
      TWEEN.remove(this.TweenAnimate)
    }
    let totalTime = ((this.options.maxWaterLevel - this.options.minWaterLevel) / this.options.risingSpeed) * 1000
    this.TweenAnimate = new TWEEN.Tween({ waterLevel: this.options.minWaterLevel }).to({ waterLevel: this.options.maxWaterLevel }, totalTime).delay(this.delay).easing(TWEEN.Easing.Linear.None).onUpdate(async (r, a) => {
      this.currentWaterLaver = r.waterLevel
    }).start()
    let contentElm = this._DialogObject._element.body
    let pauseBtn = contentElm.getElementsByClassName('pause')[0];
    let startBtn = contentElm.getElementsByClassName('start')[0];
    startBtn.style.display = 'none'
    pauseBtn.style.display = 'flex'
  }

  restart() {
    this.currentWaterLaver = this.options.minWaterLevel
    let isPaused = false
    if (this.TweenAnimate) {
      isPaused = this.TweenAnimate._isPaused
      TWEEN.remove(this.TweenAnimate)
    }
    let totalTime = ((this.options.maxWaterLevel - this.options.minWaterLevel) / this.options.risingSpeed) * 1000
    this.TweenAnimate = new TWEEN.Tween({ waterLevel: this.options.minWaterLevel }).to({ waterLevel: this.options.maxWaterLevel }, totalTime).delay(this.delay).easing(TWEEN.Easing.Linear.None).onUpdate(async (r, a) => {
      this.currentWaterLaver = r.waterLevel
    }).start()
    if (isPaused) {
      this.pause()
    }
  }

  start() {
    if (this.TweenAnimate) {
      this.TweenAnimate.resume()
    }
  }
  pause() {
    if (this.TweenAnimate) {
      this.TweenAnimate.pause()
    }
  }

  calculateVolumeHeight() {
    that.options.maxWaterLevel
  }

  /**
 * 飞到
*/
  flyTo() {
    if (!this.positions || this.positions.length === 0) {
      return
    }
    closeRotateAround(this.sdk)
  closeViewFollow(this.sdk)

    let positionArray = []
    for (let i = 0; i < this.positions.length; i++) {
      let fromDegrees = Cesium.Cartesian3.fromDegrees(this.positions[i].lng, this.positions[i].lat, this.options.maxWaterLevel)
      positionArray.push(fromDegrees.x, fromDegrees.y, fromDegrees.z)
    }
    let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray)
    this.sdk.viewer.camera.flyToBoundingSphere(BoundingSphere, {
      offset: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-90.0),
        roll: Cesium.Math.toRadians(0.0)
      }
    })
  }

  destroy() {
    if (this.TweenAnimate) {
      TWEEN.remove(this.TweenAnimate)
    }
    this.Draw.end()
    this.sdk.viewer.entities.remove(this.entity)
    this.entity = null
  }

  static EventBinding(that, elements) {
    for (let i = 0; i < elements.length; i++) {
      let Event = []
      let isEvent = false
      let removeName = []
      if (!elements[i] || !elements[i].attributes) {
        continue; 
      }
      for (let m of elements[i].attributes) {
        switch (m.name) {
          case '@model': {
            isEvent = true
            if (elements[i].type == 'checkbox') {
              Event.push((e) => { that[m.value] = e.target.checked })
              elements[i].checked = that[m.value]
            }
            else {
              Event.push((e) => {
                let value = e.target.value
                if (e.target.type == 'number') {
                  value = Number(value)
                }
                that[m.value] = value
              })
              if (elements[i].nodeName == 'IMG') {
                elements[i].src = that[m.value]
              }
              else {
                elements[i].value = that[m.value]
              }
            }
            if (that._elms[m.value]) {
              that._elms[m.value].push(elements[i])
            }
            else {
              that._elms[m.value] = [elements[i]]
            }
            removeName.push(m.name)
            break;
          }
          case '@click': {
            elements[i].addEventListener('click', (e) => {
              if (typeof (that[m.value]) === 'function') {
                that[m.value](e)
              }
            });
            removeName.push(m.name)
            // elements[i].attributes.removeNamedItem(m.name)
            break;
          }
          case '@change': {
            isEvent = true
            Event.push((e) => {
              let value = e.target.value
              if (e.target.type == 'number' && value != '') {
                value = Number(value)
                e.target.value = value
              }
              if (typeof (that[m.value]) === 'function') {
                that[m.value](e, value)
              }
            })
            break;
          }
        }
        // elements[i].attributes[m] = undefined
      }
      for (let n = 0; n < removeName.length; n++) {
        elements[i].attributes.removeNamedItem(removeName[n])
      }

      if (isEvent) {
        let ventType = 'input'
        if (elements[i].tagName != 'INPUT' || elements[i].type == 'checkbox') {
          ventType = 'change'
        }
        elements[i].addEventListener(ventType, (e) => {
          for (let t = 0; t < Event.length; t++) {
            Event[t](e)
          }
        });
      }
    }
  }
}

export default Submerge