<template>
  <div :id="mapid" style="width: 100%; height: 100%;background-color: aliceblue;"></div>
  <div class="changeMap_box" v-if="props.isShow">
    <!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3"  @change="onMapImageChange">
      <el-carousel-item>
        <div class="mapImageItem">
          <img :src="require('@/assets/images/layout/slt.jpg')" alt="" />
          <div>栅格浅色</div>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="mapImageItem">
          <img :src="require('@/assets/images/layout/yxt.jpg')" alt="" />
          <div>影像图</div>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="mapImageItem">
          <img :src="require('@/assets/images/layout/yst.jpg')" alt="" />
          <div>栅格深色</div>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="mapImageItem">
          <img :src="require('@/assets/images/layout/shy.png')" alt="" />
          <div>三合一</div>
        </div>
      </el-carousel-item>
    </el-carousel> -->
    <!-- 地图缩放 -->
    <div class="zoomTargetBox">
      <el-input-number :min="6" :max="17" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom">
      </el-input-number>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
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 map;
let mapLayer;
let mapLayer1;
onMounted(() => {
  emitter.on("followUp", (res) => {
    let box = document.getElementsByClassName("changeMap_box");
    if (!box) return;
    box[0].style.right = !res ? "4px" : "398px";
    box[0].style.transition = "0.5s";
  });
  map = new EliMap({
    id: props.mapid,
    crs: "EPSG:3857",
    style: {
      glyphs: "./fonts/{fontstack}/{range}.pbf",
      center: [104.41361653448905, 31.127827898122767],
      zoom: 10
    },
    transformRequest: (url) => {
      if (url.indexOf("TileMatrix=") != -1) {
        const arr = url.split("TileMatrix=");
        const arr1 = arr[1].split("&");
        const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]
          }`;

      }
    }
  });

  window.map = map;
  let layer;
  // 路况
  const add = () => {
    layer = map.addMvtLayer({
      url:
        "http://8.137.10.142:19333/data-support/mvt/roadCondition/3857/{z}/{x}/{y}",
      sourceLayer: "mvt",
      layer: "line",
      style: {
        paint: {
          // state:道路路段交通情况（1畅通  2缓慢  3拥堵  4极度拥堵  5无数据）
          "line-color": [
            "match",
            ["get", "state"],
            1,
            "#53FF2B",
            2,
            "#FFEA47",
            3,
            "#FF5627",
            4,
            "#FF1200",
            5,
            "#999999",
            "#53FF2B"
          ],
          "line-width": 3
        },
        layout: {
          "line-join": "miter",
          "line-cap": "round"
        }
      }
    });
  };
  map.mapboxGLMap.on("load", () => {
   map.addGaudLayer({
        // url:'http://online1.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1',
            url:'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
        })
    
    zoomTarget.value = map.mapboxGLMap.getZoom();
  });
  mapUtil.value = new MapUtil(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) => {
    mapUtil.value.makerSki(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.mapboxGLMap.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 });
};

//获取地图绘制的数据
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("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>
