"use script"; //开发环境建议开启严格模式
(function (window, mars3d) {
  var cityPosition = [
    { name: "亳州", jwd: [116.203602, 33.496075] },
    { name: "商丘", jwd: [115.871509, 34.297084] },
    { name: "淮北", jwd: [116.688413, 33.689214] },
    { name: "宿州", jwd: [117.234682, 33.740035] },
    { name: "徐州", jwd: [117.70509, 34.350708] },
    { name: "宿迁", jwd: [118.559349, 33.807355] },
    { name: "连云港", jwd: [118.875445, 34.619808] },
    { name: "临沂", jwd: [118.026908, 35.262767] },
    { name: "枣庄", jwd: [117.320268, 35.072555] },
    { name: "济宁", jwd: [116.856599, 35.500232] },
    { name: "菏泽", jwd: [115.716086, 35.05629] },
  ];

  /**
   * 根据名称获取坐标
   */
  function getJWDByName(name) {
    for (let i = 0; i < cityPosition.length; i += 1) {
      const item = cityPosition[i];
      if (item.name === name) {
        return item.jwd;
      }
    }
    return [];
  }

  //创建widget类，需要继承BaseWidget
  class MyWidget extends mars3d.widget.BaseWidget {
    //初始化[仅执行1次]
    create() {
      this.geoJsonLayer = new mars3d.layer.GeoJsonLayer({
        pid: 99, //图层管理 中使用，父节点id
        name: "淮海经济区11市",
        url: "//data.mars3d.cn/file/geojson/huaihai.json",
        symbol: {
          styleOptions: {
            materialType: mars3d.MaterialType.PolyGradient,
            color: "#3388cc",
            opacity: 0.7,
            alphaPower: 1.3,
            length: "{gdp}",
          },
          styleField: "Name",
          styleFieldOptions: {
            济宁市: { color: "#D4AACE" },
            临沂市: { color: "#8DC763" },
            菏泽市: { color: "#F7F39A" },
            枣庄市: { color: "#F7F39A" },
            徐州市: { color: "#96F0F1" },
            宿迁市: { color: "#EAC9A8" },
            连云港市: { color: "#F7F39A" },
            商丘市: { color: "#D4AACE" },
            宿州市: { color: "#8DC763" },
            亳州市: { color: "#96F0F1" },
            淮北市: { color: "#EAC9A8" },
          },
        },
      });

      //创建Graphic图层
      this.graphicLayer = new mars3d.layer.GraphicLayer({
        name: this.config.name,
        pid: 99, //图层管理 中使用，父节点id
      });
    }
    //打开激活
    activate() {
      this._last_basemap = this.map.basemap?.uuid;
      this.map.basemap = 2017; //切换底图到深色底图

      this.map.setCameraView({ lat: 31.338093, lng: 117.856434, alt: 284453, heading: 352, pitch: -38 });

      this.map.addLayer(this.geoJsonLayer);
      this.map.addLayer(this.graphicLayer);

      //加载数据
      $.ajax({
        type: "GET",
        url: "//data.mars3d.cn/file/apidemo/huaihai-jj.json",
        success: (res) => {
          this.showCityEconomyData(res.data);
        },
        error: (err) => {
          haoutil.msg("实时查询气象信息失败，请稍候再试");
        },
      });
    }
    //关闭释放
    disable() {
      if (this._last_basemap) {
        this.map.basemap = this._last_basemap; //还原底图
        this._last_basemap = null;
      }

      this.map.removeLayer(this.geoJsonLayer);
      this.map.removeLayer(this.graphicLayer);
    }

    showCityEconomyData(data) {
      const yearArr = Object.keys(data);
      this.showYearZT(data[yearArr[0]]);
    }

    /**
     * 展示某年的椎体
     */
    showYearZT(arr) {
      for (let i = 0; i < arr.length; i += 1) {
        const attr = arr[i];
        const jwd = getJWDByName(attr["name"]);

        const num1 = attr["第一产业"];
        const num2 = attr["第二产业"];
        const num3 = attr["第三产业"];
        const numall = Number(num1 + num2 + num3).toFixed(2);
        const html = `${attr["name"]}<br/>
                      <span style="color:#63AEFF">第一产业：${num1}</span><br/>
                      <span style="color:#FFB861">第二产业：${num2}</span><br/>
                      <span style="color:#FF6D5D">第三产业：${num3}</span>`;

        var height1 = Math.floor(num1 * 10);
        var height2 = Math.floor(num2 * 10);
        var height3 = Math.floor(num3 * 10);

        var p1 = Cesium.Cartesian3.fromDegrees(jwd[0], jwd[1], height3 / 2);
        var p2 = Cesium.Cartesian3.fromDegrees(jwd[0], jwd[1], height3 + height2 / 2);
        var p3 = Cesium.Cartesian3.fromDegrees(jwd[0], jwd[1], height3 + height2 + height1 / 2);

        // 添加柱体
        this.createZT(p1, height3, Cesium.Color.fromCssColorString("#63AEFF"), html);
        this.createZT(p2, height2, Cesium.Color.fromCssColorString("#FFB861"), html);
        this.createZT(p3, height1, Cesium.Color.fromCssColorString("#FF6D5D"), html);

        // 添加文字
        var primitive = new mars3d.graphic.LabelPrimitive({
          position: Cesium.Cartesian3.fromDegrees(jwd[0], jwd[1], height1 + height2 + height3),
          style: {
            text: numall,
            font_size: 18,
            font_family: "楷体",
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            fillColor: Cesium.Color.fromCssColorString("#00ff00"),
            outlineColor: Cesium.Color.BLACK,
            outlineWidth: 1,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(0, -20),
          },
        });
        this.graphicLayer.addGraphic(primitive);
        primitive.bindTooltip(html);
      }
    }

    /**  创建柱体 */
    createZT(position, len, color, html) {
      var graphic = new mars3d.graphic.CylinderEntity({
        position: position,
        style: {
          length: len,
          topRadius: 6000.0,
          bottomRadius: 6000.0,
          material: color,
        },
      });
      this.graphicLayer.addGraphic(graphic);

      graphic.bindTooltip(html);

      // graphic._position_show = position
      // graphic._length_show = len
      return graphic;
    }
  }

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

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