<template>
  <div id="container" style="width: 100vw; height: 100vh;"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { MapUtil } from "./mapUtil";
import emitter from "@/utils/eventBus.js";
import { getItem } from "@/utils/storage";
const mMap = ref(null); //地图对象
const mapUtil = ref(null); //地图工具对象
const isLz = ref(false); //是否是泸州用户
const zoomTarget = ref(6);
const props = defineProps({
  mapid: {
    type: String,
    default: "mapDiv"
  },
  //是否显示可以切换地图底图
  isShow: {
    type: Boolean,
    default: false
  },
  //是否显示实时路况
  isShowMvt: {
    type: Boolean,
    default: false
  },
  //是否显示地图层级
  isShowZoom: {
    type: Boolean,
    default: false
  },
  //是否显示绘制控件
  isShowDraw: {
    type: Boolean,
    default: false
  }
});
try {
  const userInfo = getItem("deptId")[0].deptCode;
} catch (error) { }
let mapLayer;
let mapLayer1;
let map = null;
const initMap = () => {

}
onMounted(() => {
  // initMap();
  window._AMapSecurityConfig = {
    securityJsCode: '28161d95613f4bbf837d280529855a9d',
  };
  AMapLoader.reset()
  AMapLoader.load({
    key: "28161d95613f4bbf837d280529855a9d",
    version: "2.0"
  }).then((AMap) => {
    console.log(AMap, 'AMap');
    map = new AMap.Map("container", {
      resizeEnable: true,
      viewMode: "2D",
      zoom: 13,
      center: [104.41932348534466, 31.145006418228153],
    });
    AMap.plugin('AMap.Geolocation', function () {
      var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认：true
        timeout: 10000, // 设置定位超时时间，默认：无穷大
        offset: [10, 20],  // 定位按钮的停靠位置的偏移量
        zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        position: 'RB', //  定位按钮的排放位置,  RB表示右下
        zoomToAccuracy: true,
      })
      map.addControl(geolocation);
      geolocation.getCurrentPosition(
        function (status, result) {
          if (status == 'complete') {
            onComplete(result)
          } else {
            onError(result)
          }
        }
      )
    })
    let marker = new AMap.Marker({
      position: [104.41932348534466, 31.145006418228153], //位置
      title: '当前位置',
      zIndex: 100
    });
    map.add(marker);
    window.map = AMap;
    console.log(map, 'map');

    // map.mapboxGLMap.on("load", () => {
    //   map.addGaudLayer({
    //     url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    //   })
    // });
    mapUtil.value = new MapUtil(AMap, map);
    // mapUtil.value.Drawplot(); //初始化加载绘制工具

    // 设置地图中心点及图层
    emitter.on("setMapCenter", (res) => {
      mapUtil.value.setMapCenter(res.location, res.zoomLevel);
    });
    emitter.on("removePlot", (flag) => {
      mapUtil.value.removePlot(flag);
    });
    // 撒点
    emitter.on("addPointArea", (obj) => {
      console.log(obj, 'obj');
      mapUtil.value.makerSki(obj);
    });
    // 带标题的撒点
    emitter.on("addPointTakeTittle", (obj) => {
      mapUtil.value.makerShowTitle(obj);
    });
    // 鼠标滑过提示文字的点位
    emitter.on("showPoint", (obj) => {
      mapUtil.value.showPoint(obj);
    });

    // 清除覆盖物
    emitter.on("deletePointArea", (res) => {
      mapUtil.value.removeElement(res);
    });
    // 清除某个覆盖物的单个
    emitter.on("deletePointAreaOne", (obj) => {
      mapUtil.value.removeElementOne(obj.flag, obj.id);
    });

    // 绘制图形 - 回显区域
    emitter.on("drawShape", (res) => {
      mapUtil.value.plot(res, resFun);
    });
    // 回显图形
    emitter.on("echoPlane", (res) => {
      mapUtil.value.echoPlane(res);
    });
    //移除绘制区域
    emitter.on("removeEara", (flag) => {
      mapUtil.value.removeEara(flag);
    });
    // 回显线
    emitter.on("echoLine", (res) => {
      mapUtil.value.createLine(res, res.flag);
    });
    //创建边界面（geojson）
    emitter.on("setBoundarys", (res) => {
      mapUtil.value.createBoundarys(res);
    });
    // 移除边界
    emitter.on("removeBj", (res) => {
      mapUtil.value.removeBj(res);
    });
    //创建线（geojson）
    emitter.on("setBoundaryLine", (res) => {
      mapUtil.value.createBoundarysLine(res);
    });
    // 轨迹回放
    emitter.on("drawLineAnimation", (res) => {
      mapUtil.value.displayLineAnimation(res);
    });

    // 轨迹跟踪
    emitter.on("trackAnimation", (res) => {
      mapUtil.value.trackAnimationAnimation(res.coords, res.isClear);
    });
    // 聚合撒点
    emitter.on("addPoint", (obj) => {
      mapUtil.value.aggregateScatteringPoint(obj);
    });

    // 热力图显示
    emitter.on("thermodynamicChart", (res) => {
      mapUtil.value.showHeatDrawing(res);
    });
    // 清除热力图
    emitter.on("clearThermodynamicChart", (res) => {
      mapUtil.value.removeHeatDrawing(res);
    });
    // 扩散圆
    emitter.on("diffusionCircle", (res) => {
      mapUtil.value.diffusionCircle(res);
    });
    //自定义撒点(闪动效果)
    emitter.on("SsCircle", (res) => {
      mapUtil.value.makerZdy(res);
    });
    //删除自定义点位

    emitter.on("ClearssCircle", (res) => {
      mapUtil.value.clearmakerZdy(res);
    });

    // 展示盘曲
    emitter.on("showGapText", (obj) => {
      mapUtil.value.gapText(obj);
    });

    // 获取当前地图中心点
    emitter.on("getCurrentCenter", (res) => {
      let centerPoint = map.getCenter();
      let coords = [centerPoint.lng, centerPoint.lat];
      emitter.emit("getcentercoord", coords);
    });
  })
});
//切换地图底图
const onMapImageChange = (val) => {
  //清除已经存在胡地图图层
  if (map.mapboxGLMap.getLayer("SGQS_ID"))
    map.mapboxGLMap.removeLayer("SGQS_ID");
  if (map.mapboxGLMap.getLayer("YX_ID")) map.mapboxGLMap.removeLayer("YX_ID");
  if (map.mapboxGLMap.getLayer("SGSG_ID"))
    map.mapboxGLMap.removeLayer("SGSG_ID");
  if (map.mapboxGLMap.getLayer("TDT_TITLE_ID"))
    map.mapboxGLMap.removeLayer("TDT_TITLE_ID");
  if (map.mapboxGLMap.getLayer("TDT_ROAD_ID"))
    map.mapboxGLMap.removeLayer("TDT_ROAD_ID");
  if (map.mapboxGLMap.getLayer("TDT_POI_ID"))
    map.mapboxGLMap.removeLayer("TDT_POI_ID");
  //设置图层
  switch (val) {
    case 0:
      mapSetLayer("SGQS_ID", "SGQS");
      break;
    case 1:
      mapSetLayer("YX_ID", "YX");
      break;
    case 2:
      mapSetLayer("SGSG_ID", "SGSG");
      break;
    case 3:
      mapSetLayer("TDT_TITLE_ID", "TDT_TITLE_SOURCES");
      mapSetLayer("TDT_ROAD_ID", "TDT_ROAD_SOURCES");
      mapSetLayer("TDT_POI_ID", "TDT_POI_SOURCES");
      break;
  }
  if (map.mapboxGLMap.getLayer("realTimeTrafficlevelOne"))
    map.mapboxGLMap.moveLayer("realTimeTrafficlevelOne");
  if (map.mapboxGLMap.getLayer("map_id")) map.mapboxGLMap.moveLayer("map_id");
  if (map.mapboxGLMap.getLayer("map_ids")) map.mapboxGLMap.moveLayer("map_ids");
};

