<template>
  <div id="VideoHistory">
    <div id="videoBox">
      <div id="left_listBox">
        <n-space>
          <p class="TopListSpan">开始日期:</p>
          <n-date-picker v-model:value="times1" type="datetime" placeholder="请选择开始日期" />
        </n-space>
        <n-space>
          <p class="TopListSpan">结束日期:</p>
          <n-date-picker v-model:value="times2" type="datetime" placeholder="请选择结束日期" />
        </n-space>
        <div class="videoTable">
          <n-tree
            v-if="treesData.length"
            :data="treesData"
            :node-props="checkCamera"
            block-line
            :default-expanded-keys="defaultExpandedKeys"
          />
        </div>
      </div>
      <div id="right_videoWindow" v-if="ifShowVideo">
        <!-- 视频盒子 -->
        <div id="playHistory" v-if="ifShowVideo"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import { Close } from '@vicons/ionicons5';
import { getCameraTree } from '@/services';
export default {
  name: 'VideoHistory',
  components: {
    Close,
  },
  setup() {
    const allData = reactive({
      ifShowVideo: true,
      oWebControl: null,
      times1: new Date().getTime() - 1 * 24 * 3600 * 1000,
      times2: Date.now(),
      siteVal: 'root000000', //选中的站点
      siteCode: '534faf61e5c14b09aa2fa522fc1382de', // 默认监控点编号
      CodeList: [],
      modalTitle: '历史视频',
      showModal: false,

      oWebControl: null, // 视频对象
      plugKey: '',

      loading: false,
      current: 1,
      pageSize: 10,
      total: 0,

      videoWidth: 1400, // 视频相关
      videoHeight: 750,
      left: '',
      top: '',
      powerCameraStr: '',
      recordLocation: 0, //存储类型，0是中心存储，1是设备存储，默认中心存储
      // 内网、公网 4个配置
      appkey: '',
      secret: '',
      ip: '',
      port: null,
      defaultExpandedKeys: ['root000000'], //默认展开节点
      treesData: [
        {
          label: '0',
          key: '0',
          click: false,
          children: [
            {
              label: '组1',
              key: '0-0',
              click: false,
              children: [
                {
                  label: '铁路桥',
                  key: 'cf99e49a50f641ba83832dd5ebff3fa5',
                  click: true,
                },
                {
                  label: '王家墩',
                  key: '4097ade6e64142d7ac7adff80b4617f0',
                  click: true,
                },
              ],
            },
          ],
        },
      ],
    });
    sessionStorage.setItem('powerCamera', [0, 1, 257, 256, 16, 258, 515, 768, 517, 514, 260, 259, 513, 516, 769, 512]);
    // 黄机内网地址
    allData.powerCameraStr = sessionStorage.getItem('powerCamera');
    allData.appkey = '26265267'; //外网发布
    allData.secret = 'CHtVgUwdLsJjE6CWYLMy';
    allData.ip = '192.168.10.49';
    allData.port = 443;

    //获取摄像头列表
    const getVideoList = async () => {
      allData.treesData = [];
      let res = await getCameraTree();
      if (res && res.code == 200) {
        let datas = res.data;
        allData.treesData = datas;
        // allData.defaultExpandedKeys.push(datas[0].key);
      }
    };
    // 选择树结构的摄像头
    const checkCamera = ({ option }) => {
      return {
        onClick() {
          if (allData.ifShowVideo != true) {
            allData.ifShowVideo = true;
          }
          console.log('option---', option);
          allData.siteCode = option.key;
          allData.recordLocation = Number(option.recordLocation); //定义是中心存储0 还是 设备存储1
          // 只有子节点点击才能查看视频
          if (option.click) {
            initVideo(allData.oWebControl);
          }
        },
      };
    };
    /* 创建插件实例 */
    const initPlugin = () => {
      const dll = { dllPath: './VideoPluginConnect.dll' };
      allData.oWebControl = new WebControl({
        szPluginContainer: `playHistory`, // 指定容器id
        iServicePortStart: 15900,
        iServicePortEnd: 15909,
        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
        cbConnectSuccess: () => {
          allData.oWebControl.JS_StartService('window', dll).then(() => {
            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(`playHistory`, allData.videoWidth, allData.videoHeight).then(() => {
              //JS_CreateWnd创建视频播放窗口，宽高可设定
              initVideo(allData.oWebControl); // 创建播放实例成功后初始化
              allData.loading = false;
              console.log('启动插件成功playHistory！');
            });
          });
        },
        //插件服务启动失败，尝试自行启动
        cbConnectError: () => {
          allData.oWebControl = null;
          WebControl.JS_WakeUp('VideoWebPlugin://');
          setTimeout(() => {
            initPlugin();
          }, 3000);
        },
      });
    };

    /* 获取公钥 */
    const 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);
          startPlayback(oWebControl);
        }
      });
    };

    /* 视频插件配置 */
    const getVideoConfig = (oWebControl) => {
      allData.powerCameraStr = sessionStorage.getItem('powerCamera');
      const configObj = {
        funcName: 'init',
        argument: JSON.stringify({
          appkey: allData.appkey, //API网关提供的appkey
          secret: setEncrypt(allData.secret), //API网关提供的secret
          ip: allData.ip, //API网关IP地址
          playMode: 1, //播放模式（决定显示预览还是回放界面）
          port: allData.port, //端口
          snapDir: 'D:\\SnapDir', //抓图存储路径
          videoDir: 'D:\\VideoDir', //紧急录像或录像剪辑存储路径
          layout: '1x1', //布局
          enableHTTPS: 1, //是否启用HTTPS协议
          encryptedFields: 'secret', //加密字段
          showToolbar: 1, //是否显示工具栏 0不显示   1显示
          showSmart: 1, //是否显示智能信息
          buttonIDs: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', //自定义工具条按钮powerCameraStr
        }),
      };
      oWebControl.JS_RequestInterface(configObj).then(() => {
        oWebControl.JS_Resize(allData.videoWidth, allData.videoHeight);
      });
    };
    /* 视频流RSA加密 */
    const setEncrypt = (value) => {
      const encrypt = new JSEncrypt();
      encrypt.setPublicKey(allData.plugKey);
      return encrypt.encrypt(value);
    };

    /* 历史视频播放(单点) 单点 */
    const startPlayback = (oWebControl) => {
      const data = {
        funcName: 'startPlayback',
        argument: {
          cameraIndexCode: allData.siteCode, //监控点编号
          startTimeStamp: Math.round(allData.times1 / 1000),
          endTimeStamp: Math.round(allData.times2 / 1000),
          recordLocation: allData.recordLocation, //存储类型，0是中心存储，1是设备存储，默认中心存储
          // streamMode: 0, //主子码流标识：0-主码流，1-子码流
          transMode: 1, //传输协议：0-UDP，1-TCP
          gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
          ezvizDirect: 0,
        },
      };
      oWebControl.JS_RequestInterface(data).then((res) => {});
    };
    // 销毁实例
    const destoryVideo = () => {
      if (allData.oWebControl) {
        allData.oWebControl.JS_HideWnd();
        allData.oWebControl.JS_DestroyWnd();
        allData.oWebControl = null;
        allData.ifShowVideo = false;
      }
    };

    onMounted(() => {
      getVideoList();
      // 动态获取宽度
      allData.videoWidth = document.getElementById('right_videoWindow').offsetWidth - 100;
      initPlugin();
      allData.oWebControl.oDocOffset.top = 100;
      allData.oWebControl.oDocOffset.left = 250;
    });
    onBeforeUnmount(() => {
      destoryVideo(); //销毁实例
    });
    return {
      ...toRefs(allData),
      checkCamera,
    };
  },
};
</script>
<style lang="less">
#VideoHistory {
  width: 100%;
  height: 100%;
  overflow: hidden;
  #videoBox {
    display: flex;
    #left_listBox {
      width: 300px;
      height: 800px;
      box-sizing: border-box;
      padding: 20px 10px;
      .TopListSpan {
        line-height: 36px;
      }
      .videoTable {
        margin: 10px 0 10px 0;
        height: 680px !important;
        overflow: auto;
        .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 {
      margin-left: 20px;
      flex: 1;
      height: 800px;
      #playHistory {
        img {
          display: none;
        }
      }
    }
  }
}
</style>