<template>
  <div class="video-monitor-grid">
    <VideoMonitorItem
      v-for="monitor in monitors"
      :key="monitor.id"
      :monitor="monitor"
      @megaphone="handleMegaphone"
      @audio="handleAudio"
      @zoom="handleZoom"
    />
  </div>
</template>

<script setup>
import VideoMonitorItem from './VideoMonitorItem.vue'
import { useVideoMonitor } from '../../composables/useVideoMonitor'

const { monitors, toggleMegaphone, zoomMonitor } = useVideoMonitor()

const handleMegaphone = (monitorId) => {
  console.log('喊话:', monitorId)
  toggleMegaphone()
}

const handleAudio = (monitorId) => {
  console.log('音频控制:', monitorId)
}

const handleZoom = (monitorId) => {
  console.log('放大窗口:', monitorId)
  zoomMonitor(monitorId)
}
</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;
@use '../../assets/styles/common.scss' as *;

.video-monitor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: vw(12);
  // padding: vh(16) vw(16);
}
</style>
