<template>
  <MapBox
    :initJson="props.initJson"
    :loadCallback="getModalData"
    @map-click="mapClickEvt"
    v-show="MapShow"
  >
  </MapBox>

  <PopupInfo>
    {{ item?.aaa }}
  </PopupInfo>
  <!-- <div id="trajectory-popup" ref="trajectory">1111</div> -->
  <!-- <div style="width: 700px; height: 350px" ref="streetSpace1" id="streetSpace1">
    <streetSpace :location="datas.location"></streetSpace>
  </div> -->
</template>

<script setup name="Map">
import bus from "@/bus";
import request from "@/utils/request";
import MapBox from "@/components/Map/Map";
import { getBaseListPoint } from "@/api/MonitorAssetsOnMap";
import { supervisionRealinformationList } from "@/api/internetVehicles";
import useUserStore from "@/store/modules/user";
import { reactive, onMounted, onBeforeUnmount, nextTick, defineProps, watch } from "vue";
import streetSpace from "@/components/Map/streetSpace";
import gq_line from "../../../public/static/libs/mapbox/json/gq_line.json";
import ys_flow1 from "../../../public/static/libs/mapbox/json/ys_flow_2.json";
import line from "../../../public/static/libs/mapbox/json/line.json";
import point from "../../../public/static/libs/mapbox/json/point.json";

import outlet_route from "../../../public/static/libs/mapbox/json/outlet_route.json";
import outlet_site from "../../../public/static/libs/mapbox/json/outlet_site.json";

