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

const webRtcServer = ref([])
const width = ref(0)
const height = ref(0)
const isAlive = ref(true)

// 默认查询条件
const defaultQuery = {
  keyword: '',
  stationId: '',
  offset: 1,
  limit: 4,
  sort: '',
  order: '',
}

// 数据列表
const list = ref([])
const newData = ref({})
const total = ref(0)
const listQuery = reactive({ ...defaultQuery })

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

onMounted(async () => {
  resize()
  fetchData()
})
// 查询数据
async function fetchData() {
  webRtcServer.value = []
  list.value = []
  // for (let i = 1; i <= 4; i++) {
  //   await webRtcServer.value.push(new WebRtcStreamer(`video${i}`, proxy.rtspServer))
  // }
  // webRtcServer.value.forEach((item) => {
  //   item.disconnect()
  // })
  getDevListPage(listQuery).then(
    (res: { data: { rows: []; total: number } }) => {
      list.value = res.data.rows
      res.data.rows.forEach((item, index) => {
        loadVideo(item, index)
      })
      total.value = res.data.total
    })
}

async function loadVideo(item, index) {
  // webRtcServer.value[index].disconnect()
  await webRtcServer.value.push(new WebRtcStreamer(`video${index + 1}`, proxy.rtspServer))
  if (item.deviceStatus !== '0') {
    await webRtcServer.value[index].connect(`rtsp://${item.deviceUser}:${item.devicePassword}@${item.deviceIp}`)
    console.log(`rtsp://${item.deviceUser}:${item.devicePassword}@${item.deviceIp}`)
  }
}
// 分页切换
function handleCurrentChange(val) {
  listQuery.offset = val
  fetchData()
}

// 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.value = Object.assign({}, list.value[index], newVal.videoData)
      // list.value.splice(index, 1, newData)
      list.value[index] = newData.value
    }
  }
})

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()
      webRtcServer.value[i] = null
    }
  }
  delete webRtcServer.value
  window.removeEventListener('resize', resize)
})
</script>

<template>
  <div v-if="isAlive" id="home" class="home">
    <div class="video-container">
      <video id="video1" autoPlay :width="width" :height="height" style="margin-right: 5px;" />
      <video id="video2" autoPlay :width="width" :height="height" />
    </div>
    <div class="video-container">
      <video id="video3" autoPlay :width="width" :height="height" style="margin-right: 5px;" />
      <video id="video4" autoPlay :width="width" :height="height" />
    </div>
    <div v-if="list.length >= 1" class="desc-wrap">
      <video-desc
        v-for="(item, index) in list"
        v-show="item"
        :key="index"
        :class-name="`video-${index + 1}`"
        :detail="item"
      />
    </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>

<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>