<template>
  <!-- 地图 -->
  <div class="position-r" id="map">
    <newFiberMapBox
      :initJson="`/static/libs/mapbox/style/TemporaryProject.json`"
      @map-click="mapClick"
    ></newFiberMapBox>
  </div>
</template>

<script setup name="TemporaryProject">
import { getProjects } from '@/api/publicApi.js';
import newFiberMapBox from '@/views/xuncha/gisCommonPage/newFiberMapBox.vue';
import * as turf from '@turf/turf';
import bus from '@/utils/utils';
const timer = ref(null);
const legendList = ref([
  {
    name: '海绵型建设与社区',
    layername: 'HMJZYSQ',
    data: [],
    isCheck: true,
  },
  {
    name: '海绵型道路广场',
    layername: 'HMXDLGC',
    data: [],
    isCheck: true,
  },
  {
    name: '海绵型公园与绿地',
    layername: 'HMXGYLD',
    data: [],
    isCheck: true,
  },
  {
    name: '海绵型水系',
    layername: 'HMXSX',
    data: [],
    isCheck: true,
  },
  {
    name: '管网排查与修复',
    layername: 'GWPCYXF',
    data: [],
    isCheck: true,
  },
  {
    name: '雨水管网及泵站',
    layername: 'GWJBZ',
    data: [],
    isCheck: true,
  },
  {
    name: 'GIS平台建设与监测设施',
    layername: 'GIS',
    data: [],
    isCheck: true,
  },
]);
const getProjectss = async () => {
  let { data } = await getProjects();
  let features = data;
  console.log(features, 'features');
  let projectionFeatures = [];
  features.forEach((element) => {
    if (!element.projectLocation) return;
    let feature = turf.point(element.projectLocation.split(','), element);
    projectionFeatures.push(feature);
    legendList.value.forEach((i) => {
      if (i.layername == element.projectTypeCode) {
        i.data.push(feature);
      }
    });
  });
  legendList.value.forEach((i) => {
    i.data = turf.featureCollection(i.data);
  });
  console.log('legendList---', legendList.value);
  bus.emit('setLegendData', legendList.value);
  timer.value = setInterval(() => {
    if (!!!newfiberMap.map.getLayer('point')) {
      return;
    } else {
      legendList.value.forEach((i) => {
        bus.emit('setLayerVisible', i);
      });
      clearInterval(timer.value);
    }
  }, 1000);
  // let features = data
  //   .filter((i) => i.projectLocation)
  //   .map((i) => {
  //     if (i.projectLocation.indexOf('POINT') > -1) {
  //       i.feature = {
  //         type: 'Feature',
  //         geometry: WKT.parse(i.projectLocation),
  //         properties: {
  //           ...i,
  //           mapParams: {
  //             icon: ICONS_MAP[i.projectTypeCode],
  //             group: i.projectTypeCode,
  //             name: i.projectName,
  //           },
  //         },
  //       };
  //       return i.feature;
  //     } else {
  //       return turf.point(i.projectLocation.split(',').map(Number), {
  //         ...i,
  //         mapParams: {
  //           icon: ICONS_MAP[i.projectTypeCode],
  //           group: i.projectTypeCode,
  //           name: i.projectName,
  //         },
  //       });
  //     }
  //   });
  // amapUtils.geojsonToMap(turf.featureCollection(features));
};

onMounted(() => {
  getProjectss();
  setTimeout(() => {
    newfiberMap.map.on('click', 'point', (e) => {
      const feature = (
        newfiberMap.map.queryRenderedFeatures([
          [e.point.x - 10 / 2, e.point.y - 10 / 2],
          [e.point.x + 10 / 2, e.point.y + 10 / 2],
        ]) || []
      ).filter((i) => i.layer.id)[0];
      console.log('feature---', feature);
    });
  }, 2000);

  // 初始化地图
  // let interVal = setInterval(() => {
  //   if (window.AMap) init(), clearInterval(interVal);
  // }, 500);
});
</script>

<style lang="less" scoped>
.position-r {
  position: relative;
  width: 100%;
  height: 100%;
  background: #c6c6c6;
}
</style>