<script setup lang="ts">
import VideoShot from './component/VideoShot.vue';
import LastCapture from './component/LastCapture.vue';
import { videoScreenCapture } from '@/services/video-service';
import { reactive, ref } from 'vue';
import { IVideoShotGroup } from './models/video.datatype';
import { getFileSize, videoShotGroup } from './util/video.util';
import ScreenCapture from './component/ScreenCapture.vue';
import { loading } from '@/utils/composition';

loading(true);
const isShow = ref(false);
const playerGroup = ref(videoShotGroup as IVideoShotGroup[]);
const videoRecordingEnabled = ref(false);
const screenshotEnabled = ref(false);
const screenshotCreateTime = reactive({ value: {} } as any);

init();
function init() {
  videoScreenCapture().then(res => {
    screenshotCreateTime.value = res.ScreenshotCreateTime;
    screenshotEnabled.value = res.ScreenshotEnabled;
    videoRecordingEnabled.value = res.VideoRecordingEnabled;
    res?.VideoRecordInfo?.forEach((record: any, index: number) => {
      playerGroup.value[index + 1].value =
        record !== null ? getFileSize(record.VideoSizeByte) : '0';
      if (playerGroup.value[index + 1].value !== '0') {
        playerGroup.value[index + 1].detail = record.CreateTime;
      }
    });
    isShow.value = true;
    loading(false);
  });
}
</script>

<template>
  <div id="videoCaptureviewID">
    <VideoShot v-if="isShow" :enabled="videoRecordingEnabled" :group="playerGroup"></VideoShot>
    <div id="videoPicViewId" class="video-capture">
      <LastCapture
        v-if="isShow"
        :enabled="screenshotEnabled"
        :data="screenshotCreateTime.value"
        class="last-capture"
      ></LastCapture>
      <ScreenCapture
        v-if="isShow"
        :data="screenshotCreateTime.value"
        class="screen-capture"
      ></ScreenCapture>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#videoCaptureviewID {
  padding-right: 24px;
  .last-capture {
    flex: 1;
  }

  .screen-capture {
    width: 524px;
  }
  .video-capture {
    display: flex;
  }
}
</style>
