<!-- 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" @dblclick="dbClickHK"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

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

export default {
  name: 'VideoMonitor',
  components: { VideoTree },
  data() {
    return {
      activeName: 'hk',
      tabHeight: '',
      tabWidth: '',
      pre: null,
      currentIndex: 0, // 播放第几路
      currentCameras: [{}, {}, {}, {}],
    }
  },
  mounted() {
    setTimeout(() => {
      initPlugin(2, '', true, 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)
      for (let i = 0; i < this.currentIndex; i++) { // 前面有
        if (this.currentCameras[i].id === camera.id) {
          return
        }
      }
      // if (this.pre !== null) {
      //   logout(this.pre.ip)
      // }
      this.pre = camera
      if (this.currentIndex === 4) {
        this.currentIndex = 0
      }
      if (this.currentCameras[this.currentIndex].ip) {
        logout(this.currentCameras[this.currentIndex].ip)
        stop(this.currentIndex)
      }
      this.currentCameras[this.currentIndex] = camera
      login(
        camera.ip,
        '8989',
        // 'admin',
        // 'crcg1234',
        camera.deviceUser,
        camera.devicePassword,
        this.currentIndex)
        console.log('this.currentIndex',this.currentIndex);

      this.currentIndex += 1
    }
  },
  dbClickHK() {
    clickFullScreen()
  }
}
</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>