<script lang="ts" setup>
  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
  import { option } from './config';
  import { useBaiduMapSDK } from '../../../hook/useBaiduMapSDK';
  import { ref, unref } from 'vue';
  import { buildUUID } from '/@/utils/uuid';
  import { Spin } from 'ant-design-vue';
  import { computed } from 'vue';
  import { useMapTrackPlayBack } from './useMapTrackPlayback';
  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';

  const props = defineProps<{
    config: ComponentPropsConfigType<typeof option>;
  }>();

  const wrapRef = ref<Nullable<Recordable>>(null);

  const mapInstance = ref<Nullable<Recordable>>(null);

  const wrapId = `bai-map-${buildUUID()}`;

  const getDeviceId = computed(() => {
    return props.config.option.dataSource?.at(0)?.deviceId;
  });

  /**
   * @description 经度key
   */
  const getLngKey = computed(() => {
    return props.config.option.dataSource?.at(0)?.attribute || '';
  });

  /**
   * @description 纬度key
   */
  const getLatKey = computed(() => {
    return props.config.option.dataSource?.at(1)?.attribute || '';
  });

  const validEffective = (value = '') => {
    return !!(value && !isNaN(value as unknown as number));
  };

  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId) => {
    if (unref(getDeviceId) !== deviceId) return;

    const { data = {} } = message;

    const bindMessage = data[deviceId];

    const lngData = bindMessage[unref(getLngKey)] || [];
    const [lngLatest] = lngData;
    const [, lng] = lngLatest;

    const latData = bindMessage[unref(getLatKey)] || [];
    const [latLatest] = latData;
    const [, lat] = latLatest || [];

    if (validEffective(lng) && validEffective(lat)) {
      drawLine({ lng: Number(lng), lat: Number(lat) });
    }
  };

  useMultipleDataFetch(props, updateFn);

  const { drawLine } = useMapTrackPlayBack(mapInstance);

  const initMap = () => {
    const wrapEl = unref(wrapRef);
    if (!wrapEl) return;
    if (!Reflect.has(window, 'BMapGL')) return;
    const BMapGL = (window as any).BMapGL;
    mapInstance.value = new BMapGL.Map(wrapId);

    // 定位当前城市
    const localcity = new BMapGL.LocalCity();
    localcity.get(
      (e: { center: Record<'lat' | 'lng', number>; code: number; level: number; name: string }) => {
        const { center } = e;
        const { lat, lng } = center;
        const point = new BMapGL.Point(lng, lat);
        unref(mapInstance)!.centerAndZoom(point, 15);
      }
    );

    unref(mapInstance)!.enableScrollWheelZoom(true);
  };

  const { loading } = useBaiduMapSDK(initMap);
</script>

<template>
  <main class="w-full h-full flex flex-col p-2 justify-center items-center">
    <Spin
      :spinning="loading"
      wrapper-class-name="map-spin-wrapper !w-full !h-full !flex justify-center items-center pointer-events-none"
      tip="地图加载中..."
    />
    <div v-show="!loading" ref="wrapRef" :id="wrapId" class="w-full h-full no-drag"> </div>
  </main>
</template>

<style lang="less" scoped>
  // .map-spin-wrapper {
  //   :deep(.ant-spin-container) {
  //     @apply justify-center items-center p-2 w-full h-full;
  //   }
  // }
</style>