<template>
  <div>
    <el-row>
      <el-col :span="18" :offset="3">
        <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
          <div class="body-right">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="海康" name="hk">
                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
              </el-tab-pane>
              <el-tab-pane label="NVR" name="nvr">
                <iframe name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  // import VideoTree from './videoTree'
  // import WebPlay from './webPlay'
  import { getDetailDevice } from '@/api/device'
  export default {
    name: 'VideoMonitor',
    // components: { WebPlay },
    data() {
      return {
        activeName: 'nvr',
        videoShow: true,
        listQuery: {
          startTime: '',
          endTime: ''
        },
        camera:{
          ip:'',
          port:'',
          monitorPoint:'',
          username:'',
          password:''
        }
      }
    },
    mounted() {
      if (this.$route.query && this.$route.query.id) {
        const id = this.$route.query.id
        this.listQuery.startTime = this.$route.query.time
        var time =  new Date(this.listQuery.startTime)
        var minute = time.getMinutes()
        time.setMinutes(minute+5)
        this.listQuery.endTime = time.toLocaleString()
        getDetailDevice(id).then(response => {
          if (response.code === 200) {
            console.log(response.data)
            this.camera.ip = response.data.ip
            this.camera.port = response.data.port
            this.camera.monitorPoint = response.data.monitorPoint
            this.camera.username = response.data.username
            this.camera.password = response.data.password
            this.initCamera()
          }
        })
      }
    },
    methods: {
      handleClick(tab, event) {
        this.initCamera()
      },
      initCamera(){
        if(this.activeName === 'hk'){
          // window.frames['playHK'].close()
          if (typeof this.camera.monitorPoint === 'undefined' || this.camera.monitorPoint === '') {
            console.log('monitorPoint is null')
            return false
          }
          if (typeof this.listQuery.startTime === 'undefined' || this.listQuery.startTime === '') {
            console.log('startTime is null')
            return false
          }
          window.frames['playHK'].initPlugin()
          window.frames['playHK'].stop()
          window.frames['playHK'].search(this.camera.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
        }else{
          window.frames['playNVR'].stopPlayReal(null)
          if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
            console.log('ip is null')
            return false
          }
          if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
            console.log('port is null')
            return false
          }else{
            this.camera.ip += (':'+ this.camera.port)
          }
          if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
            console.log('username is null')
            return false
          }
          if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
            console.log('password is null')
            return false
          }
          // 开始预览
          window.frames['playNVR'].startPlayReal(this.camera)
          window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
          // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)  //   <web-play ref="webCtrl" />
        }

      }
    }
  }
</script>

<style scoped>
  .iframe-body{
    height: calc(100vh - 305px);
    width: 100%;
    frameBorder: 0;
    scrolling: no;
    border: 0;
    vspale: 0;
  }
</style>