<template>
  <div id="home" class="home" v-if="isAlive">
    <div class="video-container">
      <video id="video1" autoPlay :width="width" :height="height" style="margin-right:5px"></video>
      <video id="video2" autoPlay :width="width" :height="height"></video>
    </div>
    <div class="video-container">
      <video id="video3" autoPlay :width="width" :height="height" style="margin-right:5px"></video>
      <video id="video4" autoPlay :width="width" :height="height"></video>
    </div>
    <div class="desc-wrap" v-if="list.length >= 1">
      <VideoDesc
        v-for="(item, index) in list"
        :className="`video-${index + 1}`"
        v-show="item"
        :detail="item"
        :key="Math.random()"
      />
    </div>
    <el-pagination
      class="pagination"
      :current-page="listQuery.offset"
      :page-sizes="[4]"
      :page-size="listQuery.limit"
      :total="total"
      layout="total, prev, pager, next"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup name="VideoVP">
import { ref } from 'vue'
import VideoDesc from '@/components/VideoDescH/index.vue' // 横轴
import config from 'public/config/config.json'
import { getDevListPage } from '@/api/ptz/dev'
import useWebsocketStore from '@/store/modules/websocket'
const websocket = useWebsocketStore()

let webRtcServer = ref([])
let width = ref(0)
let height = ref(0)
let isAlive = ref(true)
// 默认查询条件
const defaultQuery = {
  keyword: '',
  stationId: '',
  offset: 1,
  limit: 4,
  sort: '',
  order: ''
}
// 数据列表
let list = ref([])
let newData = ref({})
const total = ref(0)
const listQuery = reactive({ ...defaultQuery })

// 查询数据
function fetchData() {
  list.value = []
  webRtcServer.value = []
  getDevListPage(listQuery).then(
    (res: { data: { rows: []; total: number } }) => {
      list.value = res.data.rows
      res.data.rows.forEach((item, index) => {
        nextTick(() => {
          let i = index + 1
          webRtcServer.value.push(
            new WebRtcStreamer('video' + i, config.rtspServer)
          )
          webRtcServer.value[i - 1].connect(
            `rtsp://${item.deviceUser}:${item.devicePassword}@${item.deviceIp}`
          )

          // 监听video上的标签是否存在
            resize()
            const videoElement = document.getElementById('video' + i)
            if (videoElement && videoElement.controls) {
              console.log('该视频元素支持用户控制播放。')
              // 执行相应操作
            } else {
              console.log('该视频元素不支持用户控制播放。')
            }
          // webRtcServer.value.push(
          //   new WebRtcStreamer('video' + 1, 'http://127.0.0.1:8000')
          // )
          // webRtcServer.value[i - 1].connect(`rtsp://admin:abc12345@192.168.2.2`)
        })
      })
      total.value = res.data.total
    }
  )
}

// 分页切换
function handleCurrentChange(val) {
  listQuery.offset = val
  fetchData()
}

// 调整大小
let resize = () => {
  const divPlugin = document.getElementById('home')
  width.value = divPlugin.clientWidth / 2 - 20
  height.value = divPlugin.clientHeight / 2 - 5
}

onMounted(async () => {
  await resize()
  await fetchData()
})

onBeforeUnmount(() => {
  // 在需要取消监听的地方调用 unwatch() 函数
  unwatch();
  for (let i = 0; i < webRtcServer.value.length; i++) {
    const server = webRtcServer.value[i]
    if (server && typeof server.disconnect === 'function') {
      server.disconnect()
    }
  }
  window.removeEventListener('resize', resize)
})

/*
socket更新数据
*/

// watch监听websocket变化
const unwatch = watch(websocket, newVal => {
  if (newVal.videoData && Object.keys(newVal.videoData).length >= 1) {
    console.log('监测到新的数据!videoVP')
    // 匹配对应id的数据
    const index = list.value.findIndex(
      item => item.deviceIp === newVal.videoData.deviceIp
    )
    if (index !== -1) {
      newData = Object.assign({}, list.value[index], newVal.videoData)
      list.value.splice(index, 1, newData)
      console.log(list.value)
    }
  }
})
</script>

<style lang="scss" scoped>
.home {
  padding-top: 5px;
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 102px);
  justify-content: space-evenly;
  align-content: space-between;
  overflow: hidden;

  video {
    position: relative;
    object-fit: fill;
    overflow: hidden;
    background: #000;
  }
}

.pagination {
  position: absolute;
  bottom: 5px;
}

.video-1,
.video-2 {
  top: calc(50% - 42px);
}

.video-3,
.video-4 {
  bottom: 45px;
}

.video-container {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}


</style>