//设置图层函数
const mapSetLayer = (id, source) => {
  map.mapboxGLMap.addLayer({ id, type: "raster", source });
};
function onError(data) {
  console.log('定位失败');


}
function onComplete(data) {
  console.log('定位成功');

}

//获取地图绘制的数据
const resFun = (coord, type, flag, data) => {
  emitter.emit("coordString", {
    coord: coord,
    type: type,
    flag: flag,
    data: data
  });
};

// 地图层级
const handleZoom = (val) => {
  map.mapboxGLMap.setZoom(val);
};

onUnmounted(() => {
  emitter.off("removePlot");
  emitter.off("addPointArea");
  emitter.off("showPoint");
  emitter.off("deletePointArea");
  emitter.off("deletePointAreaOne");
  emitter.off("addPointTakeTittle");
  emitter.off("drawShape");
  emitter.off("echoPlane");
  emitter.off("removeEara");
  emitter.off("echoLine");
  emitter.off("addPoint");
  emitter.off("thermodynamicChart");
  emitter.off("clearThermodynamicChart");
  emitter.off("drawLineAnimation");
  emitter.off("trackAnimation");
  emitter.off("aggregateScatteringPoint");
  emitter.off("hotmap");
  emitter.off("setBoundarys");
  emitter.off("setBoundaryLine");
  emitter.off("diffusionCircle");
  emitter.off("SsCircle");
  emitter.off("ClearssCircle");
});
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
}

.changeMap_box {
  position: absolute;
  right: 398px;
  bottom: 4px;
  z-index: 9;

  .mapImageItem {
    border: 1px solid #08aae8;
    background: rgb(9, 26, 70);

    &>img {
      width: 100%;
      height: 50px;
    }

    &>div {
      text-align: center;
      position: relative;
      top: -3px;
    }
  }

  .zoomTargetBox {
    margin-top: 10px;
  }

  ::v-deep .el-input-number__decrease,
  ::v-deep .el-input-number__increase {
    background: #133362;
    color: #fff;
    border: none;
  }

  ::v-deep .el-input__inner {
    background: #0c1641;
  }
}
</style>