import PopupInfo from "@/components/Map/popup.vue";
import { MapboxOverlay } from "@deck.gl/mapbox";
import { LineLayer, GeoJsonLayer } from "@deck.gl/layers";
import { TripsLayer, Tile3DLayer } from "@deck.gl/geo-layers";
import { Tiles3DLoader } from "@loaders.gl/3d-tiles";
const appStore = useUserStore();
const MapShow = ref(true);
const props = defineProps({
  // 数据id
  initJson: {
    type: String,
    default: () => "/static/libs/mapbox/style/wh_dhgx.json",
  },
  loadCallback: {
    type: Function,
    default: () => function () {},
  },
});
const datas = reactive({
  location: [],
  isOpenPanorama: false,
});
const { proxy } = getCurrentInstance();
const refreshTimer = ref(null);
const default_params = {
  point: {
    key: "point",
    prevId: null,
    children: {
      outlet_info2: {
        key: "outlet_info2",
      },
    },
  },
  sx_wn_hm_monitoring: {
    key: "sx_wn_hm_monitoring",
    prevId: null,
  },
  town: {
    key: "乡镇",
    c_key: "村",
    prevId: null,
  },
  hupo: {
    key: "湖泊",
    prevId: null,
  },
  gangqu: {
    key: "港渠",
    prevId: null,
  },
  psfq: {
    key: "排水分区",
    text_key: "排水分区_text",
    prevIds: [],
    children: {
      WS: { key: "污水分区" },
      YS: { key: "雨水分区" },
    },
  },
  hb_wh_dhgx_merge: {
    key: "hb_wh_dhgx_merge",
    children: {
      psfq: { key: "排水分区" },
    },
    prevId: null,
  },
  海绵型水系: { color: "rgba(35,184,153,1)" },
  海绵建筑与社区: { color: "rgba(255,119,125,1)" },
  海绵型道路广场: { color: "rgba(255,152,4,1)" },
  管网及泵站: { color: "rgba(0,153,68,1)" },
  海绵型公园绿地: { color: "rgba(223,214,20,1)" },
  flow: { color: "rgba(255,255,255,1)" },
  rain: { color: "rgba(255,255,255,1)" },

  water_level: { color: "rgba(255,255,255,1)" },
  waterlogging: { color: "rgba(255,255,255,1)" },

  rain_bz: { color: "rgba(255,255,255,1)" },
  sxt: { color: "rgba(255,255,255,1)" },
  WSCLC: { color: "rgba(255,255,255,1)" },
  overflow_outfall: { color: "rgba(255,255,255,1)" },

  rainfall: { color: "rgba(223,214,20,1)" },
  pipeline: { color: "rgba(223,214,20,1)" },
  drain_outlet: { color: "rgba(223,214,20,1)" },
};
window.mapInitBusName = "mapInitBusName";
const mapClickEvt = (lngLat, properties, layerId) => {
  datas.isOpenPanorama &&
    (() => {
      setPopupDom("proxy.$refs.streetSpace1", 2);
      newfiberMap.popup1.setLngLat(lngLat).addTo(newfiberMap.map);
      datas.location = lngLat;
    })();
  const _keys = [
    "rain_water_pump_station_info1",
    "sewage_pump_station_info1",
    "rainwater_pipeline_quality_area1",
    "clickPoint",
    "temporary",
  ];

  console.log("properties", properties, layerId);
  // 图层点击事件
  if (properties) {
    if (properties.type == _keys[4]) properties.type = properties.pointType;
    bus.emit("FenQuClick", { properties, layerId: layerId.split("_")[0] });
  }
  clearTrajectory();
  // clearTemporaryData();
  proxy.$emit("map-click1", lngLat, properties, layerId);
  const { town, hupo, gangqu, hb_wh_dhgx_merge, psfq, point } = default_params;
  const { setLayerVisible, setHighlight, setGeoJSON, removeMapDatas } = events_params;

  (() => {
    setHighlight_(properties);
    ysFlow();
    newfiberMap
      .getLayers()
      .filter((i) => i.newfiberId == "村域边界")[0]
      .setData(turf.featureCollection([]));
    busEmit(
      removeMapDatas.key,
      _keys.filter((i) => i != (properties || {}).type)
    );

    if (town.prevId) {
      busEmit(setLayerVisible.key, { layername: town.key, isCheck: true });
      busEmit(setLayerVisible.key, { layername: town.prevId, isCheck: false });
      town.prevId = null;
    }

    /*      if (psfq.prevIds.length &&  !([psfq.key,point.key].includes(layerId))) {
        districtMask();
        const isOne = psfq.prevIds.length == 1?1:2
        let properties = psfq.prevIds[psfq.prevIds.length -1];
        areaToMap(properties);
        psfq.prevIds =_.dropRight(psfq.prevIds);
        clearRouteMethod();
        ys_flow(properties,false);
        showOutletInfo(properties);
      }*/
  })();
  ((
    {
      [point.key]: () => {
        const { outlet_info2 } = point.children;
        ((
          {
            [outlet_info2.key]: (properties) => {
              clearRouteMethod();
              outletRouteMethod(properties);
            },
          }[properties.type] || function () {}
        )(properties));
      },
      [psfq.key]: () => {
        ["雨水系统流向", "雨水系统流向1"].forEach((k) =>
          busEmit(setLayerVisible.key, { layername: k, isCheck: false })
        );
        [
          "outlet_info2",
          "排口流向",
          "排口流向1",
          "rainwater_pipeline_quality1",
          _keys[2],
        ].forEach((k) => busEmit(setLayerVisible.key, { layername: k, isCheck: true }));
        areaToMap(properties);
      },
      [psfq.text_key]: () => {
        ["雨水系统流向", "雨水系统流向1"].forEach((k) =>
          busEmit(setLayerVisible.key, { layername: k, isCheck: false })
        );
        [
          "outlet_info2",
          "排口流向",
          "排口流向1",
          "rainwater_pipeline_quality1",
          _keys[2],
        ].forEach((k) => busEmit(setLayerVisible.key, { layername: k, isCheck: true }));
        areaToMap({
          ...properties,
          geometry: Terraformer.WKT.convert(JSON.parse(properties.geometrys)),
        });
      },
      [town.key]: () => {
        newfiberMap
          .getLayers()
          .filter((i) => i.newfiberId == "村域边界")[0]
          .setData(
            turf.featureCollection(
              newfiberMap.map
                .getSource("hb_wh_gxq_cun2")
                ._data.features.filter((i) => i.properties.type == properties.name)
            )
          );
        busEmit(setLayerVisible.key, { layername: town.key, isCheck: false });
        busEmit(setLayerVisible.key, { layername: properties.name, isCheck: true });
        town.prevId = properties.name;
      },
      [hupo.key]: () => {
        if (hupo.prevId) {
          busEmit(setLayerVisible.key, {
            layername: hupo.prevId,
            isCheck: false,
            values: [hupo.prevId, ["严东湖", "严西湖"].join(",")],
          });
          hupo.prevId = null;
          bus.emit("removeMapDatas", ["outlet_info1"]);
        }
        const keys = ["outlet_info", "村域边界", "lake"];
        const specialKeys = ["严东湖", "严西湖"];
        newfiberMap
          .getLayers()
          .filter((i) => i.newfiberId == keys[1])[0]
          .setData(
            turf.featureCollection(
              gq_line.features.filter((i) => i.properties.w_id == properties.name)
            )
          );
        let features = newfiberMap.map
          .getSource("point")
          ._data.features.filter(
            (i) =>
              i.properties.type == keys[0] &&
              i.properties.waterBodyType == keys[2] &&
              i.properties.waterBodyId == properties.pid
          )
          .map((i) => _.cloneDeep(i));
        features.forEach((i) => (i.properties.type = i.properties.type + "1"));
        busEmit(events_params.setGeoJSON.key, {
          json: turf.featureCollection(features),
          key: keys[0] + 1,
        });
        const values = [
          specialKeys.includes(properties.name) ? specialKeys.join(",") : properties.name,
        ];
        busEmit(setLayerVisible.key, {
          layername: properties.name,
          isCheck: true,
          values,
        });
        hupo.prevId = properties.name;
      },
      [gangqu.key]: () => {
        if (gangqu.prevId) {
          gangqu.prevId = null;
          bus.emit("removeMapDatas", ["outlet_info1"]);
        }
        const keys = ["outlet_info", "村域边界", "channel"];
        newfiberMap
          .getLayers()
          .filter((i) => i.newfiberId == keys[1])[0]
          .setData(
            turf.featureCollection(
              gq_line.features.filter((i) => i.properties.name == properties.name)
            )
          );
        let features = newfiberMap.map
          .getSource("point")
          ._data.features.filter(
            (i) =>
              i.properties.type == keys[0] &&
              i.properties.waterBodyType == keys[2] &&
              i.properties.waterBodyId == properties.pid
          )
          .map((i) => _.cloneDeep(i));
        features.forEach((i) => (i.properties.type = i.properties.type + "1"));
        busEmit(events_params.setGeoJSON.key, {
          json: turf.featureCollection(features),
          key: keys[0] + 1,
        });
        gangqu.prevId = properties.name;
      },
      [hb_wh_dhgx_merge.key]: () => {
        if (properties.layer == hb_wh_dhgx_merge.children.psfq.key) {
          const layerSplit = properties.c_layer.split("_");
          let geometry = Terraformer.WKT.parse(properties.geometry);

          busEmit(setHighlight.key, []);
          const type = _.chunk(layerSplit[1], 2)[0].join("");
          let pType = type == "雨水" ? "YS" : "WS";
          pType == "YS" ? ys_flow(properties, true) : ws_flow(properties);
          districtMask(properties);
          if (layerSplit[2] != 3) return mapCenterByData(turf.bbox(geometry));
          /*         let features = newfiberMap.map.getSource("hb_wh_dhgx_pipe_line_n_y_w")._data.features.filter((i) => i.properties[type + "系统"] == properties.name && i.properties["管段类型"] == pType);
                           let pFeatures = newfiberMap.map.getSource("point")._data.features.filter((i) => _keys.includes(i.properties.type) && (i.properties.pointTypeName || "").includes(type));
                           let p_features = turf.pointsWithinPolygon(turf.featureCollection(pFeatures), geometry);
                           p_features.features.forEach((i) => (i.properties.type = i.properties.type + 1));
                           busEmit(setGeoJSON.key, { json: p_features });
                           console.log("features", p_features, pFeatures);
                           busEmit(setHighlight.key, turf.flatten(turf.featureCollection(features)).features);*/
        }
      },
    }[layerId] ||
    function () {
      //newfiberMap.map.easeTo(newfiberMap.config_.params.init);
    }
  )());

  function areaToMap(properties) {
    clearRouteMethod();
    properties.level == "1" && !layerId
      ? newfiberMap.map.easeTo(newfiberMap.config_.params.init)
      : districtMask(properties);
    properties.level == "2" && showOutletInfo(properties);
    if (properties.level == "3" && properties.type == "YS") {
      ys_flow(
        { ...properties, c_layer: `排水分区_${properties.type}_${properties.level}` },
        true
      );
      let ids = newfiberMap.map
        .getSource(newfiberMap.map.getLayer("排水分区").source)
        ._data.features.filter(
          (i) => i.properties.p_type == properties.type + properties.name
        )
        .map((i) => i.properties.id);
      let p_feature = turf.flatten(
        turf.feature(Terraformer.WKT.parse(properties.geometry))
      ).features[0];

      let features = newfiberMap.map
        .getSource("point")
        ._data.features.filter((i) => _keys[2].includes(i.properties.type))
        .filter((o) => turf.booleanPointInPolygon(o, p_feature));
      // .filter(i => ids.includes(Number(i.properties.waterRegionId)));
      features = features.map((i) =>
        Object.assign(_.cloneDeep(i), {
          properties: { ...i.properties, type: i.properties.type + 1 },
        })
      );
      busEmit(setGeoJSON.key, { json: turf.featureCollection(features), key: _keys[2] });
    }
    let [closeLayer, openLayer] = layerId
      ? [properties.type + properties.p_name, properties.type + properties.name]
      : [properties.type + properties.name, properties.p_type];
    busEmit(setLayerVisible.key, {
      layername: psfq.children[properties.type].key,
      isCheck: false,
      values: Array.from(
        new Set(
          newfiberMap.map
            .getSource("hb_wh_dhgx_psfq_geometrys")
            ._data.features.map((i) => i.properties.p_type)
        )
      ),
    });
    busEmit(setLayerVisible.key, {
      layername: psfq.children[properties.type].key,
      isCheck: true,
      values: [openLayer],
    });
    if (layerId && psfq.prevIds.filter((i) => i.id == properties.id).length == 0)
      psfq.prevIds.push(properties);
  }

  function showOutletInfo(properties) {
    const key = "outlet_info";
    busEmit(setLayerVisible.key, {
      layername: key + properties.w_id,
      isCheck: Boolean(layerId),
    });
  }

  function outletRouteMethod(properties) {
    const _keys = ["排口流向", "排口流向1", "rainwater_pipeline_quality1"];
    _keys.forEach((k) => busEmit(setLayerVisible.key, { layername: k, isCheck: true }));
    let sites = turf.featureCollection(
      outlet_site.features.filter(
        (i) =>
          (i.properties.outlet_id || "").split(",").includes(properties.id) &&
          i.properties.connectType != "area"
      )
    );
    let routes = turf.featureCollection(
      outlet_route.features.filter((i) =>
        (i.properties.outlet_id || "").split(",").includes(properties.id)
      )
    );
    newfiberMap
      .getLayers()
      .filter((i) => i.newfiberId == _keys[1])[0]
      .setData(routes);
    busEmit(setGeoJSON.key, { json: routes, key: _keys[0] });
    busEmit(setGeoJSON.key, { json: sites, key: _keys[2] });
  }

  function districtMask(properties = {}) {
    let mb = turf.polygon([
      [
        [-180, -90],
        [180, -90],
        [180, 90],
        [-180, 90],
        [-180, -90],
      ],
    ]);
    let feature = [];
    if (properties.geometry) {
      let area = turf.feature(Terraformer.WKT.parse(properties.geometry));
      feature = [turf.difference(mb, area)];
      mapCenterByData(turf.bbox(area));
    }
    newfiberMap
      .getLayers()
      .filter((i) => i.newfiberId == "蒙版")[0]
      .setData(turf.featureCollection(feature));
  }

  function ys_flow(properties, visible) {
    const keys = ["雨水系统流向", "雨水系统流向1"];
    if (!visible)
      return keys.forEach((key) =>
        busEmit(setLayerVisible.key, { layername: key, isCheck: visible })
      );
    const layerSplit = properties.c_layer.split("_");
    const level = layerSplit[2];
    let features = ys_flow1.features.filter(
      (i) =>
        i.properties.level_ == level &&
        (level == "1" || i.properties["area_" + level] == properties.name)
    );
    const p = properties.name.substr(0, 2);
    let feature =
      level == "3"
        ? ys_flow1.features.filter((i) =>
            (i.properties.bind || "").includes(properties.name)
          )
        : ys_flow1.features.filter(
            (i) => i.properties.level_ < level && i.properties.area_2.includes(p)
          );
    ysFlow(turf.featureCollection(features.concat(feature)));
    keys.forEach((key) =>
      busEmit(setLayerVisible.key, { layername: key, isCheck: visible })
    );
    setHighlight_(properties);
  }

  function ws_flow(properties) {
    const keys_ = ["雨水", "污水"];
    const keys = ["1_泵站", "1_污水处理厂", "分区流向", "分区流向1"];
    bus.emit("removeMapDatas", keys);
    newfiberMap
      .getLayers()
      .filter((i) => i.newfiberId == keys[3])[0]
      .getSource()
      .setData(turf.featureCollection([]));
    let key = (properties.c_layer || "").includes(keys_[0]) ? keys_[0] : keys_[1];
    if (properties.pointTypeName) key = keys_[1];
    const nameKey = "龙王咀" || properties.name.substring(0, 2);
    let features = line.features.filter((i) => i.properties.area.includes(key));
    // let features1 = point.features.filter(i => i.properties.type.includes(key) );
    let points = _.groupBy(point.features, (a) => a.properties.type);
    features.forEach((i) => {
      i.properties.type = keys[2];
      i.properties.color = key == keys_[0] ? "rgba(21,127,176,1)" : "rgba(255,0,0,1)";
    });
    /*    Object.keys(points).map((key) =>
            bus.emit("setGeoJSON", {
              json: turf.featureCollection(
                points[key].map((i) => ({
                  type: i.type,
                  geometry: i.geometry,
                  properties: { ...i.properties, type: "1_" + key },
                }))
              ),
              key: "1_" + key,
            })
          );*/
    // bus.emit("setGeoJSON", { json: turf.featureCollection(features), key: keys[2] });
    /*  newfiberMap
          .getLayers()
          .filter((i) => i.newfiberId == keys[3])[0]
          .getSource()
          .setData(turf.featureCollection(features));*/
    setHighlight_(properties);
  }
};

