<template>
  <div id="emergency_video">
    <div id="videoBox">
      <div id="left_listBox">
        <div class="videoTable">
          <n-tree
            :data="treesData"
            v-if="treesData.length"
            :node-props="checkCamera"
            block-line
            :default-expanded-keys="defaultExpandedKeys"
          />
        </div>
      </div>
      <div id="right_videoWindow" v-if="showVideo">
        <!-- 视频盒子 -->
        <div id="playVideoNow" v-if="showVideo" class="videobox2"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import { getCameraTree } from '@/services';

export default {
  name: 'emergency_video',
  components: {},
  setup() {
    const allData = reactive({
      showVideo: true,
      constIndex: 1,
      oWebControl: null,
      plugKey: '',
      Count: 0,
      ifFirstTime: true,
      videoWidth: 1400,
      videoHeight: 750,
      defaultExpandedKeys: ['root000000'], //默认展开节点
      defaultCode: '', //默认监控点
      showVideos: {
        cameraIndexCode: 'e4a8bcca3393494bbdc9f2da087875bb', // 默认监控点编号
        streamMode: 0, // 主子码流标识：0-主码流，1-子码流
        transMode: 1, // 传输协议：0-UDP，1-TCP
        gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
        wndId: 1, // 播放窗口序号
      },
      treesData: [
        {
          label: '0',
          key: '0',
          click: false,
          children: [
            {
              label: '组1',
              key: '1-0',
              click: false,
              children: [
                {
                  label: '铁路桥',
                  key: 'cf99e49a50f641ba83832dd5ebff3fa5',
                  click: true,
                },
                {
                  label: '王家墩',
                  key: '4097ade6e64142d7ac7adff80b4617f0',
                  click: true,
                },
              ],
            },
          ],
        },
      ],
    });
    // 获取摄像头列表
    const getVideoList = async () => {
      allData.treesData = [];
      let res = await getCameraTree();
      if (res && res.code == 200) {
        let datas = res.data;
        // allData.defaultExpandedKeys.push(datas[0].key);
        allData.treesData = datas;
      }
    };
    // 选择树结构的摄像头
    const checkCamera = ({ option }) => {
      return {
        onClick() {
          if (allData.showVideo != true) {
            allData.showVideo = true;
            allData.constIndex = 1;
          } else {
            allData.constIndex = -1;
          }
          console.log('option---', option);
          // 只有子节点点击才能查看视频
          if (option.click) {
            allData.ifFirstTime = false;
            allData.showVideos = {
              cameraIndexCode: option.key, // 监控点编号
              streamMode: 0, // 主子码流标识：0-主码流，1-子码流
              transMode: 1, // 传输协议：0-UDP，1-TCP
              gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用
              wndId: allData.constIndex, // 播放窗口序号
            };
            initVideo(allData.oWebControl);
          }
        },
      };
    };
    /* 创建插件实例 */
    function initPlugin() {
      const dll = { dllPath: './VideoPluginConnect.dll' };
      allData.oWebControl = new WebControl({
        szPluginContainer: 'playVideoNow', // 指定容器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) => {
                //注：不能使用外部函数调用，无效
                if (msg?.responseMsg?.msg?.result) {
                  const { result } = msg.responseMsg.msg;
                  if (result == 1024) {
                    allData.oWebControl.JS_HideWnd(); //放大隐藏其它视频窗口
                  } else if (result == 1025) {
                    allData.oWebControl.JS_ShowWnd(); //缩小显示全部窗口
                  }
                }
              },
            });
            // 启动插件服务成功
            allData.oWebControl.JS_CreateWnd('playVideoNow', allData.videoWidth, allData.videoHeight).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 {
          }
          console.log('创建插件失败');
        },
      });
    }
    /* 获取公钥 */
    function initVideo(oWebControl) {
      const params = {
        funcName: 'getRSAPubKey',
        argument: JSON.stringify({ keyLength: 1024 }),
      };
      oWebControl.JS_RequestInterface(params).then((res) => {
        if (res.responseMsg.data) {
          allData.plugKey = res.responseMsg.data;
          getVideoConfig(oWebControl);
        }
      });
    }
    /* 视频插件配置  插件初始化 */
    function getVideoConfig(oWebControl) {
      const configObj = {
        funcName: 'init',
        argument: JSON.stringify({
          appkey: '26265267', // API网关提供的appkey 26265267
          secret: setEncrypt('CHtVgUwdLsJjE6CWYLMy'), // API网关提供的secret  CHtVgUwdLsJjE6CWYLMy
          ip: '192.168.10.49', // API网关IP地址 192.168.10.49
          port: 443, // 端口
          playMode: 0, // 播放模式 0-预览，1-回放
          snapDir: 'D:\\SnapDir', // 抓图存储路径
          videoDir: 'D:\\VideoDir', // 紧急录像或录像剪辑存储路径
          layout: '1x2', // 布局
          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', // 自定义工具条按钮 新的
        }),
      };
      oWebControl.JS_RequestInterface(configObj).then(() => {
        oWebControl.JS_Resize(allData.videoWidth, allData.videoHeight);
        // 初次加载时，显示默认多个，点击时单个加载
        if (allData.ifFirstTime) {
          getClickMoreAction();
        } else {
          allData.constIndex = -1;
          getClickAction();
        }
      });
    }
    /* 视频流RSA加密 */
    function setEncrypt(value) {
      const encrypt = new JSEncrypt();
      encrypt.setPublicKey(allData.plugKey);
      return encrypt.encrypt(value);
    }
    /* 视频预览 */
    function getClickAction() {
      console.log(allData.showVideos, 'showVideos');
      allData.oWebControl.JS_RequestInterface({
        funcName: 'startPreview',
        argument: JSON.stringify(allData.showVideos),
      });
    }
    // 默认打开多个视频预览
    function getClickMoreAction() {
      allData.oWebControl.JS_RequestInterface({
        funcName: 'startMultiPreviewByCameraIndexCode',
        argument: {
          list: [
            {
              cameraIndexCode: allData.defaultCode, // 监控点编号
              ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
              gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
              streamMode: 0, // 主子码流标识  0-主码流 1-子码流
              transMode: 1, // 传输协议 0-UDP 1-TCP
              wndId: 1, // 播放窗口序号
            },
            {
              cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号
              ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连
              gpuMode: 0, // 是否启用 GPU 硬解  0-不启用 1-启用
              streamMode: 0, // 主子码流标识  0-主码流 1-子码流
              transMode: 1, // 传输协议 0-UDP 1-TCP
              wndId: 2, // 播放窗口序号
            },
          ],
        },
      });
    }
    onMounted(() => {
      getVideoList();
      // 获取默认的监控点编号
      let codes = localStorage.getItem('defaultVideoCode');
      allData.defaultCode = codes ? codes : 'edaea623e40f45df8b1f3676aa283a79';
      // 动态获取宽度
      allData.videoWidth = document.getElementById('right_videoWindow').offsetWidth;
      // 批量视频预览
      allData.ifFirstTime = true;
      initPlugin();
      allData.oWebControl.oDocOffset.top = 100;
      allData.oWebControl.oDocOffset.left = 150;
    });
    onBeforeUnmount(() => {
      if (allData.oWebControl) {
        allData.oWebControl.JS_HideWnd();
        allData.oWebControl.JS_DestroyWnd();
        allData.oWebControl = null;
        allData.showVideo = false;
      }
    });

    return {
      ...toRefs(allData),
      checkCamera,
      initPlugin,
      initVideo,
      setEncrypt,
      getVideoConfig,
      getVideoList,
    };
  },
};
</script>
<style lang="less">
#emergency_video {
  width: 100%;
  height: 100%;
  overflow: hidden;

  #videoBox {
    display: flex;
    #left_listBox {
      width: 300px;
      height: 800px;
      overflow: auto;
      box-sizing: border-box;
      padding: 20px 10px;

      .videoTable {
        margin: 0 10px;
        .n-base-icon {
          background: url('@/assets/newImgs/shexiangotu.png') no-repeat center !important;
          transform: rotate(-90deg);
          svg {
            display: none !important;
          }
        }
        .n-tree .n-tree-node-switcher.n-tree-node-switcher--hide {
          visibility: initial !important;
          transform: rotate(90deg);
        }
      }
    }

    #right_videoWindow {
      flex: 1;
      margin-left: 20px;
      #playVideoNow {
        img {
          display: none;
        }
      }
    }
  }
}
</style>