<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, screenArray, screenArray2 } from './util/video.util';
import ScreenCapture from './component/ScreenCapture.vue';
import { loading } from '@/utils/composition';
import { getGenericInfo } from '@/services/header/header.service';
import { traduction } from '@/utils/language';

loading(true);
const isShow = ref(false);
const tabPlayerGroup: any = ref([]);
const tabScreenShot: any = ref([]);
const playerGroup1 = ref(videoShotGroup as IVideoShotGroup[]);
const playerGroup2 = ref(JSON.parse(JSON.stringify(videoShotGroup)) as IVideoShotGroup[]); // 深拷贝一下，不会影响原始对象
const activatedSystemId = ref(1);
const systemIds: any = ref([]);
const videoRecordingEnabled = ref(false);
const screenshotEnabled = ref(false);
const screenshotCreateTime = reactive({ value: {} } as any);

init();
function init() {
  getGenericInfo().then((res: any) => {
    systemIds.value = res.SystemIds;
  });
  videoScreenCapture().then(res => {
    activatedSystemId.value = res.ActivatedSystemId;
    screenshotCreateTime.value = res.ScreenshotCreateTime;
    screenshotEnabled.value = res.ScreenshotEnabled;
    videoRecordingEnabled.value = res.VideoRecordingEnabled;
    let a1 = {};
    let a2 = {};
    res.Screenshots.forEach((item, index) => {
      let autoArray = item.CreateTime.Auto;
      let manualArray = item.CreateTime.Manual;

      autoArray.forEach((value, i) => {
        if (index === 0) {
          a1[`Time${i}`] = value;
        } else if (index === 1) {
          a2[`Time${i}`] = value;
        }
      });

      if (index === 0) {
        a1[`Time${autoArray.length}`] = manualArray[0];
      } else if (index === 1) {
        a2[`Time${autoArray.length}`] = manualArray[0];
      }
    });
    tabScreenShot.value = [
      {
        data: a1,
        screenGroup: ref(screenArray),
        name: 'host1',
        label: traduction('HOME_HOST_0'),
        screenShotTime: '',
        src: '',
      },

      {
        data: a2,
        screenGroup: ref(screenArray2),
        name: 'host2',
        label: traduction('HOME_HOST_1'),
        screenShotTime: '',
        src: '',
      },
    ];
    const group1 = res.VideoRecords.slice(0, 3);
    const group2 = res.VideoRecords.slice(3, 6);
    group1?.forEach((record: any, index: number) => {
      playerGroup1.value[index + 1].value =
        record !== null ? getFileSize(record.VideoSizeByte) : '0';
      if (playerGroup1.value[index + 1].value !== '0') {
        playerGroup1.value[index + 1].detail = record.CreateTime;
      }
    });
    group2?.forEach((record: any, index: number) => {
      playerGroup2.value[index + 1].value =
        record !== null ? getFileSize(record.VideoSizeByte) : '0';
      if (playerGroup2.value[index + 1].value !== '0') {
        playerGroup2.value[index + 1].detail = record.CreateTime;
      }
    });
    tabPlayerGroup.value = [
      {
        playerGroup: playerGroup1.value,
        name: 'host1',
        label: traduction('HOME_HOST_0'),
      },

      {
        playerGroup: playerGroup2.value,
        name: 'host2',
        label: traduction('HOME_HOST_1'),
      },
    ];
    isShow.value = true;
    loading(false);
  });
}
</script>

<template>
  <div id="videoCaptureviewID">
    <VideoShot v-if="isShow" :enabled="videoRecordingEnabled" :activated-system-id="activatedSystemId" :tab-player-group="tabPlayerGroup" :system-ids="systemIds"></VideoShot>
    <div id="videoPicViewId" class="video-capture">
      <LastCapture
        v-if="isShow"
        :enabled="screenshotEnabled"
        :data="screenshotCreateTime.value"
        :system-ids="systemIds"
        :tab-screen-shot="tabScreenShot"
        class="last-capture"
      ></LastCapture>
      <ScreenCapture
        v-if="isShow"
        :data="screenshotCreateTime.value"
        :system-ids="systemIds"
        :activated-system-id="activatedSystemId"
        :tab-screen-shot="tabScreenShot"
        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>
