<template>
  <div class="realtime-surveillance">
    <LiveVideo :url="getCurCameraUrl()" :poster="getCurCameraImg()" :id="`monitor-livevideo`" class="main-video" />
    <img src="@/assets/images/institute-safety/close.png" alt="" class="video-close" @click="clearCurCamera()" />

    <img
      src="@/assets/images/disaster-overview/full-screen.png"
      alt=""
      class="full-screen"
      @click="isFullScreen ? exitFullscreen() : fullScreen(`monitor-livevideo`, 'overview-monitor')"
    />
  </div>
</template>

<script setup lang="ts">
  import LiveVideo from '@/components/live/LiveVideo.vue';
  import useCameraStore from '../stores/use-camera-store';
  import { userSplitScreenFullScreen } from '@/store/modules/userSplitScreenFullScreen';
  import { storeToRefs } from 'pinia';
  import screenfull from 'screenfull';
  import { onUnmounted } from 'vue';

  const { isFullScreen, curFullScreenType } = storeToRefs(userSplitScreenFullScreen());
  const { fullScreen, exitFullscreen } = userSplitScreenFullScreen();

  const cameraStore = useCameraStore();

  window.onresize = () => {
    if (!screenfull.isFullscreen) {
      isFullScreen.value = false; //判断退出全屏，进行赋值
      curFullScreenType.value = 'single';
    }
  };

  const { clearCurCamera, getCurCameraUrl, getCurCameraImg } = cameraStore;

  onUnmounted(() => {
    clearCurCamera();
  });
</script>

<style scoped>
  .realtime-surveillance {
    width: 100%;
    height: 100%;
  }
  .main-video {
    height: 100%;
  }
  .video-close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .full-screen {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
</style>
