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

  withDefaults(
    defineProps<{
      value?: MapComponentValue;
      layout?: MapComponentLayout;
      radio?: RadioRecord;
    }>(),
    {}
  );

  const wrapRef = ref<HTMLDivElement | null>(null);
  const { toPromise } = useScript({ src: BAI_DU_MAP_URL });

  async function initMap() {
    await toPromise();
    await nextTick();
    const wrapEl = unref(wrapRef);
    if (!wrapEl) return;
    const BMap = (window as any).BMap;
    const map = new BMap.Map(wrapEl);
    const point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(true);
  }

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

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

  const handleTrackSwitch = () => {};

  const pauseFlag = ref(true);

  const handlePlay = () => {
    pauseFlag.value = false;
  };

  const handlePause = () => {
    pauseFlag.value = true;
  };
</script>

<template>
  <div class="w-full h-full flex justify-center items-center flex-col">
    <div class="w-[95%] flex">
      <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 v-show="pauseFlag" type="text" class="!px-2 !text-gray-500" @click="handlePlay">
        <PlayCircleOutlined />
        <span>播放轨迹</span>
      </Button>
      <Button v-show="!pauseFlag" type="text" class="!px-2 !text-gray-500" @click="handlePause">
        <PauseCircleOutlined />
        <span>暂停播放</span>
      </Button>
    </div>
    <div ref="wrapRef" class="w-[95%] h-[95%]"></div>
  </div>
</template>