<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;
    console.log('什么东西', k, keys[0]);
    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>