function clearRouteMethod() {
  const { removeMapDatas } = events_params;
  const _keys = ["排口流向", "排口流向1", "rainwater_pipeline_quality1"];
  busEmit(removeMapDatas.key, [_keys[2], _keys[0]]);
  newfiberMap
    .getLayers()
    .filter((i) => i.newfiberId == _keys[1])[0]
    .setData(turf.featureCollection([]));
}

function setHighlight_(properties = {}) {
  const temporary = "temporary";
  bus.emit("removeMapDatas", [temporary]);
  if (!properties.geometry || properties.geometry.includes("POINT")) return;
  let geojson = turf.polygonToLine(Terraformer.WKT.parse(properties.geometry));
  geojson = geojson.features ? geojson : turf.featureCollection([geojson]);
  geojson.features.forEach(
    (i) => (i.properties = { color: "rgba(255,255,0,1)", type: temporary })
  );
  bus.emit("setGeoJSON", { json: geojson, key: temporary });
  /*   newfiberMap
            .getLayers()
            .filter((i) => i.newfiberId == "村域边界")[0]
            .setData(geojson);*/
}

const getModalData = () => {
  isClockInRange();
  Object.keys(events_params)
    .filter((key) => events_params[key].method)
    .forEach((key) => busOn(events_params[key].key, events_params[key].method));
  // 获取地图项目数据
  dataToMap({});
  createPopup();
  busEmit(events_params.closeAllLayer.key);
  proxy.$emit("loadCallback");
  ww();
  ysFlow();

  newfiberMap.contextMenu = new mapboxgl1.ContextMenu({
    items: [
      {
        text: "街景",
        callback: async (point1, feature, layerId) => {
          console.log("周边街景经纬度1", point1);
          let point = _.cloneDeep(point1);
          let clickPoint = turf.point(Object.values(point));
          let positionAddress = "";
          gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
          let data = await request(
            `/bdApi//baiduservice/panorama?fov=180&height=256&width=512&location=${turf
              .getCoords(clickPoint)
              .join(",")}`
          );
          data.data.base64 =
            data && data.data && "data:image/jpeg;base64," + data.data.base64;
          gcoord.transform(clickPoint, gcoord.BD09, gcoord.GCJ02);
          const regeodata = await geoRegeo({ lngLat: turf.getCoords(clickPoint) });
          positionAddress =
            regeodata.info === "OK" && regeodata.regeocode.formatted_address;
          gcoord.transform(clickPoint, gcoord.GCJ02, gcoord.WGS84);
          busEmit(events_params.setGeoJSON.key, {
            json: turf.featureCollection([clickPoint]),
            key: "clickPoint",
          });
          data.roadName = positionAddress;
          bus.emit("popupcontent", {
            popupShow: true,
            point: turf.getCoords(clickPoint),
            popupInfo: data,
          });
          console.log("周边街景经纬度2", turf.getCoords(clickPoint));
        },
      },
    ],
  });
  newfiberMap.contextMenu.addTo(newfiberMap.map);
};

