'use script' //开发环境建议开启严格模式
;(function (window, mars3d) {
  //创建widget类，需要继承BaseWidget
  class MyWidget extends mars3d.widget.BaseWidget {
    //外部资源配置
    get resources() {
      return [
        //字体标号使用到的div转img库，无此标号时可以删除
        './lib/dom2img/dom-to-image.js',
      ]
    }

    //弹窗配置
    get view() {
      return {
        type: 'window',
        url: 'view.html',
        windowOptions: {
          width: 250,
          position: {
            top: 50,
            right: 5,
            bottom: 5,
          },
        },
      }
    }
    get serverURL() {
      return 'http://data.marsgis.cn'
    }
    get gltfServerURL() {
      return 'http://data.marsgis.cn/gltf'
    }
    //初始化[仅执行1次]
    create() {
      this.storageName = 'mars3d_plot'

      this.graphicGroupLayer = new mars3d.layer.GraphicGroupLayer({
        name: this.config.name,
        pid: 99, //图层管理 中使用，父节点id
        defaultLayer: '默认分组',
        hasEdit: false,
      })
      this.map.addLayer(this.graphicGroupLayer)

      //事件监听
      this.graphicGroupLayer.on(mars3d.EventType.drawCreated, (e) => {
        var graphic = e.graphic
        this.startEditing(graphic)
      })
      //模型加载完成后事件
      this.graphicGroupLayer.on(mars3d.EventType.load, (e) => {
        //console.log('gltf模型加载完成');
        haoutil.loading.hide()
      })
      this.graphicGroupLayer.on(mars3d.EventType.editStart, (e) => {
        var graphic = e.graphic
        this.startEditing(graphic)
      })
      this.graphicGroupLayer.on(mars3d.EventType.editMovePoint, (e) => {
        var graphic = e.graphic
        this.startEditing(graphic)
      })
      this.graphicGroupLayer.on(mars3d.EventType.editRemovePoint, (e) => {
        var graphic = e.graphic
        this.startEditing(graphic)
      })
      this.graphicGroupLayer.on(mars3d.EventType.editStop, (e) => {
        var graphic = e.graphic
        this.stopEditing()

        this.sendSaveEntity(graphic) //保存数据
        this.showLayerTree()
      })

      this.graphicGroupLayer.on(mars3d.EventType.delete, (e) => {
        this.sendDeleteEntity(e.graphic) //保存数据
        this.showLayerTree()
      })

      this.sendGetList()
    }
    //每个窗口创建完成后调用
    winCreateOK(opt, result) {
      this.viewWindow = result
    }
    //激活插件
    activate() {
      this.graphicGroupLayer.hasEdit = true
    }
    //释放插件
    disable() {
      this.stopEditing()

      this.graphicGroupLayer.stopDraw()
      this.graphicGroupLayer.hasEdit = false

      this.viewWindow = null
    }
    getDefStyle(type) {
      return mars3d.graphic.StyleUtil.getDefStyle(type)
    }
    hasEdit(val) {
      this.graphicGroupLayer.hasEdit = val
    }
    hasPopup(val) {
      if (val) {
        this.graphicGroupLayer.bindPopup(
          (event) => {
            let graphic = event.graphic
            var html = mars3d.Util.getTemplateHtml({
              title: '属性编辑',
              template: [
                { field: 'name', name: '名称' },
                { field: 'address', name: '地址' },
                { field: 'phone', name: '电话' },
                { field: 'remark', name: '备注', type: 'textarea' },
                { name: '确定', type: 'button' },
              ],
              attr: graphic.attr,
              edit: true,
              width: 190,
            })
            return html
          },
          {
            onAdd: (event) => {
              let eleId = event.id,
                graphic = event.graphic
              //popup的DOM添加到页面的回调方法
              $('#' + eleId + ' .mars3d-popup-btn').click((e) => {
                $('#' + eleId + ' .mars3d-popup-edititem').each(function () {
                  var val = $(this).val()
                  var key = $(this).attr('data-type')
                  graphic.attr[key] = val
                })
                this.graphicGroupLayer.closePopup()
              })
            },
            onRemove: function (eleId, graphic) {
              //popup的DOM从页面移除的回调方法
            },
            anchor: [0, -20],
          }
        )
      } else {
        this.graphicGroupLayer.unbindPopup()
      }
    }
    //开始标记
    startDraw(defval) {
      haoutil.loading.hide()
      switch (defval.type) {
        default:
          break
        case 'model': //小模型
          defval.drawShow = true //模型点状对象绘制时，是否显示本身对象，可避免在3dtiles上拾取坐标存在问题。
          haoutil.loading.show() //LoadEnd后关闭
          break
        case 'point':
        case 'font-point':
        case 'billboard':
          defval.drawShow = true //模型点状对象绘制时，是否显示本身对象，可避免在3dtiles上拾取坐标存在问题。
          break
      }

      // console.log(JSON.stringify(defval));
      this.graphicGroupLayer.startDraw(defval)
    }
    //结束绘制、等同双击完成绘制，比如手机端无法双击结束
    endDraw() {
      this.graphicGroupLayer.endDraw()
    }
    startEditingById(id) {
      var graphic = this.graphicGroupLayer.getGraphicById(id)
      if (graphic == null) {
        return
      }
      graphic.flyTo()

      this.graphicGroupLayer.startEditing(graphic)
    }
    startEditing(graphic) {
      clearTimeout(this.timeTik)

      if (this.viewWindow == null) {
        return
      }

      var plotAttr = mars3d.widget.getClass('widgets/plotAttr/widget.js')
      if (plotAttr && plotAttr.isActivate) {
        plotAttr.startEditing(graphic, graphic.coordinates)
      } else {
        mars3d.widget.activate({
          uri: 'widgets/plotAttr/widget.js',
          graphic: graphic,
          lonlats: graphic.coordinates,
        })
      }
    }
    stopEditing() {
      this.timeTik = setTimeout(function () {
        mars3d.widget.disable('widgets/plotAttr/widget.js')
      }, 200)
    }

    flyTo(target) {
      //参数解释：线面数据：scale控制边界的放大比例，点数据：radius控制视距距离
      this.map.flyToGraphic(target, { scale: 1.9, radius: 1000 })
    }
    //文件处理
    getGeoJson(target) {
      if (target) {
        return target.toGeoJSON()
      } else {
        return this.graphicGroupLayer.toGeoJSON()
      }
    }
    downloadJson(filename, target) {
      var data = this.getGeoJson(target)
      if (data == null || (data.features && data.features.length == 0)) {
        haoutil.msg('当前未标绘任何数据！')
      } else {
        var timestr = new Date().format('MMddHHmmss')
        haoutil.file.downloadFile(filename + '_' + timestr + '.json', JSON.stringify(data))
      }
    }
    loadGeoJSON(json, isClear, isFly) {
      if (json == null) {
        return
      }

      var arr = this.graphicGroupLayer.loadGeoJSON(json, {
        clear: isClear,
        flyTo: isFly,
      })

      this.showLayerTree()
      return arr
    }
    deleteAll() {
      this.stopEditing()
      this.graphicGroupLayer.clear()
      this.sendDeleteAll()

      this.showLayerTree()
    }
    deleteEntity(graphic) {
      graphic.remove()
    }
    //搜索
    query(text, maxcount) {
      var arrGraphic = this.graphicGroupLayer.getGraphics()

      var arr = []
      var counts = 0
      for (var i = 0; i < arrGraphic.length; i++) {
        var graphic = arrGraphic[i]

        var name
        if (graphic.type == 'label') {
          name = graphic.text
        } else if (graphic.attr) {
          name = graphic.attr.name
        }

        if (name == null || name.indexOf(text) == -1) {
          continue
        }

        arr.push({
          name: name,
          type: '标绘 - ' + graphic.attr.name,
          _datatype: 'plot',
          _entity: graphic,
        })

        if (maxcount) {
          counts++
          if (counts > maxcount) {
            break
          }
        }
      }
      return arr
    }
    //弹窗属性编辑处理
    // showEditAttrWindow(param) {
    //   this.last_window_param = param

    //   layer.open({
    //     type: 2,
    //     title: '选择数据',
    //     fix: true,
    //     shadeClose: false,
    //     maxmin: true,
    //     area: ['100%', '100%'],
    //     content: 'test.html?name=' + param.attrName + '&value=' + param.attrVal,
    //     skin: 'layer-mars-dialog animation-scale-up',
    //     success: function (layero) {},
    //   })
    // }
    // saveWindowEdit(attrVal) {
    //   this.viewWindow.plotEdit.updateAttr(this.last_window_param.parname, this.last_window_param.attrName, attrVal)
    //   layer.close(layer.index)
    // }

    //分组树相关方法
    showLayerTree() {
      if (!this.viewWindow || !this.isActivate) {
        return
      }
      this.viewWindow.treeWork.loadData(this.graphicGroupLayer.getLayers())
    }
    checkRemoveGroup(layer) {
      if (this.graphicGroupLayer.length < 2) {
        haoutil.msg('不能删除所有图层，需要至少保留1个图层！')
        return false
      }
      return true
    }
    deleteLayer(layer) {
      var result = this.graphicGroupLayer.deleteLayer(layer)
      if (result) {
        this.showLayerTree()
        haoutil.msg('删除成功！')
        return true
      } else {
        haoutil.msg('删除失败！')
        return false
      }
    }
    //删除所有非空数组
    deleteEmptyLayer() {
      if (this.graphicGroupLayer.length < 2) {
        haoutil.msg('不能删除所有图层，需要至少保留1个图层！')
        return
      }
      this.graphicGroupLayer.deleteEmptyLayer()
      this.showLayerTree()
    }
    editGroupName(layer) {
      mars3d.widget.activate({
        uri: 'widgets/plotGroupName/widget.js',
        name: layer ? '重命名分组' : '新增分组',
        data: layer ? layer.name : '',
        checkName: (newname) => {
          //校验分组是否有同名的
          return this.graphicGroupLayer.hasLayer(newname, layer)
        },
        callback: (newname) => {
          console.log(newname)

          if (layer) {
            //修改
            layer.name = newname
          } else {
            //新增
            this.graphicGroupLayer.createLayer(newname)
          }
          this.showLayerTree()
        },
      })
    }
    changeSelectedLayer(layer) {
      this.graphicGroupLayer.selectedLayer = layer
      this.showLayerTree()
    }
    moveToLayer(graphic, group) {
      this.graphicGroupLayer.moveToLayer(graphic, group)
    }
    //数据保存及加载处理
    sendGetList() {
      if (window.hasServer) {
        //读取后台存储
        // window.sendAjax({
        //   url: 'map/plot/list',
        //   type: 'get',
        //   success: (arr) => {
        //     var arrjson = []
        //     for (var i = 0; i < arr.length; i++) {
        //       var geojson = JSON.parse(arr[i].geojson)
        //       geojson.properties.id = arr[i].id
        //       arrjson.push(geojson)
        //     }
        //     this.loadGeoJSON({ type: 'FeatureCollection', features: arrjson }, true, true)
        //   },
        // })
      } else {
        //读取本地存储
        var laststorage = haoutil.storage.get(this.storageName) //读取localStorage值
        if (laststorage == null || laststorage == 'null') {
          this.loadDemoData()
        } else {
          var json = JSON.parse(laststorage)
          this.loadGeoJSON(json, true, true)
        }
      }
    }
    sendSaveEntity(graphic) {
      if (this.viewWindow == null) {
        return
      }
      console.log('plot: 保存了数据')

      if (window.hasServer) {
        //服务端存储
        // if (!graphic.attr.name) {
        //   haoutil.msg('名称不可为空！')
        //   return
        // }
        // let geojson = graphic.toGeoJSON()
        // window.sendAjax({
        //   url: 'map/plot/update',
        //   type: 'post',
        //   data: {
        //     id: graphic.id,
        //     name: graphic.attr.name || '', //名称
        //     geojson: geojson || '', //geojson
        //   },
        //   contentType: 'application/json',
        //   success: function (data) {
        //     graphic.id = data.id
        //   },
        // })
      } else {
        //本地存储
        var geojson = JSON.stringify(this.getGeoJson())
        haoutil.storage.add(this.storageName, geojson)
      }

      //测试的功能
      //this.sendSocket(graphic)
    }
    sendDeleteEntity(graphic) {
      console.log('plot: 删除了数据')

      if (window.hasServer) {
        //后台删除
        // window.sendAjax({
        //   url: 'map/plot/' + graphic.id,
        //   type: 'delete',
        //   contentType: 'application/json',
        //   success: function (result) {},
        // })
      } else {
        var storagedata = JSON.stringify(this.getGeoJson())
        haoutil.storage.add(this.storageName, storagedata)
      }
    }
    sendDeleteAll() {
      console.log('plot: 删除了所有数据')

      if (window.hasServer) {
        //后台删除
        // window.sendAjax({
        //   url: 'map/plot/deleteAll',
        //   contentType: 'application/json',
        //   success: function (result) {},
        // })
      } else {
        //本地存储
        haoutil.storage.del(this.storageName)
      }
    }

    //websocket更新坐标
    // socketConfig() {
    //   var that = this
    //   mars3d.widget.activate({
    //     uri: 'widgets/plotSocket/widget.js',
    //     updateAttr: function (json) {
    //       that.graphicGroupLayer.loadGeoJSON(json, {
    //         clear: false,
    //         flyTo: false,
    //       })
    //     },
    //   })
    // }
    // sendSocket(graphic) {
    //   var plotSocket = mars3d.widget.getClass('widgets/plotSocket/widget.js')
    //   if (plotSocket && plotSocket.isActivate) {
    //     plotSocket.sendSocket(graphic.toGeoJSON())
    //   }
    // }

    //实际系统时可以注释下面代码，该代码是mars3d官网在线加载演示数据
    loadDemoData() {
      if (window.location.hostname.indexOf('mars') == -1) {
        return
      }

      $.getJSON('http://data.marsgis.cn/file/geojson/draw-demo.json', (result) => {
        if (!this.isActivate) {
          return
        }
        this.loadGeoJSON(result, true, true)
      })
    }
  }

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

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