<!-- 视频播放组件 -->
<template>
    <div class="vidoForBack" :class="vidoBackShow?'vidoBack':null">
         <div class="VideoForHk" ref="playWndBox">
             <div id="playWnd" class="playWnd" :style="{ height: playWndHeight + 'px', width: playWndWidth + 'px',
           }"></div>
             <div class="vido_footer" v-if="vidoBackShow?true:false"><span @click="onCancelVideo()"></span></div>
         </div>
    </div>
</template>
<script setup>
    import {ref,  onMounted, onBeforeUnmount,onBeforeMount, getCurrentInstance, defineExpose, nextTick, watch} from 'vue'
    const props = defineProps(['cameraIndexCode','vidoBackShow'])
    const playWndBox = ref(null)

    const vidoBackShow = ref(true)
    let backMsg = ref('')
    let playWndHeight = ref('')
    let playWndWidth = ref('')
    let pubKey = ref('')
    let oWebControl = ref(null)
    let objData = ref({
        appkey: "29125464",                 //海康提供的appkey
        ip: "172.16.58.60",                     //海康提供的ip
        secret: "0E0mA8uF5T9cVNvE5CxX",                 //海康提供的secret
        port: 4443,
        playMode: 0,        // 0 预览 1回放
        layout: "1x1",      //页面展示的模块数【16】
    })
    onBeforeMount(() => {
        vidoBackShow.value=props.vidoBackShow
        // 初始化播放器插件
        nextTick(() => {
            initPlugin();
        },{immediate: true})

    })

    onMounted(() => {
        // 获取页面的实例对象
        const pageInstance = getCurrentInstance();
        // 获取dom节点对象
        const tagDomObj = pageInstance.refs.playWndBox;
        playWndHeight.value = tagDomObj.clientHeight;
        playWndWidth.value = tagDomObj.clientWidth;
        // 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
        window.addEventListener("scroll", () => {
            console.log(5);
            // return
            if (oWebControl.value != null) {
                oWebControl.JS_Resize(
                    tagDomObj.clientWidth,
                    tagDomObj.clientHeight
                );
                this.setWndCover();
            }
        });
        // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
        window.addEventListener("resize", (e) => {
            console.log(0);
            if (oWebControl.value != null) {
                oWebControl.JS_Resize(
                    tagDomObj.clientWidth,
                    tagDomObj.clientHeight
                );
                this.setWndCover();
            }
        });
        // 初始化播放器插件
    })

   function onCancelVideo(){
           // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
           oWebControl.JS_HideWnd();
           // 销毁当前播放的视频
           oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
           // 断开与插件服务连接
           oWebControl.JS_Disconnect();
           oWebControl.JS_RequestInterface({funcName: 'uninit'})
       handleClose()
    }

    const  onCancelVideoEx=()=>{
        console.log('关闭调用到了')
        // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
        oWebControl.JS_HideWnd();
        // 销毁当前播放的视频
        oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
        // 断开与插件服务连接
        oWebControl.JS_Disconnect();
        oWebControl.JS_RequestInterface({funcName: 'uninit'})
        handleClose()
    }

    defineExpose({
        onCancelVideoEx
    })

    const emit = defineEmits(['closeVido'])

    function handleClose() {
        emit('closeVido')
    }

    onBeforeUnmount(() => {
        if (oWebControl.value != null) {
            // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
            oWebControl.JS_HideWnd();
            // 销毁当前播放的视频
            oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
            // 断开与插件服务连接
            oWebControl.JS_Disconnect();
        }
    })
    // 设置窗口控制回调
    function setCallbacks() {
        oWebControl.JS_SetWindowControlCallback({
            cbIntegrationCallBack: cbIntegrationCallBack
        });
    }
    // 推送消息
    function cbIntegrationCallBack(oData) {
        console.log(JSON.stringify(oData.responseMsg))
        if (JSON.stringify(oData.responseMsg) == '{"msg":{"cameraIndexCode":"89be6c491cf04a6aa3c42669e77d2127","result":816,"wndId":1},"type":2}')
    {
        onCancelVideo()
        handleClose()
    }
    }

    const  initCount=ref(0)

    const initPlugin = () => {
        oWebControl = new WebControl({
            szPluginContainer: "playWnd", // 指定容器id
            iServicePortStart: 15900, // 指定起止端口号，建议使用该值
            iServicePortEnd: 15900,
            szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
            cbConnectSuccess: () => {
                // 创建WebControl实例成功
                setCallbacks()
                oWebControl.JS_StartService("window", {
                        // WebControl实例创建成功后需要启动服务
                        // 值"./VideoPluginConnect.dll"写死
                        dllPath: "./VideoPluginConnect.dll",
                    })
                    .then(function () {
                            //JS_CreateWnd创建视频播放窗口，宽高可设定
                            oWebControl.JS_CreateWnd("playWnd", playWndWidth.value, playWndHeight.value)//这一部分很重要，两个参数为你盒子的宽高，这样是写死是防止组件加载之前出现白屏；bEmbed: true 防止窗口闪烁
                                .then(function () {
                                    init(()=>{
                                        nextTick(() => {
                                            console.log("开始加载视频")
                                            previewVideo(props.cameraIndexCode)
                                        },{immediate: true})

                                    });
                                });},
                        function () {
                            // 启动插件服务失败
                            console.log("启动插件服务失败！")
                            // 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看，具体实现步骤根据个人需求进行编写！！！！！！！！
                            // console.log(0);
                            oWebControl.value = null;
                            // // 程序未启动时执行error函数，采用wakeup来启动程序
                            window.WebControl.JS_WakeUp("VideoWebPlugin://");
                            initCount.value++;
                            if (initCount.value< 3) {
                                setTimeout(function () {
                                    initPlugin();
                                }, 3000);
                            } else {
                                initCount.value=0
                                $("#playWnd").html("<a href='http://10.83.68.109:8080/ghjgWebServiceTest/supervise/videoPlugins/VideoWebPlugin.exe'>插件启动失败，请检查插件是否安装</a>");
                            }
                        }
                    );
                setCallbacks()
            },
            // 创建WebControl实例失败
            cbConnectError: function () {
                console.log("创建WebControl实例失败！")
                // 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看，具体实现步骤根据个人需求进行编写！！！！！！！！
                // console.log(0);
                oWebControl.value = null;
                // // 程序未启动时执行error函数，采用wakeup来启动程序
                window.WebControl.JS_WakeUp("VideoWebPlugin://");
                initCount.value++;
                if (initCount.value< 3) {
                  setTimeout(function () {
                    initPlugin();
                  }, 3000);
                } else {
                    initCount.value=0
                    $("#playWnd").html("插件启动失败，请检查插件是否安装！");
                }
            },
            cbConnectClose: () => {
                console.log("创建WebControl异常断开！")
                // 异常断开：bNormalClose = false
                // JS_Disconnect正常断开：bNormalClose = true
                // console.log("cbConnectClose");
                oWebControl.value = null;
            },
        });
        // oWebControl.JS_CuttingPartWindow(500, 500, 500, 500);
    }
    // 初始化
    const init = (callback) => {
        getPubKey(() => {
            let appkey = objData.value.appkey;                   //综合安防管理平台提供的appkey，必填
            let secret = setEncrypt(objData.value.secret); //综合安防管理平台提供的secret，必填
            let ip = objData.value.ip;                           //综合安防管理平台IP地址，必填
            console.log(ip)
            let playMode = objData.value.playMode;                //初始播放模式：0-预览，1-回放
            let port = objData.value.port;                        //综合安防管理平台端口，若启用HTTPS协议，默认443
            let snapDir = "D:\\SnapDir";                        //抓图存储路径
            let videoDir = "D:\\VideoDir";                      //紧急录像或录像剪辑存储路径
            let layout = objData.value.layout;                   //playMode指定模式的布局
            let enableHTTPS = 1;                                //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
            let encryptedFields = "secret";                     //加密字段，默认加密领域为secret
            let showToolbar = 1;                                //是否显示工具栏，0-不显示，非0-显示
            let showSmart = 0;                                  //是否显示移动框线框，0-不显示，非0-显示
            oWebControl.JS_RequestInterface({
                    funcName: "init",
                    argument: JSON.stringify({
                        appkey: appkey,         //API网关提供的appkey
                        secret: secret,         //API网关提供的secret
                        ip: ip,                 //API网关IP地址
                        playMode: playMode,      //播放模式（决定显示预览还是回放界面）
                        port: port,             //端口
                        snapDir: snapDir,       //抓图存储路径
                        videoDir: videoDir,     //紧急录像或录像剪辑存储路径
                        layout: layout,         //布局
                        enableHTTPS: enableHTTPS,   //是否启用HTTPS协议
                        encryptedFields: encryptedFields, //加密字段
                        showToolbar: vidoBackShow.value?showToolbar:0, //是否显示工具栏
                        showSmart: showSmart,   //是否显示智能信息
                        toolBarButtonIDs: vidoBackShow.value?"2048,2049,4098":'',
                        reconnectDuration: 5,
                        reconnectTimes: 5,
                    }),
                })
                .then(function (oData) {
                    oWebControl.JS_Resize(playWndWidth.value, playWndHeight.value); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                    if (callback) {
                        callback();
                    }
                    // // 隐藏
                    // oWebControl.JS_HideWnd()
                });
        });
        console.log("初始化完成")
    }

    // RSA 加密
    let setEncrypt = (value) => {
        let encrypt = new window.JSEncrypt();
        encrypt.setPublicKey(pubKey);
        return encrypt.encrypt(value);
    }
    // 获取公钥
    const getPubKey = (callback) => {
        oWebControl
            .JS_RequestInterface({
                funcName: "getRSAPubKey",
                argument: JSON.stringify({
                    keyLength: 1024,
                }),
            })
            .then(function (oData) {
                if (oData.responseMsg.data) {
                    pubKey = oData.responseMsg.data;
                    console.log("获取公钥:"+pubKey)
                    callback();
                }
            });
    }
    // 调用这个函数可进行视频播放
    // 视频预览功能
    const previewVideo = (data) => {
        console.log("接收到视频ID：开始播放"+data)
        let cameraIndexCode = data;  // 获取输入的监控点编号值，必填
        let streamMode = 0;          // 主子码流标识：0-主码流，1-子码流
        let transMode = 1;           // 传输协议：0-UDP，1-TCP
        let gpuMode = 0;             // 是否启用GPU硬解，0-不启用，1-启用
        let wndId = -1;              // 播放窗口序号（在2x2以上布局下可指定播放窗口）
        oWebControl.JS_RequestInterface({
            funcName: "startPreview",
            argument: JSON.stringify({
                authUuid: "",
                ezvizDirect: 0,
                cameraIndexCode: cameraIndexCode, // 监控点编号
                streamMode: streamMode,                 // 主子码流标识
                transMode: transMode,                   // 传输协议
                gpuMode: gpuMode,                       // 是否开启GPU硬解
                wndId: wndId,                           // 可指定播放窗口
                cascade: 1
            }),
        }).then(function (oData) {
            cbIntegrationCallBack(oData)
        })
    }
</script>
<style lang="scss" scoped>
    .vidoBack{
        background-color: #000000;
        opacity: 0.9;
    }
    .vidoForBack {

        top: 0;
        left: 0;
        position: fixed;
        height: 100%;
        width: 100%;
        z-index: 1;

        .VideoForHk {
            position: fixed;
            top: 40%;
            left: 30%;
            transform: translateY(-50%);
            width: 38vw;
            height: 43vh;
            margin: auto;
            /*color: #021434;*/
            background: #000000;
            z-index: 600;

            .vido_footer {
                margin-top: 20px;
                width: 100%;
                background: #000000;
                span {

                    display: block;
                    margin: 0 auto;
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                    color: #FFFFFF;
                    background: url('@/assets/imgs/page_kkjk/bi-pics-close.png') no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
    }

</style>