const ysFlow = (geojson) => {
  const key = "雨水系统流向";
  const widths = ["", 10, 5, 1];
  if (!geojson) {
    ys_flow1.features = ys_flow1.features.map((i) => ({
      ...i,
      properties: {
        ...i.properties,
        color: "rgba(10,170,249,1)",
        width: widths[i.properties.level_],
        name: undefined,
      },
    }));
    geojson = turf.featureCollection(
      ys_flow1.features.filter((i) => i.properties.level_ == 1)
    );
  }
  bus.emit("removeMapDatas", [key + "1"]);
  newfiberMap
    .getLayers()
    .filter((i) => i.newfiberId == key)[0]
    .setData(geojson);
  busEmit(events_params.setGeoJSON.key, { json: geojson, key: key + 1 });
};

const ww = () => {
  const keys = ["尾水路径"];
  let features = newfiberMap.map
    .getSource("hb_wh_dhgx_merge")
    ._data.features.filter(
      (i) => i.properties.c_layer.includes(keys[0]) && i.properties.geometry_type == 2
    );
  busEmit(events_params.setGeoJSON.key, {
    json: turf.featureCollection(features),
    key: keys[0],
  });
};

let prevObj = null;
const panelDataToMap = (obj) => {
  let isUp = Object.keys(obj).includes("isUp") ? obj.isUp : true; //是否触发地图点击事件  默认触发
  // debugger
  const { setLayerVisible, setHighlight } = events_params;
  // if (prevObj != null) busEmit(setLayerVisible.key, { layername: prevObj.type, isCheck: false });
  busEmit(setHighlight.key, []);
  // busEmit(setLayerVisible.key, { layername: obj.type, isCheck: true });
  // debugger;
  let features = [
    "point",
    "linestring",
    "polygon",
    "hb_wh_dhgx_psfq_geometrys",
    "hb_wh_dhgx_merge",
  ]
    .map((key) =>
      newfiberMap.map
        .getSource(key)
        ._options.data.features.filter(
          (i) =>
            (i.properties.name || "").includes(obj.name) ||
            (obj.id ? obj.id == i.properties.pid : true)
        )
    )
    .flat();
  let feature =
    features.filter((i) => i.properties.p_type)[0] ||
    features.filter((i) => i.properties.name == obj.name)[0] ||
    features[_.random(0, features.length - 1)];
  console.log("feature.properties.p_type&&isUp", feature.properties.p_type && isUp);
  if (feature.properties.p_type && isUp)
    return mapClickEvt(undefined, feature.properties, "排水分区");
  if (!feature) return;
  busEmit(setHighlight.key, [feature]);
  mapCenterByData(turf.bbox(feature));
};

