;(function (window, mars3d) {
  //创建widget类，需要继承BaseWidget
  class MyWidget extends mars3d.widget.BaseWidget {
    //外部资源配置
    get resources() {
      return ['view.css']
    }

    //弹窗配置
    get view() {
      return {
        type: 'append',
        url: 'view.html',
        parent: 'body',
      }
    }

    //每个窗口创建完成后调用
    winCreateOK(opt, result) {
      var that = this
      $('#btn_streetscapeBar_close').click(function () {
        that.disableBase()
      })
    }
    //激活插件
    activate() {
      var point = this.config.point || { lat: 31.833789, lng: 117.183995 }
      this.updateMarker(point)

      var pointBd = this.getBaiduPoint(point)

      var inhtml = `<div id="streetscapeView" style="position:absolute;right:0px;top:0px;border:1px solid #ccc;top: 0px;bottom: 0px;width:50%;overflow: hidden;">
                    <iframe id="streetscape" name="streetscape" style="width:100%;height:100%;overflow:hidden;margin:0;"
                        scrolling="no" frameborder="0" src="${this.path}streetscape.html?lng=${pointBd.lng}&lat=${pointBd.lat}"></iframe>
                  </div>`
      $('body').append(inhtml)

      $('#centerDiv').css({
        position: '',
        height: '100%',
        width: '50%',
      })
      $('.no-print-view').hide()

      //单击地图事件
      this.map.on(mars3d.EventType.click, this.onMapClick, this)
      $('.cesium-viewer').css('cursor', 'crosshair')
    }
    //释放插件
    disable() {
      //释放单击地图事件
      this.map.off(mars3d.EventType.click, this.onMapClick, this)
      $('.cesium-viewer').css('cursor', '')

      if (this.graphic) {
        this.map.graphicLayer.removeGraphic(this.graphic, true)
        this.graphic = null
      }
      $('#streetscapeView').remove()

      $('#centerDiv').css({
        position: '',
        height: '100%',
        width: '100%',
      })
      $('.no-print-view').show()
    }
    onMapClick(event) {
      var cartesian = event.cartesian
      if (cartesian) {
        var point = mars3d.LatLngPoint.fromCartesian(cartesian)

        this.updateMarker(point)

        //点击地图的事件,触发街景改变
        var pointBd = this.getBaiduPoint(point)
        var streetscapeFrame = document.getElementById('streetscape')
        if (streetscapeFrame && streetscapeFrame.contentWindow.setPosition) {
          streetscapeFrame.contentWindow.setPosition(pointBd) //根据经纬度坐标展示全景图
        }
      }
    }
    getBaiduPoint(point) {
      let pointbd = mars3d.PointTrans.wgs2bd([point.lng, point.lat])
      return { lng: pointbd[0], lat: pointbd[1] }
    }
    updateMarker(position) {
      if (this.graphic) {
        this.graphic.position = position
      } else {
        this.graphic = new mars3d.graphic.BillboardEntity({
          position: position,
          style: {
            image: this.path + 'img/streetimg.png',
            scale: 1,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround: true,
          },
        })
        this.map.graphicLayer.addGraphic(this.graphic)
      }
      this.map.flyToGraphic(this.graphic, { radius: 800 })
    }
  }

  //注册到widget管理器中。
  window.streetscapeWidget = mars3d.widget.bindClass(MyWidget)

  //每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
})(window, mars3d)