<template>
  <div>
    <div class="bigBox">
      <div class="titleBox">
        <div class="title">地图描点</div>
        <div class="btnBox">
          <el-button style="margin-left: 10px" type="primary" :loading="loading" @click="searchHander">
            <el-icon>
              <Search />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button type="primary" @click="CloseEvent">
            <el-icon>
              <Back />
            </el-icon>
            <span>返回</span>
          </el-button>

        </div>
      </div>
      <div class="map_container" id="map_container"></div>
    </div>
  </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import MapUtil from "./BMapUtils.js";
import { onMounted, ref, onUnmounted } from "vue";
import cityJosn from "./cityJSON/gz.json";
import emitter from "@/utils/eventBus.js";
const emits = defineEmits(["close", "point"]);
const lngs = ref(null)
const lats = ref(null)
const map = ref(null);
const MapUtils = ref(null);
const isArea = ref(false);
onMounted(() => {
  map.value = new BMap.Map("map_container"); // 创建Map实例
  MapUtils.value = new MapUtil(map.value); // 注入地图方法
  initMap(); // 地图初始化
  _setArea();

  //监听地图层级
  map.value.addEventListener("zoomend", function (e) {
    var ZoomNum = map.value.getZoom();
    //小于8级 显示省级数据
    if (ZoomNum < 8 && !isArea.value) {
      isArea.value = true;
    } else {
      isArea.value = false;
    }
  });

  // 初始化地图,设置中心点坐标和地图级别
  MapUtils.value.setCenterLevel(106.713478, 26.578343, 8);
  //显示场所点位
  emitter.on("showSitePoint", (val) => {
    val.forEach((item) => {
      MapUtils.value.countyAreaTotalModel({
        point: [item.jd, item.wd],
        orgObj: item,
        icon: getImgUrl('map/blue.png'),
        bgColor: "#2b836b"
      });
    });
  });
  //监听地图点击事件
  map.value.addEventListener('click', function (e) {
    MapUtils.value.removeOverlay();//清除前一个撒点
    lngs.value = e.sf.lng;
    lats.value = e.sf.lat;
    MapUtils.value.showMarker(e.sf.lng, e.sf.lat, getImgUrl('map/blue.png'))
  });
});
onUnmounted(() => {
  emitter.off("showSitePoint");
});

//绘制行政区域
const _setArea = () => {
  let count = cityJosn.features.length;
  for (let i = 0; i < count; i++) {
    let name = cityJosn.features[i].properties.name;
    let color = "orange";
    // if (name == "贵阳市") {
    //   color = "#ce4848";
    // } else if (name == "遵义市") {
    //   color = "blue";
    // } else {
    //   color = "orange";
    // }
    let coordinates = cityJosn.features[i].geometry.coordinates[0];
    let str = "";
    coordinates.forEach((item) => {
      str += item.join(";");
    });
    MapUtils.value.drawPolygon(str, color);
    //如果市毕节市 画出威宁自治县区域
    if (name == "毕节市") {
      let coords = "";
      let coordinates = cityJosn.features[i].geometry.coordinates[1];
      coordinates.forEach((item) => {
        coords += item.join(";");
      });
      MapUtils.value.drawPolygon(coords, color);
    }
  }
};
// 初始化地图
const initMap = () => {
  //开启鼠标滚轮缩放
  map.value.enableScrollWheelZoom(true);
  map.value.disableDoubleClickZoom();
  //2D 时打开
  map.value.addControl(
    new BMap.NavigationControl({
      offset: new BMap.Size(0, 200),
      enableGeolocation: true,
      anchor: BMAP_ANCHOR_BOTTOM_RIGHT
    })
  );
  map.value.addControl(
    new BMap.MapTypeControl({
      mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
      anchor: BMAP_ANCHOR_TOP_RIGHT,
      offset: new BMap.Size(150, -200)
    })
  );
}
function searchHander() {
  let obj = {
    lng: lngs.value,
    lat: lats.value
  }
  emits("point", obj);
  emits("close");
}
const CloseEvent = () => {
  emits("close");
};

</script>

<style lang="scss" scoped>
.titleBox {
  background: #fff;
}

#map_container {
  height: 80vh;
  z-index: 9999;
}

::v-deep .BMapLabel {
  border: 1px solid #000 !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
}
</style>