const mapCenterByData = (bbox) => {
  newfiberMap.map.fitBounds(
    [
      [bbox[0], bbox[1]],
      [bbox[2], bbox[3]],
    ],
    { padding: 50, offset: [100, 10], maxZoom: 18, pitch: 0, duration: 500 }
  );
};
const trajectoryToMap = (data) => {
  clearTrajectory();
  const fields = { lng: "l", lat: "a" };
  mapCenterByData([data[0]["l"], data[0]["a"], data[1]["l"], data[1]["a"]].map(Number));
  newfiberMap.map.trackLayer = new mapboxgl1.TrackLayer(
    newfiberMap.map,
    data,
    fields,
    (properties, index) => {
      const lng = properties[fields.lng];
      const lat = properties[fields.lat];
      if (!(index % 50)) {
        newfiberMap.map.flyTo({
          center: [lng, lat],
          bearing: newfiberMap.map.getBearing(),
          pitch: newfiberMap.map.getPitch(),
          zoom: newfiberMap.map.getZoom(),
        });
      }
      /*        setPopupDom('proxy.$refs.trajectory', 1);
                                    newfiberMap.popup.setLngLat([lng,lat]).addTo(newfiberMap.map);*/
    }
  );
};

const clearTrajectory = () => {
  if (newfiberMap.map.trackLayer) newfiberMap.map.trackLayer.destory();
  if (newfiberMap.popup) newfiberMap.popup.remove();
};

