<template>
  <div class="cameraGroupContainer">
    <div class="CameraGroupList" :class="{ collapsed: isCollapse }">
      <CameraGroupList />
    </div>

    <div class="toggle-button-wrapper" @click="isCollapse = !isCollapse">
      <div class="collapse-button" :class="{ collapsed: isCollapse === false }"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import CameraGroupList from './CameraGroupList/CameraGroupList.vue';

  const isCollapse = ref(false);
</script>

<style lang="scss" scoped>
  .cameraGroupContainer {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    .CameraGroupList {
      height: 100%;
      width: 100%;
      background: #f4f7ff;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .toggle-button-wrapper {
      @include flex-center;
      width: 15cpx;
      height: 75cpx;
      margin-right: 5px;
      z-index: 10;
      clip-path: polygon(0 0, 100% 10cpx, 100% 65cpx, 0 75cpx);
      background-color: $primary-color;
      cursor: pointer;

      .collapse-button {
        border-style: solid;
        border-width: 5cpx 0 5cpx 8cpx;
        border-color: transparent transparent transparent #fff;
        transform: rotate(180deg);

        &.collapsed {
          transform: rotate(0deg);
        }
      }
    }
    .collapsed {
      width: 0;
    }
  }
</style>
