<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'
const websocket = useWebsocketStore()

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

// 查询数据
function fetchData() {
  list.value = []
  getDevListPage(listQuery).then((res: { data: { rows: []; total: number } }) => {
    // setTimeout(()=>{
    list.value = res.data.rows
    res.data.rows.forEach((item, index) => {
      if (item.deviceStatus !== '0') {
        loginDevice(item.deviceIp, '80', item.deviceUser, item.devicePassword, index)
      }
    })
    total.value = res.data.total
    // },1000)
  })
}

// 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)
}

/** * 初始化
 * @param {number} iWndowType 分屏类型：1 - 1*1，2 - 2*2，3 - 3*3，4 - 4*4，默认值1，单画面
 */
// var g_iWndIndex = 0
const instance = getCurrentInstance()

const videoWrapper = ref() // 组件

const initPlugin = (iWndowType) => {
  // 检查浏览器是否支持无插件
  // if (!WebVideoCtrl.I_SupportNoPlugin()) {
  //   ElMessage.warning("当前浏览器不支持无插件预览监控视频，已自动切换成插件模式，如果还未安装插件请安装")
  //   // 检查插件是否已经安装
  //
  // }
  const isInstall = WebVideoCtrl.I_CheckPluginInstall()
  if (isInstall == -1) {
    ElMessage.warning('您还未安装过插件，请先下载WebComponentsKit.exe双击安装！')
    // 后面推下载文件
    return
  }
  // 初始化插件参数及插入插件
  WebVideoCtrl.I_InitPlugin({
    szColorProperty: 'plugin-background:ffffff; sub-background:00000; sub-border:D0DAE4; sub-border-select:409EFF',
    bWndFull: true, // 是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
    iWndowType,
    cbSelWnd(xmlDoc) {
      const g_iWndIndex = parseInt(document.getElementById(xmlDoc).find('SelectWnd').eq(0).text(), 10)
      console.log(`当前选择的窗口编号：${g_iWndIndex}`)
    },
    cbDoubleClickWnd(iWndIndex, bFullScreen) {
      var szInfo = `当前放大的窗口编号：${iWndIndex}`
      if (!bFullScreen) {
        szInfo = `当前还原的窗口编号：${iWndIndex}`
      }
      console.log(szInfo)
    },
    cbEvent(iEventType, iParam1, iParam2) {
      if (iEventType == 2) { // 回放正常结束
        console.log(`窗口${iParam1}回放结束！`)
      }
      else if (iEventType == -1) {
        console.log(`设备${iParam1}网络错误！`)
      }
      else if (iEventType == 3001) {
        // clickStopRecord(g_szRecordType, iParam1)
      }
    },
    cbInitPluginComplete() {
      WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin').then(() => {
        resize()
        fetchData()
        // 检查插件是否最新
        WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
          if (bFlag) {
            ElMessage.warning('检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！')
          }
        })
      }, () => {
        ElMessage.warning('插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！')
      })
    },
  })
}

// 登出设备
function logoutDevice(ip) {
  WebVideoCtrl.I_Logout(ip).then(() => {
    console.log(`${ip}登出成功`)
  }, () => {
    console.log(`${ip}登出失败`)
  })
}

function loginDevice(szIP, szPort, szUsername, szPassword, g_iWndIndex) {
  if (szIP == '' || szPort == '') {
    return
  }
  const szDeviceIdentify = `${szIP}_${szPort}`
  console.log(szDeviceIdentify)
  WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
    timeout: 3000,
    success(xmlDoc) {
      console.log(`${szDeviceIdentify} 登录成功！`)
      preview(szIP, szPort, szUsername, szPassword, g_iWndIndex)
    },
    error(oError) {
      if (status === 2001) {
        console.log(`${szDeviceIdentify} 已登录过！`)
      }
      else {
        console.log(`${szDeviceIdentify} 登录失败！`, oError.errorCode, oError.errorMsg)
      }
    },
  })
}

function preview(szIP, szPort, szUsername, szPassword, g_iWndIndex) {
  var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)
  var szDeviceIdentify = szIP
  var iRtspPort = parseInt('554', 10)
  var iChannelID = parseInt('1', 10)
  var bZeroChannel = false
  var szInfo = ''
  var iStreamType = parseInt('1', 10) // 主码流

  if (szDeviceIdentify == null) {
    return
  }
  var startRealPlay = function () {
    WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
      iStreamType: 1,
      iChannelID: 1,
      bZeroChannel: false,
      iWndIndex: g_iWndIndex,
      success() {
        szInfo = '开始预览成功！'
        console.log(`${szDeviceIdentify} ${szInfo}`)
      },
      error(oError) {
        console.log(`${szDeviceIdentify} 开始预览失败！`, oError.errorCode, oError.errorMsg)
      },
    })
  }

  if (oWndInfo != null) { // 已经在播放了，先停止
    WebVideoCtrl.I_Stop({
      success() {
        startRealPlay()
      },
    })
  }
  else {
    startRealPlay()
  }
}

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

onMounted(() => {
  console.log('onMounted')
  setTimeout(() => {
    initPlugin(2)
    window.addEventListener('resize', resize)
  }, 200)
})

onBeforeUnmount(() => {
  // WebVideoCtrl.JS_HideWnd()
  WebVideoCtrl.I_Resize(0, 0)
  unwatch()
  list.value.forEach((item, index) => {
    logoutDevice(item.deviceIp)
  })
  window.location.reload()
  // isShow.value = false
  // videoWrapper.value.style.display = null
  // // instance.$forceUpdate()
  window.removeEventListener('resize', resize)
  // WebVideoCtrl.JS_Disconnect().then(function(){ }) // 断开与插件服务连接成功
})

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>