const dataToMap = async ({ params, callback }) => {
  const { setLayerVisible, beansToMap } = events_params;
  const data_default_params = {
    sites: {
      method: getBaseListPoint,
      fields: { geometry: "geometry", name: "name" },
      groupMethod: (data) =>
        _.groupBy(
          data
            .map((i) => i.data)
            .flat()
            .filter((i) => i.geometry)
            .map((item) => ({ ...item })),
          (v) => v.pointType + (v.connectType ? "_" + v.connectType : "")
        ),
      others: {
        outlet_info: {
          method: (data) =>
            data.map((i) => ({ ...i, type: i.pointType + i.waterBodyId })),
        },
      },
    },
    //车辆
    cheliang: {
      method: supervisionRealinformationList,
      fields: { lng: "longitude", lat: "latitude", name: "plateNumber" },
      groupMethod: (data) =>
        _.groupBy(
          data.supervisionRealinformationList
            .filter((i) => i.longitude && i.latitude)
            .map((item) => ({ ...item, type: item.vehicleCategory + item.status })),
          (v) => v.type
        ),
    },
  };
  const other_data_params = {};
  let keys = Object.keys(params || data_default_params);
  const results = await Promise.all(
    keys.map((k, idx) =>
      data_default_params[k].method((params || {})[k] || data_default_params[k].mPrams)
    )
  );
  results.forEach((result, idx) => {
    const data = result.data;
    const k = keys[idx];
    if (!data) return;
    if (k == keys[0]) appStore.SET_MapData(filterGeometryNotEmpty(data));
    bus.emit("changeData");
    const groups = data_default_params[k].groupMethod(data);
    const g_keys = Object.keys(groups);
    bus.emit("removeMapDatas", g_keys);
    g_keys.forEach((key) => {
      busEmit(beansToMap.key, {
        beans: groups[key].map((i) => ({
          ...i,
          color: (default_params[key] || {}).color,
        })),
        fields: data_default_params[k].fields,
        type: key,
      });
      const other = (data_default_params[k].others || {})[key];
      other &&
        busEmit(beansToMap.key, {
          beans: other.method(groups[key]),
          fields: data_default_params[k].fields,
          type: key,
        });
    });
  });

  callback && callback();
};

