<template>
  <div class="map-box">
    <iframe id="map" class="mapiframe" frameborder="0" scrolling="no" allowtransparency="true">
    </iframe>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { myBridge } from '@/utils/map/map.js';
import {
  addImagePoint,
  addJuHePoint,
  addTrajectory,
  playTrajectory
} from '@/utils/map/mapOperation.js';
import { useDrawPointStore } from '@/stores/drawPointManage';
import {
  getTrajectorPointOnCarById,
  getTrajectorPointOnPeopleById
} from '@/service/api/mapRequest.js';
import { useMapStore } from '@/stores/mapStore';
import breathe from '@/assets/json/breathe.json';
let bridge;
let listen;
const drawPointStore = useDrawPointStore();
const mapStore = useMapStore();
onMounted(() => {
  myBridge.bridgeContent = bridge = new CityGis.Bridge({
    id: 'map',
    url: window.CityGisHtml,
    onReady: function () {
      console.log('ready');
      //默认加载
      addImagePoint(
        'newAdress',
        [
          { x: -14973.6499, y: -1759.0666 },
          { x: -24130.3138, y: -23044.9095 }
        ],
        {
          imageUrl: new URL(`@/assets/image/mapTools/newAdress.png`, import.meta.url).href
        }
      );
      const data = breathe.filter((item, index) => {
        return index % 128 == 8;
      });
      //密接图标
      addImagePoint('touch', data, {
        imageUrl: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href
      });
      // addImagePoint(
      //   'touch',
      //   [
      //     { x: 9604.191858692775, y: -19248.016463574288 },
      //     { x: 13799.47156001244, y: -11944.303054916069 },
      //     { x: 17672.277882889364, y: -9192.565371300574 }
      //   ],
      //   {
      //     imageUrl: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href
      //   }
      // );
    }
  });

  listen = async (arg) => {
    console.log('listen', arg);
    switch (arg.action) {
      case 'getPoint': {
        const data = arg.data;
        drawPointStore.modifyCurrentDrawPointList('x', data.x);
        drawPointStore.modifyCurrentDrawPointList('y', data.y);
        // const index = drawPointStore.currentDrawPointList.length - 1;
        // drawPointStore.setInfoBoxIndex(index);
        // const pointInfo = {
        //   index: index,
        //   x: data.x,
        //   y: data.y,
        //   date: '',
        //   described: ''
        // };
        // drawPointStore.pushCurrentDrawPointList(pointInfo);
        // console.log(index);
        // addPoint(drawPointStore.currentDrawPointList, 'drawPoint');
        // if (index > 0) {
        //   //画线
        //   addPolyLine(drawPointStore.currentDrawPointList, 'drawLine');
        // }
        break;
      }
      case 'mapclick': {
        if (arg?.data?.flowCar?.length > 0 && arg?.data?.flowCar[0]?.id) {
          //会商车
          try {
            const id = arg?.data?.flowCar[0]?.id;
            const res = await getTrajectorPointOnCarById({ id: id });
            if (res.code == 200) {
              addTrajectory(res.data || [], id);
              mapStore.pushFlowCarList('car_layer' + id);
              setTimeout(() => {
                playTrajectory(id);
              }, 2000);
            }
          } catch (error) {
            console.log(error);
          }
        }
        const key = Object.keys(arg.data).find((item) => {
          return item == 'infectious' || item == 'feverClinic' || item == 'breathe';
        });
        if (key) {
          try {
            // const res = await getTrajectorPointOnPeopleById({
            //   id: arg.data[key][0].id
            // });
            // if (res.code == 200) {
            //   drawPointStore.currentSelectName = arg.data[key][0].name;
            //   drawPointStore.currentSelectId = arg.data[key][0].id;
            //   drawPointStore.currentDrawPointList = res.data || [];
            // } else {
            //   console.log('获取病例轨迹数据错误');
            // }
          } catch (error) {
            console.log(error);
          }
        }
        break;
      }
    }
  };
  //鼠标操作地图监听
  bridge.addEventListener(listen);
});
</script>

<style scoped lang="scss">
.map-box {
  width: 100%;
  height: 100%;
}
#map {
  z-index: 0;
  width: 100%;
  height: 100%;
}
</style>
