<script lang="ts" setup name="VideoHK">
import { ElMessage } from 'element-plus'
import { getCurrentInstance, ref } from 'vue'
import VideoDesc from '@/components/VideoDescV/index.vue' // 竖轴
import { getDevListPage } from '@/api/ptz/dev'
import useWebsocketStore from '@/store/modules/websocket'
import { initPlugin, login, logout, preview } from '@/utils/HKVideo'
const { proxy } = getCurrentInstance()
const websocket = useWebsocketStore()
const router = useRouter()

// 默认查询条件
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 nvrList = ref([])
// 查询数据
async function fetchData() {
  if (!proxy.NVR) {
    list.value.forEach((item, index) => {
      logout(item.deviceIp)
    })
  }
  else {
    list.value.forEach((item, index) => {
      try {
        logout(item.nvrIp)
      }
      catch (e) {}
    })
  }
  WebVideoCtrl.I_StopAllPlay({
    success() {},
    error(oError) {},
  })
  list.value = []
  getDevListPage(listQuery).then((res: { data: { rows: []; total: number } }) => {
    list.value = res.data.rows
    res.data.rows.forEach((item, index) => {
      if (!proxy.NVR) {
        login(item.deviceIp, item.id === '1655767080138518529' ? '81' : '80', item.deviceUser, item.devicePassword, index) // 设备
      }
      else {
        // NVR
        login(item.nvrIp, item.nvrPort, item.nvrUser, item.nvrPassword, index, true, item.nvrChannel)
      }
    })
    total.value = res.data.total
  })
}

// socket更新数据
const unwatch = watch(websocket, (newVal) => {
  if (newVal.videoData && Object.keys(newVal.videoData).length >= 1) {
    // console.log('监测到新的数据!')
    // 匹配对应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
      // console.log(list.value)
    }
  }
})

// 调整大小
const resize = () => {
  const divPlugin = document.getElementById('divPlugin')
  WebVideoCtrl.I_Resize(divPlugin.clientWidth, divPlugin.clientHeight)
}

const instance = getCurrentInstance()

const videoWrapper = ref() // 组件

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

// 双击跳转
function cbDoubleClickWnd(iWndIndex, bFullScreen, event) {
  // if (bFullScreen) {
  // router.push(`/home/control/${list.value[iWndIndex].id}`)
  router.push({
    path: '/home/control',
    query: {
      id: list.value[iWndIndex].id,
    },
  })
  // }
}

onMounted(() => {
  setTimeout(() => {
    initPlugin(2, '', false, fetchData, cbDoubleClickWnd)
    window.addEventListener('resize', resize)
  }, 200)
})

onBeforeUnmount(() => {
  // WebVideoCtrl.JS_HideWnd()
  WebVideoCtrl.I_Resize(0, 0)
  unwatch()
  if (!proxy.NVR) {
    list.value.forEach((item, index) => {
      logout(item.deviceIp)
    })
  }
  else {
    list.value.forEach((item, index) => {
      try {
        logout(item.nvrIp)
      }
      catch (e) {}
    })
  }
  window.location.reload()
  window.removeEventListener('resize', resize)
})

const videoHK = ref('videoHK')
const isShow = ref(true)
</script>

<template>
  <div class="video-wrap">
    <div v-if="isShow" id="divPlugin" ref="videoWrapper" class="plugin" :class="videoHK" />
    <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>
  </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"
  />
</template>

<style lang="scss">
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-5%);
}

.videoHK {
  margin: 0 auto;
  height: calc(100vh - 100px);
  position: relative;
  width: calc(100% - 200px);
}

.video-wrap {
  padding: 0 5px;
  width: calc(100% - 10px);
  height: 100%;
  margin-left: 5px;
}

.video-1,
.video-2,
.video-3,
.video-4 {
  position: absolute;
  width: 75px;
  height: calc(50% - 22px);
  padding: 20px 5px 0;
  display: inline-block;
}
</style>