const createPopup = () => {
  newfiberMap.popup = new mapboxgl1.Popup({
    closeButton: false,
    closeOnClick: false,
  });
  newfiberMap.popup1 = new mapboxgl1.Popup({
    closeButton: false,
    closeOnClick: false,
  });
};

const setPopupDom = (dom, offset) => {
  f();
  nextTick(f);
  function f() {
    console.log("eval(dom)", eval(dom));
    newfiberMap.popup1.setDOMContent(eval(dom));
    newfiberMap.popup1.setOffset(offset);
  }
};

function filterGeometryNotEmpty(inputData) {
  return inputData.map((item) => {
    // 过滤掉每个对象中的 data 数组里 geometry 为空的元素
    const filteredData = item.data.filter((dataPoint) => dataPoint.geometry !== "");
    return {
      ...item,
      data: filteredData,
    };
  });
}

//路径规划
const pathPlanning = async (
  origin = "116.481028,39.989643",
  destination = "116.465302,40.004717",
  callback
) => {
  const origin_ = origin.split(",").map(Number);
  const destination_ = destination.split(",").map(Number);
  if (origin_.length != 2 || destination_.length != 2)
    return console.log("输入参数错误：", origin, destination);
  const results = await request(
    `/amap/v3/direction/driving?origin=${origin}&destination=${destination}&extensions=all&output=json&key=f627fbb24176be73142eb0b5088d8683`
  );
  if (!results.route.paths[0]) return console.log("暂无路径！");
  callback &&
    callback(
      turf.featureCollection(
        results.route.paths[0].steps.map((i) =>
          turf.feature(
            Terraformer.WKT.parse(
              `LINESTRING(${i.polyline
                .split(";")
                .map((i) => i.split(",").join(" "))
                .join(",")})`
            ),
            i
          )
        )
      )
    );
};

//地理/逆地理编码
const geoRegeo = async ({ name, lngLat, callback }) => {
  let flag,
    params = null;
  if (name) (flag = "geo"), (params = `address=${name}`);
  if (lngLat) (flag = "regeo"), (params = `location=${lngLat.join(",")}`);
  if (!(flag || params)) console.log("name,lngLat is null!");
  const results = await request(
    `/amap/v3/geocode/${flag}?${params}&extensions=all&output=json&key=f627fbb24176be73142eb0b5088d8683&city=420111`
  );
  console.log("geoRegeo results", results);
  callback && callback(results);
  return results;
};

//判断是否在打卡点内
const isClockInRange = (
  currentLocation = "POINT(109.41360117253636 34.49038724464877)",
  ranges = [
    "POINT(109.43167853335872 34.51345940211415)",
    "POINT(109.46797592891363 34.51145239795833)",
    "POINT(109.44903576574815 34.50165755773118)",
  ],
  rVal = 500
) => {
  const feature = { ...Terraformer.WKT.parse(currentLocation) };
  return (
    ranges
      .map((i) => turf.buffer({ ...Terraformer.WKT.parse(i) }, rVal / 1000))
      .map((i) => turf.booleanContains(i, feature))
      .filter(Boolean)[0] || false
  );
};

const clearTemporaryData = () => {
  const { setLayerVisible, removeMapDatas } = events_params;
  const keys_ = [
    "问题管线",
    "1_泵站",
    "1_污水处理厂",
    "1_调蓄池",
    "分区流向",
    "分区流向1",
    "rainwater_pipeline_water_level",
    "rainwater_pipeline_water_level_GWGSWYX",
    "outlet_info1",
    "temporary",
    "highlight_linestring",
    "highlight_polygon",
    "highlight_point",
    "clickPoint",
  ];
  clearRouteMethod();
  const hideKeys = ["雨水系统流向", "雨水系统流向1", "排水分区_close"];
  bus.emit(removeMapDatas.key, keys_);
  const keys = newfiberMap.config_.l7.filter((i) => i.temporary).map((i) => i.key);
  newfiberMap
    .getLayers()
    .filter((i) => keys.includes(i.newfiberId))
    .forEach((i) => i.setData({ type: "FeatureCollection", features: [] }));
  hideKeys.forEach((i) => busEmit(setLayerVisible.key, { layername: i, isCheck: false }));

  setHighlight_();
};

