<template>
  <div class="container">
    <!-- 顶部操作栏 -->
    <!-- 内容区域 -->
    <div class="main-content">
      <!-- 右侧地图缩略图 -->
      <div class="map-thumbnail">
        <div id="mars2dContainerSSS" class="mars2d-container"></div>
      </div>
    </div>
  </div>
</template>

<script>
import 'mars2d/mars2d.css';
import * as mars2d from 'mars2d';

export default {
  components: {},
  data() {
    const basePathUrl = window.basePathUrl || "";
    return {
      configUrl: basePathUrl + "config/config.json",
      mapOptions: {
        copyright: false, // 不显示厂商logo
        basemaps: [
          {
            "id": 2021,
            "pid": 10,
            "name": "高德电子",
            "icon": "img/basemaps/gaode_vec.png",
            "type": "gaode",
            "layer": "vec",
            "show": true
          },
          {
            "pid": 10,
            "name": "高德卫星",
            "icon": "img/basemaps/gaode_img.png",
            "type": "group",
            "layers": [
              {
                "name": "底图",
                "type": "gaode",
                "layer": "img_d"
              },
              {
                "name": "注记",
                "type": "gaode",
                "layer": "img_z"
              }
            ]
          },
        ],
        center: { lat: 31.324918, lng: 120.618391 }, 
        zoom: 9, 
        zoomControl: true,
      },
      map: null, // 地图实例
      markerIcon: require('@/assets/images/detailsicon/icon-定位@2x.png'), // 坐标图icon
    };
  },
  methods: {
    // 初始化地图
    initMap() {
      this.map = new mars2d.Map('mars2dContainerSSS', this.mapOptions);
      this.map.on('load', this.onload);
    },
    // 地图加载完成后的回调
    onload() {
      this.addDistrictsLayer();
    },
    // 添加各区图层
    addDistrictsLayer() {
      const geoJsonLayer = new mars2d.layer.GeoJsonLayer({
        name: "苏州市各区",
        url: "http://data.mars2d.cn/file/geojson/areas/100000_full.json",
        symbol: {
          type: "polygon",
          styleOptions: {
            fill: true,
            fillColor: "white",
            fillOpacity: 0.7,
            outline: true,
            outlineWidth: 2,
            outlineOpacity: 1,
            outlineColor: "white"
          }
        },
        tooltip: "{name}<br/>项目数量:{num}个",
        flyTo: true
      });
      this.map.addLayer(geoJsonLayer);

      // 绑定事件
      geoJsonLayer.on(mars2d.EventType.load, (event) => {
        console.log("数据加载完成", event);

        const arrdata = [
        { name: "辽宁省", Y: 41.485959939, X: 124.049036594, value: 6, id: 0 },
      { name: "天津市", Y: 39.292278417, X: 117.337698238, value: 1, id: 1 },
      { name: "河北省", Y: 38.887537102, X: 115.05608039, value: 3, id: 2 },
      { name: "山东省", Y: 36.384634338, X: 118.335456608, value: 8, id: 3 },
      { name: "江苏省", Y: 31.949468221, X: 119.175534669, value: 12, id: 4 },
      { name: "上海市", Y: 31.205117603, X: 121.507670825, value: 1, id: 5 },
      { name: "浙江省", Y: 29.249913493, X: 120.438160114, value: 7, id: 6 },
      { name: "福建省", Y: 26.032479861, X: 118.134283206, value: 4, id: 7 },
      { name: "广东省", Y: 23.69235645, X: 113.489506429, value: 18, id: 8 },
      { name: "广西壮族自治区", Y: 23.806009465, X: 108.79016159, value: 6, id: 9 },
      { name: "海南省", Y: 19.210592585, X: 109.774303805, value: 11, id: 10 },
      { name: "云南省", Y: 24.224322869, X: 101.862567546, value: 1, id: 11 },
      { name: "四川省", Y: 30.627387401, X: 102.694776433, value: 2, id: 12 },
      { name: "重庆市", Y: 30.057271884, X: 107.874570298, value: 1, id: 13 },
      { name: "湖北省", Y: 30.975494014, X: 112.27112659, value: 14, id: 14 },
      { name: "湖南省", Y: 27.610006298, X: 111.708571339, value: 2, id: 15 },
      { name: "江西省", Y: 27.613817395, X: 115.721821513, value: 2, id: 16 },
      { name: "安徽省", Y: 31.825459619, X: 117.226379045, value: 7, id: 17 },
      { name: "黑龙江省", Y: 46.951327674, X: 128.132064887, value: 2, id: 18 }
        ];
        this.bindYewuData(event.graphics, arrdata);
      });

      // 绑定事件
      geoJsonLayer.on(mars2d.EventType.click, (event) => {
        const graphic = event.graphic;
        this.map.fitBounds(graphic.getBounds());
      });

      geoJsonLayer.on(mars2d.EventType.mouseover, (event) => {
        const graphic = event.graphic;
        graphic.setStyle({
          outlineColor: "#666",
          outlineWidth: 3,
          fillOpacity: 0.7
        });
        graphic.bringToFront();
      });

      geoJsonLayer.on(mars2d.EventType.mouseout, (event) => {
        const graphic = event.graphic;
        graphic.setStyle({
          outlineColor: "white",
          outlineWidth: 2,
          fillOpacity: 0.5
        });
      });
    },
    // 绑定业务数据
    bindYewuData(graphics, arrdata) {
      for (let i = 0; i < graphics.length; i++) {
        const graphic = graphics[i];
        graphic.attr.num = 0;
        for (let j = 0; j < arrdata.length; j++) {
          const fname = graphic.attr.name;
          if (arrdata[j].name.indexOf(fname) !== -1) {
            graphic.attr.num = arrdata[j].value;
            break;
          }
        }
        graphic.setStyle({ fillColor: this.getColor(graphic.attr.num) });
      }
    },
    // 获取颜色
    getColor(num) {
      const arrSpan = [1, 5, 10, 15, 20];
      const arrColor = ["#FFEDA0", "#FEB24C", "#FD8D3C", "#FC4E2A", "#E31A1C", "#BD0026", "#800026"];
      let length = arrSpan.length;
      if (length > arrColor.length) {
        length = arrColor.length;
      }

      for (let k = 0; k < length; k++) {
        if (num < arrSpan[k]) {
          return arrColor[k];
        }
      }
      return arrColor[length - 1];
    },
    // 添加图例
    addLegend() {
      let strHtml = "<div class='legend-title'>项目数量(个)</div>";

      const arrSpan = [1, 5, 10, 15, 20];
      const arrColor = ["#FFEDA0", "#FEB24C", "#FD8D3C", "#FC4E2A", "#E31A1C", "#BD0026", "#800026"];
      let length = arrSpan.length;
      if (length > arrColor.length) {
        length = arrColor.length;
      }

      for (let i = 0; i <= length; i++) {
        let label = arrSpan[i];

        if (i === 0) {
          label = "小于" + arrSpan[i];
        } else if (i === length) {
          label = "大于" + arrSpan[i - 1];
        } else {
          label = arrSpan[i - 1] + "-" + arrSpan[i];
        }

        strHtml +=
          "<div class='legend-item'><span class='legend-color' style='background:" +
          arrColor[i] +
          "'></span><span class='legend-des'>" +
          label +
          "</span></div>";
      }
      eventTarget.fire("initHtml", {
        html: strHtml
      });
    }
  },
  mounted() {
    this.initMap();
    this.addLegend(); // 在 mounted 生命周期钩子中调用 addLegend
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy();
    }
  }
};

// 事件对象，用于抛出事件给vue
export const eventTarget = new mars2d.BaseClass()
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  gap: 1rem;
  overflow: auto;
}

.main-content {
  display: flex;
  gap: 2rem;
  padding: 1rem;
}

.map-thumbnail {
  width: 100%;
  height: 25rem;
  position: relative;
}

.mars2d-container {
  width: 100%;
  height: 100%;
}

.classify {
  width: 2.81rem;
  height: 1.38rem;
  background-color: rgba(43, 98, 241, 0.8);
  border-radius: 0.69rem 0.69rem 0.69rem 0.69rem;
  color: white;
  position: absolute;
  bottom: .5rem;
  left: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .7rem;
  z-index: 999;
}

.legend-title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.3rem;
}

.legend-color {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  display: inline-block;
}

.legend-des {
  font-size: 0.9rem;
}
</style>