<!-- 4路视频 -->
<template>
  <div class="video">
    <el-row>
      <el-col :span="6">
        <video-tree @click="handleCameraClicked"/>
      </el-col>
      <el-col :span="18">
        <div id="tabDiv">
          <div id="divPlugin" class="iframe-body" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

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

export default {
  name: 'VideoMonitor',
  components: { VideoTree },
  data() {
    return {
      activeName: 'hk',
      tabHeight: '',
      tabWidth: '',
      pre: null
    }
  },
  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
      login(
        camera.ip,
        '8989',
        // 'admin',
        // 'crcg1234',
        camera.deviceUser,
        camera.devicePassword,
        0)
    }
  }
}
</script>

<style scoped>
  .iframe-body{
    height: calc(100vh - 180px);
    width: 100%;
    position: relative;
    top: 0px;
    left: 0px;
    /*frameBorder: 0;*/
    scrolling: no;
    border: 1px;
  }
  .video{
    background: white;
  }
</style>