const remove3Dtiles = () => {
  newfiberMap.map._controls;
  newfiberMap.map._controls
    .filter((i) => i._deck)
    .forEach((i) => i.setProps({ layers: [] }));
};

const load3DTiles = ({ id, url }) => {
  remove3Dtiles();
  let deckOverlay = null;
  deckOverlay = newfiberMap.map._controls.filter((i) => i._deck)[0];
  if (!deckOverlay) {
    deckOverlay = new MapboxOverlay({
      interleaved: true,
      layers: [],
    });
    newfiberMap.map.addControl(deckOverlay);
  }
  const layers = deckOverlay._props.layers;
  deckOverlay.setProps({
    layers: [
      ...layers,
      new Tile3DLayer({
        id: id,
        name: id,
        data: url,
        loader: Tiles3DLoader,
        extruded: true, // 设置3D功能
        opacity: 1, // 设置透明度
        loadOptions: {
          "3d-tiles": {
            loadGLTF: true,
            decodeQuantizedPositions: false,
            isTileset: "auto",
            assetGltfUpAxis: null,
          },
        },
        pickable: true, // 设置可选取
        onTilesetLoad: (tileset) => {
          const { cartographicCenter, zoom } = tileset;
          deckOverlay.setProps({
            initialViewState: {
              longitude: cartographicCenter[0],
              latitude: cartographicCenter[1],
              zoom,
            },
          });
        },
        pointSize: 2,
      }),
    ],
  });
};

const busEmit = (event, params) => bus.emit(event, params);

const busOn = (event, func) => bus.on(event, func);

const busOff = (event) => bus.off(event);
//添加临时动态线
const addDynamicLine = (c_layer, c_layer1) => {
  if (newfiberMap.getLayerByName("dynamicLine")) {
    newfiberMap.removeLayer(newfiberMap.getLayerByName("dynamicLine"));
  }
  let dynamicLineJson = turf.featureCollection(
    newfiberMap.map
      .getSource("sx_wn_hm_merge")
      ._data.features.filter(
        (feature) =>
          feature.properties.c_layer.includes(c_layer) &&
          feature.properties.c_layer.includes(c_layer1)
      )
  );
  console.log(c_layer, dynamicLineJson);
  let layer = new mapboxL7.LineLayer({
    name: "dynamicLine",
  })
    .source(dynamicLineJson)
    .size(3)
    .shape("line")
    .color("color")
    .animate({
      interval: 1,
      duration: 2,
      trailLength: 0.8,
    });
  newfiberMap.addLayer(layer);
};
const events_params = {
  removeMapDatas: { key: "removeMapDatas" },
  setGeoJSON: { key: "setGeoJSON" },
  setLayerVisible: { key: "setLayerVisible" },
  beansToMap: { key: "beansToMap" },
  closeAllLayer: { key: "closeAllLayer" },
  setHighlight: { key: "setHighlight" },
  geoRegeo: { key: "geoRegeo", method: geoRegeo },
  dataToMap: { key: "dataToMap", method: dataToMap },
  pathPlanning: { key: "pathPlanning", method: pathPlanning },
  panelDataToMap: { key: "panelDataToMap", method: panelDataToMap },
  trajectoryToMap: { key: "trajectoryToMap", method: trajectoryToMap },
  clearTrajectory: { key: "clearTrajectory", method: clearTrajectory },
  clearTemporaryData: { key: "clearTemporaryData", method: clearTemporaryData },
  load3DTiles: { key: "load3DTiles", method: load3DTiles },
  remove3Dtiles: { key: "remove3Dtiles", method: remove3Dtiles },
  isOpenPanorama: {
    key: "isOpenPanorama",
    method: (flag) => (datas.isOpenPanorama = flag),
  },
};

onMounted(() => {
  bus.on("YQ_head", (val) => {
    if (val == false) {
      MapShow.value = false;
    } else {
      MapShow.value = true;
    }
  });
});

onBeforeUnmount(() => {
  bus.off("YQ_head");
  Object.keys(events_params)
    .filter((key) => events_params[key].method)
    .forEach((key) => busOff(events_params[key].key));
  clearInterval(refreshTimer.value); // 清除定时器
  refreshTimer.value = null;
});
</script>

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