<script lang="ts">
  export default {
    inheritAttrs: false,
  };
</script>
<script lang="ts" setup>
  import { computed, onMounted, ref, unref } from 'vue';
  import { RadioRecord } from '../../detail/config/util';
  import { MapComponentLayout, MapComponentValue } from './map.config';
  import {
    ClockCircleOutlined,
    PlayCircleOutlined,
    PauseCircleOutlined,
  } from '@ant-design/icons-vue';
  import { Button, Tooltip } from 'ant-design-vue';
  import { FrontComponent } from '../../const/const';
  import { buildUUID } from '/@/utils/uuid';

  // useVisualBoardContext();

  const startMethodName = `trackPlayMethod_${buildUUID()}`;

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

  enum TrackAnimationStatus {
    PLAY = 1,
    DONE = 2,
    PAUSE = 3,
  }

  const props = withDefaults(
    defineProps<{
      value?: MapComponentValue;
      layout?: MapComponentLayout;
      radio?: RadioRecord;
      random?: boolean;
    }>(),
    {
      random: true,
    }
  );

  const wrapRef = ref<HTMLDivElement | null>(null);
  const trackAni = ref<Nullable<any>>(null);
  let mapInstance: Nullable<Recordable> = null;

  async function initMap() {
    const wrapEl = unref(wrapRef);
    if (!wrapEl) return;
    const BMapGL = (window as any).BMapGL;
    mapInstance = new BMapGL.Map(wrapId);
    const point = new BMapGL.Point(116.404, 39.915);
    mapInstance!.centerAndZoom(point, 15);
    mapInstance!.enableScrollWheelZoom(true);
    props.layout?.componentType === FrontComponent.MAP_COMPONENT_TRACK_HISTORY && randomAnimation();
  }

  const randomAnimation = () => {
    const path = [
      {
        lng: 116.297611,
        lat: 40.047363,
      },
      {
        lng: 116.302839,
        lat: 40.048219,
      },
      {
        lng: 116.308301,
        lat: 40.050566,
      },
      {
        lng: 116.305732,
        lat: 40.054957,
      },
      {
        lng: 116.304754,
        lat: 40.057953,
      },
      {
        lng: 116.306487,
        lat: 40.058312,
      },
      {
        lng: 116.307223,
        lat: 40.056379,
      },
    ];

    const point: any[] = [];
    const BMapGL = (window as any).BMapGL;

    for (const { lng, lat } of path) {
      point.push(new BMapGL.Point(lng, lat));
    }

    const pl = new BMapGL.Polyline(point);
    const BMapGLLib = (window as any).BMapGLLib;

    const dynamicPlayMethod = {
      [startMethodName]() {
        trackAni.value = new BMapGLLib.TrackAnimation(mapInstance, pl, {
          overallView: true,
          tilt: 30,
          duration: 20000,
          delay: 300,
        });
        trackAni.value!.start();
      },
    };

    (window as any)[startMethodName] = dynamicPlayMethod[startMethodName];

    setTimeout(`${startMethodName}()`);
  };

  onMounted(() => {
    initMap();
  });

  const getTimeRange = computed(() => {
    return ` - 从 ${'2020-10-20 10:10:10'} 到 ${'2020-10-20 10:10:10'}`;
  });

  const handleTrackSwitch = () => {};

  const getTrackPlayStatus = computed(() => {
    return (trackAni.value || {})._status;
  });

  const handlePlay = () => {
    if (unref(getTrackPlayStatus) === TrackAnimationStatus.DONE) unref(trackAni).start();
    else if (unref(getTrackPlayStatus) === TrackAnimationStatus.PLAY) unref(trackAni).pause();
    else if (unref(getTrackPlayStatus) === TrackAnimationStatus.PAUSE) unref(trackAni).continue();
  };
</script>

<template>
  <div class="w-full h-full flex justify-center items-center flex-col">
    <div
      class="w-full flex"
      v-if="props.layout?.componentType === FrontComponent.MAP_COMPONENT_TRACK_HISTORY"
    >
      <Button type="text" class="!px-2 flex-auto !text-left truncate" @click="handleTrackSwitch">
        <div class="w-full truncate text-gray-500 flex items-center">
          <ClockCircleOutlined />
          <span class="mx-1">实时</span>
          <Tooltip :title="getTimeRange.replace('-', '')">
            <span class="truncate">
              {{ getTimeRange }}
            </span>
          </Tooltip>
        </div>
      </Button>
      <Button type="text" class="!px-2 !text-gray-500" @click="handlePlay">
        <PlayCircleOutlined v-show="getTrackPlayStatus !== TrackAnimationStatus.PLAY" />
        <PauseCircleOutlined v-show="getTrackPlayStatus === TrackAnimationStatus.PLAY" />
        <span>
          {{ getTrackPlayStatus !== TrackAnimationStatus.PLAY ? '播放轨迹' : '暂停播放' }}
        </span>
      </Button>
    </div>
    <div ref="wrapRef" :id="wrapId" class="w-full h-full"></div>
  </div>
</template>