<template>
  <!-- 站点- 查看视频监控 -->
  <div class="equipVideo flex">
    <div class="contLeft-nopx">
      <p><span>运维单位</span><span class="title">武汉新烽光电</span></p>
      <p><span>责任人</span><span class="title">朱方仁</span></p>
      <p><span>安装位置</span><span class="title">汤逊湖1号排口</span></p>
      <p><span>摄像头类型</span><span class="title">球机</span></p>
      <p><span>安装时间</span><span class="title">2019-09-10</span></p>
      <p><span>视频状态</span><span class="title">在线</span></p>
    </div>
    <div id="videoEquip" style="height: 260px"></div>
  </div>
</template>
<script setup>
import {} from '@/api/dataAnalysis/syntherticData';

// 海康视频
const showVideos = ref({
  cameraIndexCode: '8df2bf406a4a4eadad1d9e94ff7206ff', // 监控点编号
  streamMode: 0, // 主子码流标识：0-主码流，1-子码流
  transMode: 1, // 传输协议：0-UDP，1-TCP
  gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
  wndId: 1, // 播放窗口序号
});
const videoWidth = ref(200);
const videoHeight = ref(260);
const Count = ref(0);
const plugKey = ref('');

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

    cbConnectSuccess: () => {
      window.videoWebControl.JS_StartService('window', dll).then(() => {
        // 设置视频 web 插件消息回调
        window.videoWebControl.JS_SetWindowControlCallback({
          // cbIntegrationCallBack: msg => { }
        });
        // 启动插件服务成功
        window.videoWebControl.JS_CreateWnd('videoEquip', videoWidth.value, videoHeight.value).then(() => {
          // JS_CreateWnd创建视频播放窗口，宽高可设定
          initVideo(window.videoWebControl); // 创建播放实例成功后初始化
          console.log('启动插件成功！');
        });
      });
    },
    // 插件服务启动失败，弹框提示
    cbConnectError: () => {
      window.videoWebControl = null;
      Count.value++;
      if (Count.value < 2) {
        WebControl.JS_WakeUp('VideoWebPlugin://');
        setTimeout(() => {
          initPlugin();
        }, 8000);
      } else {
      }
      console.log('创建插件失败');
    },
  });
}
/* 获取公钥 */
function initVideo(videoWebControl) {
  const params = {
    funcName: 'getRSAPubKey',
    argument: JSON.stringify({ keyLength: 1024 }),
  };

  videoWebControl.JS_RequestInterface(params).then(res => {
    if (res.responseMsg.data) {
      plugKey.value = res.responseMsg.data;
      getVideoConfig(videoWebControl);
    }
  });
}
/* 视频插件配置  插件初始化 */
function getVideoConfig(videoWebControl) {
  const configObj = {
    funcName: 'init',
    argument: JSON.stringify({
      appkey: '22920329', // API网关提供的appkey
      secret: setEncrypt('ryhnhHNWRoXqGYVjsKf9'), // API网关提供的secret
      ip: '183.64.91.250', // API网关IP地址z
      playMode: 0, // 播放模式 0-预览，1-回放
      port: 8443, // 端口
      snapDir: 'D:\\SnapDir', // 抓图存储路径
      videoDir: 'D:\\VideoDir', // 紧急录像或录像剪辑存储路径
      layout: '1x1', // 布局
      enableHTTPS: 1, // 是否启用HTTPS协议 0https 1http
      encryptedFields: 'secret', // 加密字段
      showToolbar: 1, // 是否显示工具栏
      showSmart: 1, // 是否显示智能信息
      buttonIDs: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', // 自定义工具条按钮 新的
    }),
  };
  videoWebControl.JS_RequestInterface(configObj).then(() => {
    videoWebControl.JS_Resize(videoWidth.value, videoHeight.value);
    getClickAction();
  });
}
/* 视频流RSA加密 */
function setEncrypt(value) {
  const encrypt = new JSEncrypt();
  encrypt.setPublicKey(plugKey.value);
  return encrypt.encrypt(value);
}
/* 视频预览 */
function getClickAction() {
  console.log(showVideos.value, 'showVideos');
  window.videoWebControl.JS_RequestInterface({
    funcName: 'startPreview',
    argument: JSON.stringify(showVideos.value),
  });
}
function windowResize() {
  let div = document.getElementById('videoEquip');
  videoWidth.value = div.offsetWidth; // 返回元素的总宽度
  videoHeight.value = div.offsetHeight; // 返回元素的总高度
  if (window.videoWebControl) {
    window.videoWebControl.JS_Resize(videoWidth.value, videoHeight.value);
  }
}

onMounted(() => {
  videoWidth.value = document.getElementById('videoEquip').offsetWidth;
  if (window.videoWebControl == null) {
    setTimeout(() => {
      initPlugin();
    }, 500);
  } else {
    window.videoWebControl.JS_ShowWnd();
  }
  window.onresize = () => {
    videoWidth.value = document.getElementById('videoEquip').offsetWidth;
    console.log(document.getElementById('videoEquip').offsetWidth);
    windowResize();
  };
});
onBeforeUnmount(() => {
  if (window.videoWebControl != null) {
    window.videoWebControl.JS_HideWnd();
    window.videoWebControl.JS_DestroyWnd();
    window.videoWebControl = null;
  }
});
</script>
<style lang="scss">
.equipVideo {
  width: 100%;
  .contLeft-nopx {
    background: #f9fbff;
    padding: 10px;
    height: 260px;
    width: 200px;
    margin-right: 10px;
    p {
      display: flex;
      justify-content: space-between;
      .title {
        font-weight: bold;
      }
    }
  }
  #videoEquip {
    flex: 1;
    border: 1px solid red;
    .wc-grab-open-image {
      display: none;
    }
  }
}
</style>