<script lang="ts" setup name="HKVideo">
import { getCurrentInstance, ref, watch } from 'vue'
import { initPlugin, login, logout } from '@/utils/HKVideo'
const props = defineProps({
  id: {
    type: String,
    default: '',
  },
  device: {
    type: Object,
    default: () => {
      return {
      }
    },
  },
})

const { proxy } = getCurrentInstance()

watch(() => props.device, (newValue, oldValue) => {
  if (newValue.deviceIp === '') {
    return
  }
  try {
    if (!proxy.NVR) {
      logout(oldValue.deviceIp)
    }
    else {
      logout(oldValue.nvrIp)
    }
  }
  catch (e) {}

  setTimeout(() => {
    try {
      if (!proxy.NVR) {
        login(newValue.deviceIp, newValue.id === '1655767080138518529' ? '81' : '80', newValue.deviceUser, newValue.devicePassword, 0)
      }
      else {
        login(newValue.nvrIp, newValue.nvrPort, newValue.nvrUser, newValue.nvrPassword, 0, true, newValue.nvrChannel)
      }
    }
    catch (e) {}
  }, 500)
}, { deep: true })

const videoHK = ref('videoHK')

onMounted(() => {
  setTimeout(() => {
    initPlugin(1, props.id, false, null, null)
  }, 200)
})

onBeforeUnmount(() => {
  console.log('here')
  WebVideoCtrl.I_Resize(1, 1)
  WebVideoCtrl.I_Resize(0, 0)
  const divPlugin = document.getElementById(`divPlugin${props.id}`)
  WebVideoCtrl.I_Resize(0, 0)

  if (props.device.deviceIp !== '') {
    if (!proxy.NVR) {
      logout(props.device.deviceIp)
    }
    else {
      try {
        logout(props.device.nvrIp)
      }
      catch (e) {}
    }
  }
  // window.location.reload()
})
</script>

<template>
  <div :id="`divPlugin${id}`" class="plugin" :class="videoHK" />
</template>

<style lang="scss" scoped>
.videoHK {
  margin: 0 auto;
  height: 100%;
  width: 100%;
  position: relative;
}
</style>