<template>
  <div id="Map"></div>
</template>

<script setup name="Map">
import { ref, reactive, toRefs, onMounted } from "vue";
import NewFiberMapUtils from "@/utils/gis/NewFiberMapUtils";
import axios from "axios";
import bus from "@/bus";
import iconTest from "@/assets/images/gcpjimg/gwjcd.png";
import { typeofIcon } from "@/utils/gis/getTypeIcon";
import localFeature from "./localFeatureData";
import localProjecj from "./localProject";
import localNoClick from "./localNoClickData";
import xiaoGanRoad from "./xiaoGanRoad.json";
const AllData = reactive({
  features: [],
});

const initMap = async () => {
  window.newfiberMap = new NewFiberMapUtils("Map", {
    featureClick: (a) => {
      const zoom = newfiberMap.map.getZoom();
      if (zoom < 17) newfiberMap.setFitViewByFeatures(a.layer, { zoom: 17 });
       else bus.emit("mapClick",a.layer.extData);
      // console.log(a,22);
    },
  });
  setTimeout(() => newfiberMap.setFitViewByFeatures(null, { zoom: 5 }), 1000);
};

const setSites = (sites, options) => {
  let obj = {};
debugger;
  sites.data
    .filter((i) => Boolean(i.lonLat) || Boolean(i.latitude) || Boolean(i.geometry))
    .forEach((i) => {
      if (!!!obj[i.siteType]) obj[i.siteType] = [];
      if (i.lonLat)
        i.geometry = `POINT(${i.lonLat.split(",").join(' ')})`;
      if (i.latitude && i.longitude)  i.geometry = `POINT(${i.longitude} ${i.latitude})`;
      if (i.projectLocation) i.geometry = i.projectLocation;
      i.icon_src = typeofIcon(i.siteType);
      i.gisType = "site";
      if (!!i.geometry) obj[i.siteType].push(i);
    });
  Object.keys(obj).forEach((i) => {
    newfiberMap.addGeojson(
      newfiberMap.beansToGeojson(obj[i], {
        id: "siteType",
        name: "stName",
        geometry: "geometry",
        icon: "icon_src",
        color: "color",
        visible: true,
      })
    );
  });
};
const setProjects = (projects, options) => {
  let obj = {};
  projects.data
    .filter((i) => Boolean(i.lonLat) || Boolean(i.projectLocation) || Boolean(i.geometry))
    .map((i) => {
      if (!!!obj[i.projectTypeCode]) obj[i.projectTypeCode] = [];
      if (i.lonLat)
        i.geometry = `POINT(${ i.lonLat.split(",").join(" ")})`;
      if (i.projectLocation)
        i.geometry = i.projectLocation;
      i.icon_src = typeofIcon(i.projectTypeCode);
      i.gisType = "project";
     obj[i.projectTypeCode].push(i);
    });
  Object.keys(obj).forEach((i) => {
    // debugger
    newfiberMap.addGeojson(
      newfiberMap.beansToGeojson(obj[i], {
        id: "projectTypeCode",
        name: "projectName",
        geometry: "projectLocation",
        icon: "icon_src",
        // visible: false,
        // gisType:'project',
      })
    );
  });
};
const setPolyGonFeature = (polygonData, options) => {
  let obj = {};
  polygonData.data
    .filter((i) => Boolean(i.geometry))
    .map((i) => {
      if (!!!obj[i.siteType]) obj[i.siteType] = [];
      i.icon_src = typeofIcon(i.siteType);
      if (!!i.geometry) obj[i.siteType].push(i);
    });
  Object.keys(obj).forEach((i) => {
    newfiberMap.addGeojson(
      newfiberMap.beansToGeojson(obj[i], {
        id: "siteType",
        name: "stName",
        geometry: "geometry",
        icon: "icon_src",
        color: "color",
        visible: false,
      })
);
  });
};
onMounted(() => {
  initMap();
  newfiberMap.addGeojsonPolyline(xiaoGanRoad, { id: "Road", visible: false });
  // setSites(localFeature); //站点
  // setProjects(localProjecj); //工程
  setPolyGonFeature(localNoClick); //分区
  bus.on("setSites", (data) => {
    setSites(data);
  });
  bus.on("setProjects", (data) => {
    setProjects(data);
  });
  bus.on("zeiLaoPoint", (data) => {
    setSites(data);
  });
});
</script>

<style lang="scss" scoped>
#Map {
  width: 100%;
  height: 100%;
}
</style>