<template>
  <div class="thumb-nail">
    <ElPopover
      popper-class="thumb-popover"
      ref="popoverRef"
      :placement="position || 'bottom'"
      :show-after="100"
      :hide-after="0"
      @show="handleMouseEnter"
    >
      <template #reference>
        <div>
          <slot></slot>
        </div>
      </template>
      <template #default>
        <ElImage
          v-loading="isLoading"
          :src="imgUrl || EmptyImg"
          fit="contain"
          class="thumb-img"
          :preview-src-list="srcList"
          :zoom-rate="1.2"
          :max-scale="3"
          :min-scale="0.1"
          @close="handleClose"
        />
      </template>
    </ElPopover>
  </div>
</template>

<script lang="ts" setup>
  import { ElPopover, ElImage } from 'element-plus';
  import EmptyImg from '@/assets/images/nine-square-grid/empty.png';
  import { captureFirstPicFromFLV } from '@/utils/flv/captureFirstPicFromFLV';
  import { getCameraInfoDetail } from '@/api/camera/camera';
  import { CameraDetailServer } from '@/types/scene-types/scene-types';
  import { ref } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import { storeToRefs } from 'pinia';
  const isLoading = ref(false);
  const imgUrl = ref();
  const srcList = ref<string[]>([]);
  const popoverRef = ref();
  const props = defineProps<{
    // 图片预览的url
    imageUrl?: string;
    code?: string;
    position?:
      | 'top'
      | 'top-start'
      | 'top-end'
      | 'bottom'
      | 'bottom-start'
      | 'bottom-end'
      | 'left'
      | 'left-start'
      | 'left-end'
      | 'right'
      | 'right-start'
      | 'right-end';
  }>();
  const getCameraDetail = async (code: string) => {
    return getCameraInfoDetail(code);
  };

  const userStore = useUserStore();

  const { token } = storeToRefs(userStore);
  const getPushstreamImg = async (detail: CameraDetailServer) => {
    return detail.pushStreamDTO?.imageUrl;
  };
  const getPushstreamIp = async (detail: CameraDetailServer) => {
    if (/macintosh|mac os x/i.test(navigator.userAgent)) {
      return detail.pushStreamDTO?.videoUrls?.m3u8PushstreamIp;
    } else if (detail.render) {
      return detail.pushStreamDTO?.videoUrls?.pushstreamRenderUrl;
    }
    return detail.pushStreamDTO?.videoUrls?.pushstreamIp;
  };

  const handleMouseEnter = async () => {
    // if (imgUrl.value) return;
    srcList.value = [];
    isLoading.value = true;
    const imageUrl = props.imageUrl;
    if (imageUrl) {
      imgUrl.value = imageUrl;
      srcList.value.push(imageUrl);
      isLoading.value = false;
      return;
    }

    if (!props.code) return;
    const detail = await getCameraDetail(props.code);
    let url: string | null;
    url = await getPushstreamImg(detail);
    if (url) {
      imgUrl.value = url;
      srcList.value.push(url);
      isLoading.value = false;
      return;
    }
    const videoSrc = await getPushstreamIp(detail);

    const urlWithToken = videoSrc + '?token=' + token.value;
    url = await captureFirstPicFromFLV(urlWithToken);
    imgUrl.value = url;
    srcList.value.push(url);
    isLoading.value = false;
  };
  const handleClose = () => {
    popoverRef.value.hide();
  };
  defineExpose({
    handleClose,
  });
</script>

<style lang="scss" scoped>
  .thumb-nail {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
</style>
<style lang="scss">
  .thumb-popover {
    display: flex;
    align-items: center;
    padding: 0 !important;
    border-radius: 5px !important;
    width: 400px !important;
  }

  .thumb-img {
    width: 100%;
    border-radius: 5px;
  }
</style>
