<template>
  <div id="HomePage_video"
       :style="{width: props.width+'px', height: props.height+'px'}">
    <div id="playWnd2"
         class="videobox2"></div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const props = defineProps({
  width: {
    type: String,
    default: '',
  },
  height: {
    type: String,
    default: '',
  },
  pointfeature: {
    type: Object,
    default: {},
  }
});

const allData = reactive({
  oWebControl: null,
  plugKey: '',
  showVideos: {
    // cameraIndexCode: "13bdc8934e5c420a97ed6c47a3d92f81", //监控点编号
    cameraIndexCode: '', //监控点编号
    streamMode: 0, //主子码流标识：0-主码流，1-子码流
    transMode: 1, //传输协议：0-UDP，1-TCP
    gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
    wndId: 1, //播放窗口序号
  },

  //显示的画面信息
  siteVal: 'root000000', //选中的站点
  layoutVal: '-1', //选中的布局
  siteList: [],
  layoutList: [],
  width: 400,
  height: 288,
  left: '',
  top: '',
  powerCameraStr: '',
  // 内网、公网 4个配置
  appkey: '',
  secret: '',
  ip: '',
  port: '',
  constindex: 1,
  layout: '1x1',
  isShow: true,
  Count: 0,
  isshowItem: false,
  number1: 0,
})


// 调用新的点击事件的方法进行视频监控的展示
function clearVideo () {
  if (allData.oWebControl != null) {
    allData.oWebControl.JS_HideWnd()
    allData.oWebControl.JS_Disconnect()
    allData.oWebControl.JS_DestroyWnd()
  }
}

function newcheckeed () {
  // console.log('传递到视频插件里面的item', item);

  if (props.pointfeature.indexCode) {
    var video = {
      cameraIndexCode: props.pointfeature.indexCode, //监控点编号
      streamMode: 0, //主子码流标识：0-主码流，1-子码流
      transMode: 1, //传输协议：0-UDP，1-TCP
      gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
      wndId: -1, //播放窗口序号
    }
    allData.showVideos = video

    // initPlugin()
    getClickAction();

  } else {
    proxy.$modal.msgWarning("无视频资源");
  }
}

/* 创建插件实例 */
function initPlugin () {
  const dll = { dllPath: './VideoPluginConnect.dll' }
  allData.oWebControl = new WebControl({
    szPluginContainer: 'playWnd2', // 指定容器id
    iServicePortStart: 15900,
    iServicePortEnd: 15909,
    szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid

    cbConnectSuccess: () => {
      allData.oWebControl.JS_StartService('window', dll).then(() => {
        // 设置视频 web 插件消息回调
        allData.oWebControl.JS_SetWindowControlCallback({
          // cbIntegrationCallBack: msg => { }
        })
        //启动插件服务成功
        allData.oWebControl
          .JS_CreateWnd('playWnd2', props.width, props.height)
          .then(() => {
            //JS_CreateWnd创建视频播放窗口，宽高可设定
            initVideo(allData.oWebControl) // 创建播放实例成功后初始化
            console.log('启动插件成功！')
          })
      })
    },
    //插件服务启动失败，弹框提示
    cbConnectError: () => {
      allData.oWebControl = null

      allData.Count++
      if (allData.Count < 2) {
        WebControl.JS_WakeUp('VideoWebPlugin://')

        setTimeout(() => {
          initPlugin()
        }, 8000)
      } else {
        // this.open();
      }
      console.log('创建插件失败')
    },
  })
}
/* 获取公钥 */
function initVideo () {
  const params = {
    funcName: 'getRSAPubKey',
    argument: JSON.stringify({ keyLength: 1024 }),
  }

  allData.oWebControl.JS_RequestInterface(params).then((res) => {
    if (res.responseMsg.data) {
      console.log(res);
      allData.plugKey = res.responseMsg.data
      getVideoConfig(allData.oWebControl)
    }
  })
}
/* 视频插件配置  插件初始化*/

