<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";
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.target.getExtData());
    },
  });
  let geojson = null;
  axios.get(import.meta.env.VITE_APP_MAP_SRC + "static/json/ys_flow.json").then((res) => {
    geojson = res.data;
  });

  setTimeout(() => {
    newfiberMap.dynamicLine(geojson);
  }, 2000);
  setTimeout(() => newfiberMap.setFitViewByFeatures(null, { zoom: 5 }), 1000);
};

const setSites = (sites, options) => {
  console.log("sites", sites);
  let obj = {};
  sites.data
    .filter((i) => Boolean(i.lonLat))
    .forEach((i) => {
      if (!!!obj[i.siteType]) obj[i.siteType] = [];
      if (i.lonLat)
        i.geometry = `POINT(${gcoord
          .transform(i.lonLat.split(",").map(Number), gcoord.WGS1984, gcoord.AMap)
          .join(" ")})`;
      if (i.projectLocation)
        i.geometry = Terraformer.WKT.convert(
          gcoord.transform(
            Terraformer.WKT.parse(i.projectLocation),
            gcoord.WGS1984,
            gcoord.AMap
          )
        );
      i.icon_src =
        i.siteType == "flow"
          ? "https://server1.wh-nf.cn:9000/newfiber-standard/resource/icon/流量.png"
          : i.siteType == "rain"
          ? "https://server1.wh-nf.cn:9000/newfiber-standard/resource/icon/降雨.png"
          : i.siteType == "RtuSite-WaterLevel"
          ? "https://server1.wh-nf.cn:9000/newfiber-standard/resource/icon/水位监测点.png"
          : undefined;
      if (!!i.geometry) obj[i.siteType].push(i);
    });

  // 拿到图例信息

  // const TuLiData = JSON.parse(localStorage.getItem("TuLiData"));
  // console.log(`123`, TuLiData);
  // let iconSrc = undefined;
  // TuLiData.forEach((element) => {
  // });
  // debugger;
  console.log(obj);
  Object.keys(obj).forEach((i) => {
    newfiberMap.addGeojson(
      newfiberMap.beansToGeojson(obj[i], {
        id: "siteType",
        name: "stName",
        geometry: "geometry",
        icon: "icon_src",
      })
    );
  });
};

const setProjects = (projects, options) => {
  let data = projects.data
    .filter((i) => Boolean(i.lonLat) || Boolean(i.projectLocation))
    .map((i) => {
      if (i.lonLat)
        i.geometry = `POINT(${gcoord
          .transform(i.lonLat.split(",").map(Number), gcoord.WGS1984, gcoord.AMap)
          .join(" ")})`;
      if (i.projectLocation)
        i.geometry = Terraformer.WKT.convert(
          gcoord.transform(
            Terraformer.WKT.parse(i.projectLocation),
            gcoord.WGS1984,
            gcoord.AMap
          )
        );
      if (!!i.geometry) return i;
    });
  newfiberMap.addGeojson(
    newfiberMap.beansToGeojson(data, {
      id: "id",
      name: "projectName",
      geometry: "geometry",
      icon: undefined,
    })
  );
};
onMounted(() => {
  initMap();
  bus.on("setSites", setSites);
  bus.on("setProjects", setProjects);
});
</script>

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