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

    <!-- 全屏视频弹窗 -->
    <VideoModal
      v-if="zoomedMonitor"
      :visible="!!zoomedMonitor"
      :monitor="zoomedMonitor"
      @close="handleCloseModal"
      @megaphone="handleMegaphone"
      @audio="handleAudio"
      @move="handleMove"
    />
  </div>
</template>

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

const {
  monitors,
  zoomedMonitor,
  toggleMegaphone,
  zoomMonitor,
  closeZoom,
  toggleAudio,
  moveView
} = useVideoMonitor()

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

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

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

const handleCloseModal = () => {
  closeZoom()
}

const handleMove = ({ monitorId, direction }) => {
  console.log(`视角移动 - 监控ID: ${monitorId}, 方向: ${direction}`)
  moveView(monitorId, direction)
}
</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>
