<script lang="ts" setup name="TargetMonitor">
import videoPlay from './components/video.vue'
import useWebsocketStore from '@/store/modules/websocket'
import { getDeviceList } from '@/api/device'
const websocket = useWebsocketStore()
// 获取设备列表
const deviceLit = ref<any[]>()
const fetchDeviceList = () => {
  getDeviceList({ deviceName: '', location: '' }).then((res) => {
    deviceLit.value = res.data.map(item => ({ ...item, alarm: [], people: {} }))
  })
}
fetchDeviceList()
onMounted(() => {
  websocket.initWebSocket()
})
onBeforeUnmount(() => {
  websocket.destroyWebSocket()
})
// 监听报警信息
watch(() => websocket.alarm, (newVal: any) => {
  console.log(newVal, '报警信息')
  const data = deviceLit.value?.filter(item => item.channelNo === newVal.channelNo && item.ip === newVal.ip && item.port === newVal.port)[0]
  if (data) {
    data.alarm.push(newVal)
  }
}, {
  deep: true,
  immediate: true,
})
// 监听人员信息
watch(() => websocket.people, (newVal: any) => {
  console.log(newVal, '人员信息')
  const data = deviceLit.value?.filter(item => item.channelNo === newVal.channelNo && item.ip === newVal.ip && item.port === newVal.port)[0]
  if (data) {
    data.people = newVal
  }
}, {
  deep: true,
  immediate: true,
})
</script>

<template>
  <div class="container">
    <video-play v-for="(item, index) in deviceLit" :id="`video-${index + 1}`" :key="item" :value="item"
      :index="index + 1" />
  </div>
</template>

<style lang="scss" scoped>
// 样式
.container {
  display: flex;
  flex-wrap: wrap;
  overflow-y: hidden;
  margin-top: -1px;
}
</style>