function getVideoConfig (oWebControl) {
  allData.powerCameraStr = sessionStorage.getItem('powerCamera')
  // console.log(allData.powerCameraStr, "this.powerCameraStr");

  const { offsetWidth, offsetHeight } = document.getElementById('playWnd2')
  const configObj = {
    funcName: 'init',
    argument: JSON.stringify({
      appkey: allData.appkey, //API网关提供的appkey
      secret: setEncrypt(allData.secret), //API网关提供的secret
      ip: allData.ip, //API网关IP地址z
      playMode: 0, //播放模式（决定显示预览还是回放界面）
      port: allData.port, //端口
      snapDir: 'C:\\SnapDir', //抓图存储路径
      videoDir: 'C:\\VideoDir', //紧急录像或录像剪辑存储路径
      layout: allData.layout, //布局
      enableHTTPS: 1, //是否启用HTTPS协议
      encryptedFields: 'secret', //加密字段

      showToolbar: 1, //是否显示工具栏
      showSmart: 1, //是否显示智能信息
      // buttonIDs: "0,16,256,257,258,259,260,512,515,516,517,768,769" //自定义工具条按钮  旧的
      buttonIDs: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', //自定义工具条按钮 新的
      // buttonIDs: this.powerCameraStr === null ? "0" : this.powerCameraStr //自定义工具条按钮powerCameraStr
    }),
  }
  allData.oWebControl.JS_RequestInterface(configObj).then(() => {
    allData.oWebControl.JS_Resize(props.width, props.height)
    getClickAction()
  })
}
/* 视频流RSA加密 */
function setEncrypt (value) {
  const encrypt = new JSEncrypt()
  encrypt.setPublicKey(allData.plugKey)
  return encrypt.encrypt(value)
}
/* 视频预览 */
function getClickAction () {
  allData.oWebControl.JS_RequestInterface({
    funcName: 'startPreview',
    argument: JSON.stringify(allData.showVideos),
  })
}
/* 显示视频实例 */
function getShowStruction () {
  if (allData.oWebControl == null) {
    initPlugin()
  } else {
    allData.oWebControl.JS_ShowWnd()
  }
}


function windowScroll () {
  allData.oWebControl.JS_Resize(props.width, props.height)
}
function windowResize () {
  allData.oWebControl && allData.oWebControl.JS_Resize(props.width, props.height)

  // var div = document.getElementById('playWnd2')
  // this.width = div.offsetWidth // 返回元素的总宽度
  // this.height = div.offsetHeight // 返回元素的总高度
  // if (allData.oWebControl) {
  //   allData.oWebControl.JS_Resize(this.width, this.height)
  // }
}

onMounted(() => {
  console.log('videos', props.pointfeature);

  allData.appkey = '22954112' //
  allData.secret = '0gaeJIfkqG9sZsvsVbwj' //
  allData.ip = '59.207.208.2' //
  allData.port = 1443 //

  // this.getCameraSta()
  // this.gethkviewqueryAll()
  var div = document.getElementById('playWnd2')
  props.width = div.offsetWidth // 返回元素的总宽度
  props.height = div.offsetHeight // 返回元素的总高度
  // 设置top left
  const bodyW = $(window).width()
  const bodyH = $(window).height()
  allData.left = bodyW / 2 - props.width / 2
  allData.top = bodyH / 2 - props.height / 2

  initPlugin()

  // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
  window.addEventListener('resize', windowResize())

  // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
  // window.addEventListener('scroll', windowScroll())
})

onBeforeUnmount(() => {
  if (allData.oWebControl != null) {
    // allData.oWebControl.JS_HideWnd()
    allData.oWebControl.JS_Disconnect()
    allData.oWebControl.JS_DestroyWnd()
    allData.oWebControl = null
  }
})

defineExpose({
  newcheckeed
})
</script>

<style scoped>
#HomePage_video {
  width: 640px;
  height: 570px;
  /* position: relative; */
}
#HomePage_video img {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
}

.videobox2 {
  /* position: absolute;
  top: 0;
  right: 0; */
  width: 100%;
  height: calc(100% - 10px);
  border: 1px solid #333;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  /* overflow: hidden; */
}

.videobox2 img {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
}
</style>