<template>
  <div class="nine-square-grid">
    <div class="leftSideBar">
      <!-- 灾害防范重点区域监控type用0 -->
      <CameraGroupListAndTree mode="default" :type="0" />
    </div>

    <div class="toolbarAndCamerasGrid">
      <VideosGridBase :cameraInPlay="cameraInPlay" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted } from 'vue';
  import { storeToRefs } from 'pinia';
  import CameraGroupListAndTree from '@/components/CameraGroupListAndTree/CameraGroupListAndTree.vue';
  import VideosGridBase from '@/components/VideosGridBase/VideosGridBase.vue';
  import { useCameraGroupList } from '@/store/modules/useCameraGroupList';
  import { useTargetTenantIdStore } from '@/store/modules/useTargetTenantIdStore';
  import { useCameraStatus } from '@/hooks/useCameraStatus';

  const { cameraInPlay } = storeToRefs(useCameraGroupList());

  const { clear } = useTargetTenantIdStore();
  useCameraStatus();

  onMounted(() => {
    clear();
  });
</script>

<style lang="scss" scoped>
  .nine-square-grid {
    height: 100%;
    padding: 14px 10px;
    display: flex;
    border-radius: 4px;
    background: #fff;

    .leftSideBar {
      height: 100%;
    }

    .toolbarAndCamerasGrid {
      width: 100%;
    }
  }
</style>
