<template>
  <div class="video">
    <div id="tabDiv">
      <div id="divPlugin" class="iframe-body" />
    </div>
  </div>
</template>

<script>
import { initPlugin, login, logout } from '@/utils/HKVideo'

export default {
  name: 'VideoMonitor',
  props: {
    deviceInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      activeName: 'hk',
      tabHeight: '',
      tabWidth: '',
      pre: null
    }
  },
  watch: {
    deviceInfo: {
      handler(newVal, oldVal) {
        console.log('监听到设备信息变化', newVal)
        if (newVal.ip && newVal.deviceUser && newVal.devicePassword) {
          if (this.pre !== null) {
            logout(this.pre.ip)
          }
          this.handleCameraClicked(newVal)
        }
      },
      deep: true,
      immediate: true // 立即执行
    }
  },
  mounted() {
    setTimeout(() => {
      initPlugin(1, '', false, null, null)
      window.addEventListener('resize', this.resize)
    }, 100)
  },
  async beforeDestroy() {
    try {
      if (this.pre !== null) {
        logout(this.pre.ip)
      }
    } catch (e) {
    }
    WebVideoCtrl.I_Resize(0, 0)
    window.location.reload()
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    waitTwoSeconds() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve('Operation complete after 2 seconds')
        }, 2000)
      })
    },
    resize() {
      WebVideoCtrl.I_Resize(document.getElementById('divPlugin').clientWidth, document.getElementById('divPlugin').clientHeight)
    },
    handleCameraClicked(camera) {
      console.log(camera)
      if (this.pre !== null) {
        logout(this.pre.ip)
      }
      this.pre = camera
      setTimeout(() => {
        login(
          camera.ip,
          '8989',
          // 'admin',
          // 'crcg1234',
          camera.deviceUser,
          camera.devicePassword,
          0)
      }, 1000)

    }
  }
}
</script>

<style scoped>
  .iframe-body{
    height: 300px;
    width: 400px;
    position: relative;
    top: 0px;
    left: 0px;
    /*frameBorder: 0;*/
    scrolling: no;
    border: 1px;
  }
  .video{
    background: white;
  }
</style>