"use script"; //开发环境建议开启严格模式
(function (window, mars3d) {
  //创建widget类，需要继承BaseWidget
  class MyWidget extends mars3d.widget.BaseWidget {
    //弹窗配置
    get view() {
      return {
        type: "window",
        url: "view.html",
        windowOptions: {
          width: 350,
          position: {
            top: 45,
            bottom: 30,
            right: 5,
          },
        },
      };
    }

    //初始化[仅执行1次]
    create() {
      this.gaoDePoi = new mars3d.query.GaodePOI({
        // key: ['ae29a37307840c7ae4a785ac905927e0'],
      });

      //创建矢量数据图层
      this.poiLayer = new mars3d.layer.GraphicLayer();
      this.poiLayer.bindPopup(function (event) {
        var item = event.graphic.attr;

        var inHtml = '<div class="mars-popup-titile">' + item.name + '</div><div class="mars-popup-content" >';
        var type = $.trim(item.type);
        if (type != "") {
          inHtml += "<div><label>类别</label>" + type + "</div>";
        }
        var xzqh = $.trim(item.xzqh);
        if (xzqh != "") {
          inHtml += "<div><label>区域</label>" + xzqh + "</div>";
        }
        var tel = $.trim(item.tel);
        if (tel != "") {
          inHtml += "<div><label>电话</label>" + tel + "</div>";
        }
        var address = $.trim(item.address);
        if (address != "") {
          inHtml += "<div><label>地址</label>" + address + "</div>";
        }
        inHtml += "</div>";
        return inHtml;
      });
    }
    //每个窗口创建完成后调用

    winCreateOK(opt, result) {
      this.viewWindow = result;
    }
    //打开激活
    activate() {
      this.map.addLayer(this.poiLayer);
    }
    //关闭释放
    disable() {
      this.clearAll();
      this.map.removeLayer(this.poiLayer);
    }
    draw(type) {
      this.clearAll();

      if (type == 1) {
        this.map.graphicLayer.startDraw({
          type: "rectangle",
          style: {
            color: "#00FF00",
            opacity: 0.3,
            outline: true,
            outlineColor: "#ffffff",
            clampToGround: true,
          },
          success: (graphic) => {
            this.drawGraphic = graphic;
          },
        });
      } else if (type == 2) {
        this.map.graphicLayer.startDraw({
          type: "polygon",
          style: {
            color: "#00FF00",
            opacity: 0.3,
            outline: true,
            outlineColor: "#ffffff",
            clampToGround: true,
          },
          success: (graphic) => {
            this.drawGraphic = graphic;
          },
        });
      } else {
        this.map.graphicLayer.startDraw({
          type: "circle",
          style: {
            color: "#00FF00",
            opacity: 0.3,
            outline: true,
            outlineColor: "#ffffff",
            clampToGround: true,
          },
          success: (graphic) => {
            this.drawGraphic = graphic;
          },
        });
      }
    }
    loadMore() {
      if (!this.lastQueryOptions) {
        return;
      }
      this.lastQueryOptions.page++;
      this.loadData(this.lastQueryOptions);
    }
    loadData(queryOptions) {
      haoutil.loading.show();

      this.lastQueryOptions = {
        ...queryOptions,
        count: 25, //count 每页数量
        success: (res) => {
          var data = res.list;
          this.addGraphics(data);
          this.viewWindow.loadSuccess(res);

          haoutil.loading.close();
        },
        error: (msg, error) => {
          window.toastr.error(msg);
          haoutil.loading.close();
        },
      };
      this.gaoDePoi.query(this.lastQueryOptions);
    }
    clearAll(noClearDraw) {
      this.lastQueryOptions = null;
      this.poiLayer.clear();

      if (!noClearDraw) {
        this.drawGraphic = null;
        this.map.graphicLayer.clear();
      }
    }
    getExtent() {
      return this.map.getExtent();
    }

    addGraphics(arr) {
      console.log("查询数据结果", arr);

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

        var graphic = new mars3d.graphic.BillboardEntity({
          position: Cesium.Cartesian3.fromDegrees(item.x, item.y),
          style: {
            image: "img/marker/mark3.png",
            scale: 1,
            scaleByDistance: true,
            scaleByDistance_far: 20000,
            scaleByDistance_farValue: 0.5,
            scaleByDistance_near: 1000,
            scaleByDistance_nearValue: 1,
            clampToGround: true, //贴地
            label: {
              text: item.name,
              font: "20px 楷体",
              color: Cesium.Color.AZURE,
              outline: true,
              outlineColor: Cesium.Color.BLACK,
              outlineWidth: 2,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              pixelOffset: new Cesium.Cartesian2(0, -30), //偏移量
              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000),
              clampToGround: true, //贴地
            },
          },
          attr: item,
        });
        this.poiLayer.addGraphic(graphic);

        item._graphic = graphic;
      }
    }
    flyTo(item) {
      var graphic = item._graphic;
      if (graphic == null) {
        toastr.warning(item.name + " 无经纬度坐标信息！");
        return;
      }
      var position = graphic.positionShow;
      this.poiLayer.closePopup();

      //参数解释：线面数据：scale控制边界的放大比例，点数据：radius控制视距距离
      this.map.flyToPoint(position, {
        radius: 2000, //距离目标点的距离
        duration: 3,
        complete: (e) => {
          //飞行完成回调方法
          this.poiLayer.openPopup(graphic);
        },
      });
    }
  }

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

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