/**
 * 该播放器支持H5stream、hls、rtmp
 * 需要引用以下JS
 *
 <!-- VUE依赖 -->
 <script src="https://cdn.makalu.cc/js/vue/vue.js"></script>
 <!-- 请求依赖 -->
 <script src="https://cdn.makalu.cc/js/axios/axios.min.js"></script>
 <!-- rtmp 支持依赖 -->
 <script src="https://cdn.makalu.cc/js/videojs/5.19/video.min.js"></script>
 <!-- hls 支持依赖 -->
 <script src="https://cdn.makalu.cc/js/hls/hls.min.js"></script>
 <!-- h5steam 支持依赖 -->
 <script src="https://cdn.makalu.cc/js/platform/1.3.5/platform.js"></script>
 <script src="https://cdn.makalu.cc/js/h5splayer/h5splayer.js"></script>
 <script src="https://cdn.makalu.cc/js/h5splayer/h5splayerhelper.js"></script>

 * 使用：
 * <mkl-video-play></mkl-video-play>
 * param：
 *  token: 视频token
 *  type: 类型h5s/hls/rtmp
 *  width: 播放界面宽，当宽度小于600时不启用云台控制
 *  height: 播放界面高
 *  outTime: 超时检测时间（单位：秒），用于hls和rtmpm默认是10秒，
 */

Vue.component("mkl-video-play", {
    template: `
          <div :style="playDivCss">
              <video v-if="type != 'hk' && type != 'hzhk' && !exception" ref="playDiv"
                    style="height: 100%;width: 100%"
                    @click="play"
                    controls 
                    autoplay 
                    muted
                    webkit-playsinline
                    playsinline></video>
                    
              <div v-if="(type == 'hk' || type == 'hzhk') && !exception"  id="HKPlayWindowControl" style="height: 100%;width: 100%;text-align: center;background-color: #000000;color: #FFFFFF"">
                    <div v-show="restartInit"><br/><br/><br/>插件未启动，正在尝试启动，请稍候...</div>
                    <div v-show="initError">
			<br/><br/><br/>
                        <p>插件启动失败，请检查插件是否安装！</p>
                        <p>该插件只能用于window系统！</p>
                        <el-link type="primary" href="https://file-other.makalu.cc/%E6%8F%92%E4%BB%B6/VideoWebPlugin.exe">
                            点击这里下载播放组件
                        </el-link>
                        <p>插件安装成功后刷新当前页面！</p>
                    </div>
              </div>
       <!--       <video v-else-if="type === 'hls'  && !exception" ref="playDiv"
                     @click="play"
                     style="height: 100%;width: 100%"
                     autoplay
                     muted
                     controls="true"></video>
              <video v-else-if="type === 'rtmp' && !exception" ref="playDiv"
                     style="height: 100%;width: 100%"
                     class="video-js vjs-default-skin vjs-big-play-centered" controls
                     preload="auto"
                     @click="play"
                     muted
                     autoplay="autoplay"
                     data-setup='{}'>
              </video>-->
    
              <div v-if="exception" :style="exStyle">
                <img style="width: 100%;height: 100%" src="http://file-other.makalu.cc/icon/videoEx.jpg"/>
              </div>
    
              <div style="
                position: absolute;
                right: 0px;
                top: 10px;
                background-color: black;
                color: azure;
                padding: 10px;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
                font-size: 12px" v-if="ptz">
                <span  @click="openPTZ = !openPTZ" style="cursor: pointer;margin-right: 10px">云台控制</span> 
                <img style="width: 15px;height: 15px;cursor: pointer" @click="fullScreenFun" 
                :src="'http://file-other.makalu.cc/icon' + (fullScreenShow ? '/no-full-screen-icon.png':'/full-screen-icon.png')"/>
              </div>
    
              <div v-show="openPTZ" style="position: absolute;bottom: 0px;right: 0px;">
                <div :style="PTZDiv">
                  <div :style="PTZTop" @mousedown="tripodHandle('UP')" @mouseup="stop"></div>
                  <div :style="PTZBottom" @mousedown="tripodHandle('DOWN')" @mouseup="stop"></div>
                  <div :style="PTZLeft" @mousedown="tripodHandle('LEFT')" @mouseup="stop"></div>
                  <div :style="PTZRight" @mousedown="tripodHandle('RIGHT')" @mouseup="stop"></div>
                </div>
                <br/>
                <div>
                  <button :style="VIBtnCss" @mousedown="tripodHandle('zoomout')" @mouseup="stop">-
                  </button>
                  <button :style="zoomViewCss"> 焦 距</button>
                  <button :style="VIBtnCss" @mousedown="tripodHandle('zoomin')" @mouseup="stop">+</button>
                </div>
                <br/>
                <!--            <div>
                              <button :style="VIBtnCss" onclick="tripodHandle('ZOOM_OUT')">-
                              </button>
                              <button :style="zoomViewCss"> 微 距</button>
                              <button :style="VIBtnCss" onclick="tripodHandle('ZOOM_IN')">+</button>
                            </div>-->
              </div>
              <mkl-video-play 
              v-if="fullScreen && fullScreenShow" 
              @fullScreenFun="fullScreenCloseFun" 
              style="position: fixed;top:0;left: 0;z-index: 998" 
              :token="token" :type="type" 
              :width="fullScreenWidth" 
              :height="fullScreenHeight" :ptz="true" :fullScreen="false"></mkl-video-play>
          </div>
          
        `,
    props: {
        //视频token
        "token": {
            type: String,
            default: ""
        },
        //播放器类型
        "type": {
            type: String,
            default: "hls"
        },
        //播放器宽
        "width": {
            type: Number / String,
            default: 320
        },
        //播放器高
        "height": {
            type: Number / String,
            default: 240
        },
        //超时时间
        "outTime": {
            type: Number,
            default: 10
        },
        //是否显示云台控制
        "ptz": {
            type: Boolean,
            default: false
        },
        //是否启用全屏
        "fullScreen": {
            type: Boolean,
            default: true
        },
        //是否启用自动重连
        "restart": {
            type: Boolean,
            default: true
        },
        "openOrClose": {
            type: String,
            default: "open"
        }
    },
    data() {
        return {
            isplay: true,
            videoHost: "http://video.makalu.cc",
            h5s: "",
            hls: new Hls(),
            hlsvideo: undefined,
            rtmpVideo: "",
            exception: false,
            exMsg: "数据加载异常，请刷新重试...",
            openPTZ: false,
            fullScreenShow: false,
            fullScreenWidth: "0px",
            fullScreenHeight: "0px",
            timeoutDetection: undefined,
            timeoutDetectionInit: undefined,
            initCount: 0,
            pubKey: "",
            restartInit: false,
            initError: false,
            oWebControl: undefined
        }
    },
    methods: {
        clearContext() {
            try{
                if (this.oWebControl && this.oWebControl != null) {
                    this.oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
                    this.oWebControl.JS_Disconnect().then(function () {
                            // 断开与插件服务连接成功
                        },
                        function () {
                            // 断开与插件服务连接失败
                        }
                    );
                }
            }catch(e){console.log(e)}
            if (this.$refs.playDiv) {
                this.$refs.playDiv.removeAttribute("poster")
            }
            try {
                if (this.hls) {
                    this.hls.destroy()
                }
            } catch (e) {
                console.log(e);
            }
            try {
                if (this.h5s) {
                    H5sPlayerWS.prototype.disconnect
                    this.h5s.disconnect()
                }
            } catch (e) {
                console.log(e)
            }
            this.hls = new Hls()
        },
        initH5sPlay() {
            let that = this
            let host = window.location.protocol == "https:" ? "47.106.234.91:8443" :"47.106.234.91:8080"
            axios.post(that.videoHost + "/mkl/api/h5sLogin", {}).then(res => {
                let conf = {
                    videodom: that.$refs.playDiv,
                    protocol: window.location.protocol,
                    host: "h5s.makalu.cc",
                    rootpath: '/',
                    token: that.token,
                    hlsver: 'v1',
                    session: res.data
                }
                that.$refs.playDiv.setAttribute("autoplay", "autoplay")
                that.h5s = H5sPlayerCreate(conf)
                that.h5s.connect()
                that.timeoutDetectionFun()
            })
        },
        initHlsPlay() {
            this.hlsvideo = this.$refs.playDiv;
            this.hls.destroy()
            this.hls = new Hls()
            let that = this
            axios.post(this.videoHost + "/ca/isc/info/getPlay", {
                protocol: "hls",
                playAdder: that.token
            }).then(res => {
                if (res.data.code != "200") {
                    that.exception = true
                    setTimeout(function () {
                        that.init()
                    }, 2000)
                } else {
                    that.hls.loadSource(eval("(" + res.data.data + ")").url);
                    that.hls.attachMedia(that.hlsvideo);
                    that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
                        that.hlsvideo.play();
                    })
                }
                that.timeoutDetectionFun()
            }).catch(err => {
                that.exception = true
            })
        },
        initRtmpPlay() {
            let that = this
            let video = this.$refs.playDiv
            axios.post(this.videoHost + "/ca/isc/info/getPlay", {
                protocol: "rtmp",
                playAdder: that.token
            }).then(res => {
                if (res.data.code != "200") {
                    that.exception = true
                    setTimeout(function () {
                        that.init()
                    }, 2000)
                } else {
                    const videoParam = [{
                        type: "video/rtmp",
                        src: eval("(" + res.data.data + ")").url
                    }];
                    that.rtmpVideo = videojs(video)
                    that.rtmpVideo.ready(function () {
                        that.rtmpVideo.src(videoParam)
                        that.rtmpVideo.load()
                        that.rtmpVideo.play()
                    })
                    that.timeoutDetectionFun()
                }
            }).catch(err => {
                that.exception = true
            })
        },
        play() {
            if (this.type === "h5s") {
                if (this.isplay) {
                    this.h5s.disconnect()
                } else {
                    this.h5s.connect();
                }
                this.isplay = !this.isplay
            }
            if (this.type === "hls") {
                if (this.isplay) {
                    this.hlsvideo.stop()
                } else {
                    this.hlsvideo.play()
                }
                this.isplay = !this.isplay
            }
            if (this.type === "rtmp") {
                if (this.isplay) {
                    this.rtmpVideo.pause()
                } else {
                    this.rtmpVideo.play()
                }
                this.isplay = !this.isplay
            }
        },
        guid() {
            function S4() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            }

            return (S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4());
        },
        settingVideoHost() {
            this.videoHost = window.location.protocol + "//video.makalu.cc"
        },
        init() {
            let that = this
            this.exception = false
            this.clearContext()
            this.$nextTick(function () {
                switch (that.type) {
                    case "h5s":
                        that.initH5sPlay()
                        break
                    case "hls":
                        that.initHlsPlay()
                        break
                    case "rtmp":
                        that.initRtmpPlay()
                        break
                    case "hk":
                        that.initPlugin("24476525","hrFzLaMbo60QDvwazqdH","8.129.144.255",1443);
                        that.windowInitFun();
                        break
                    case "hzhk":
                        that.initPlugin("21332599","772SPtFNM1BHMyKHq4xh","39.101.132.124",443);
                        that.windowInitFun();
                        break
                }
            })

        },
        tripodHandle(order) {
            axios.post(this.videoHost + "/mkl/api/moveCamera", {
                token: this.token,
                action: this.type === "h5s" ? order.toLowerCase() : order,
                h5s: this.type == "h5s"
            })
            console.log("按下")
        },
        stop() {
            axios.post(this.videoHost + "/mkl/api/moveCamera", {
                token: this.token,
                action: "stop",
                h5s: this.type == "h5s"
            })
            console.log("松开")
        },
        fullScreenCss() {
            this.fullScreenWidth = (document.body.scrollWidth - 10) + "px"
            this.fullScreenHeight = (document.body.scrollHeight - 10) + "px"
        },
        fullScreenFun() {
            this.fullScreenShow = true
            this.$emit("fullScreenFun")
        },
        fullScreenCloseFun() {
            this.fullScreenShow = false
        },
        timeoutDetectionFun() {
            let that = this
            //超时时间检测是否正常获取到数据流默认为5秒
            this.timeoutDetection = setTimeout(function () {
                if (parseInt(that.hlsvideo.currentTime.toFixed(1)) == 0) {
                    that.hls.destroy()
                    that.exception = true
                    if (that.restart) {
                        that.timeoutDetectionInit = setTimeout(function () {
                            that.init()
                        }, 2000)
                    }
                }
            }, this.outTime * 1000)
        },
        //海康插件开始
        // 创建播放实例
        initPlugin(appkey,secret,ip,port) {
            let that = this
            that.oWebControl = new WebControl({
                szPluginContainer: "uuid",                       // 指定容器id
                iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
                iServicePortEnd: 15909,
                szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid
                cbConnectSuccess: function () {                     // 创建WebControl实例成功
                    that.oWebControl.JS_StartService("window", {         // WebControl实例创建成功后需要启动服务
                        dllPath: "./VideoPluginConnect.dll"         // 值"./VideoPluginConnect.dll"写死
                    }).then(function () {                           // 启动插件服务成功
                        that.oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
                            cbIntegrationCallBack: that.cbIntegrationCallBack
                        });

                        that.oWebControl.JS_CreateWnd("HKPlayWindowControl", Number(that.width.replaceAll("px","")), Number(that.height.replaceAll("px",""))).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
                            that.initHKPlay(appkey,secret,ip,port);  // 创建播放实例成功后初始化
                        });
                    }, function () { // 启动插件服务失败
                    });
                },
                cbConnectError: function () { // 创建WebControl实例失败
                    this.oWebControl = null;
                    that.restartInit = true
                    WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
                    that.initCount++;
                    if (that.initCount < 3) {
                        setTimeout(function () {
                            that.initPlugin(appkey,secret,ip,port);
                        }, 3000)
                    } else {
                        that.restartInit = false
                        that.initError = true
                        that.initCount = 0
                    }
                },
                cbConnectClose: function (bNormalClose) {
                    // 异常断开：bNormalClose = false
                    // JS_Disconnect正常断开：bNormalClose = true
                    console.log("cbConnectClose");
                    this.oWebControl = null;
                }
            });
        },
        // 设置窗口控制回调
        setCallbacks() {
            let that = this
            that.oWebControl.JS_SetWindowControlCallback({
                cbIntegrationCallBack: that.cbIntegrationCallBack
            });
        },
        // 推送消息
        cbIntegrationCallBack(oData) {
            console.log(JSON.stringify(oData.responseMsg));;
        },
        //初始化
        initHKPlay(Appkey,Secret,Ip,Port) {
            let that = this
            this.getPubKey(function () {

                ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
                let appkey = Appkey;                           //综合安防管理平台提供的appkey，必填
                let secret = that.setEncrypt(Secret);   //综合安防管理平台提供的secret，必填
                let ip = Ip;                           //综合安防管理平台IP地址，必填
                let playMode = 0;                                  //初始播放模式：0-预览，1-回放
                let port = Port;                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
                let snapDir = "D:\\SnapDir";                       //抓图存储路径
                let videoDir = "D:\\VideoDir";                     //紧急录像或录像剪辑存储路径
                let layout = "1x1";                                //playMode指定模式的布局
                let enableHTTPS = 1;                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
                let encryptedFields = 'secret';					   //加密字段，默认加密领域为secret
                let showToolbar = 1;                               //是否显示工具栏，0-不显示，非0-显示
                let showSmart = 1;                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
                let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";  //自定义工具条按钮
                let toolBarButtonIDs = "4098";
                ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

                that.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: showToolbar,                  //是否显示工具栏
                        showSmart: showSmart,                      //是否显示智能信息
                        buttonIDs: buttonIDs,                       //自定义工具条按钮
                        toolBarButtonIDs:toolBarButtonIDs
                    })
                }).then(function (oData) {
                    that.oWebControl.JS_Resize(Number(that.width.replaceAll("px","")), Number(that.height.replaceAll("px","")));  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                    that.startPreviewFun()
                });
            });
        },
        //获取公钥
        getPubKey(callback) {
            let that = this
            that.oWebControl.JS_RequestInterface({
                funcName: "getRSAPubKey",
                argument: JSON.stringify({
                    keyLength: 1024
                })
            }).then(function (oData) {
                console.log(oData);
                if (oData.responseMsg.data) {
                    that.pubKey = oData.responseMsg.data;
                    callback()
                }
            })
        },
        //RSA加密
        setEncrypt(value) {
            let encrypt = new JSEncrypt();
            encrypt.setPublicKey(this.pubKey);
            return encrypt.encrypt(value);
        },
        // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
        setWndCover() {
            let that = this
            let iWidth = $(window).width();
            let iHeight = $(window).height();
            let oDivRect = document.getElementById("HKPlayWindowControl").getBoundingClientRect();

            let iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
            let iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
            let iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
            let iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;

            iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft;
            iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop;
            iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;
            iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom;

            that.oWebControl.JS_RepairPartWindow(0, 0, 1001, 600);    // 多1个像素点防止还原后边界缺失一个像素条
            if (iCoverLeft != 0) {
                that.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
            }
            if (iCoverTop != 0) {
                that.oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop);    // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
            }
            if (iCoverRight != 0) {
                that.oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600);
            }
            if (iCoverBottom != 0) {
                that.oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom);
            }
        },
        windowInitFun() {
            let that = this
            // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
            $(window).resize(function () {
                if (that.oWebControl != null) {
                    that.oWebControl.JS_Resize(Number(that.width.replaceAll("px","")), Number(that.height.replaceAll("px","")));
                    that.setWndCover();
                }
            });

            // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
            $(window).scroll(function () {
                if (that.oWebControl != null) {
                    that.oWebControl.JS_Resize(Number(that.width.replaceAll("px","")), Number(that.height.replaceAll("px","")));
                    that.setWndCover();
                }
            });

            // 标签关闭
            window.onunload = function () {
                if (that.oWebControl != null) {
                    that.oWebControl.JS_HideWnd();   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
                    that.oWebControl.JS_Disconnect().then(function () {  // 断开与插件服务连接成功
                        },
                        function () {  // 断开与插件服务连接失败
                        });
                }
            }

        },
        //视频预览功能
        startPreviewFun() {
            let that = this
            let streamMode = 0;                                     //主子码流标识：0-主码流，1-子码流
            let transMode = 1;                                      //传输协议：0-UDP，1-TCP
            let gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用
            let wndId = -1;                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）
            let cameraIndexCode = this.token
            cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
            cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

            that.oWebControl.JS_RequestInterface({
                funcName: "startPreview",
                argument: JSON.stringify({
                    cameraIndexCode: cameraIndexCode,                //监控点编号
                    streamMode: streamMode,                         //主子码流标识
                    transMode: transMode,                           //传输协议
                    gpuMode: gpuMode,                               //是否开启GPU硬解
                    wndId: wndId                                     //可指定播放窗口
                })
            })
        },
        //停止全部预览
        stopAllPreviewFun() {
            this.oWebControl.JS_RequestInterface({
                funcName: "stopAllPreview"
            });
        },
        closeHk(){
            this.oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
            this.oWebControl.JS_Disconnect().then(function(){}, function() {});
        }
    },
    mounted() {
        console.log(this.openOrClose)

    },
    computed: {
        playDivCss() {
            return {
                width: (this.width + "").replace("px", "") + "px",
                height: (this.height + "").replace("px", "") + "px",
                position: "relative"
            }
        },
        exStyle() {
            return {
                textAlign: "center",
                width: (this.width + "").replace("px", "") + "px",
                height: (this.height + "").replace("px", "") + "px"
            }
        },
        PTZDiv() {
            let W = parseInt((this.width + "").replace("px", ""))
            let H = parseInt((this.height + "").replace("px", ""))
            if (W < 400) {
                W = "100px"
                H = "100px"
            } else {
                W = "150px"
                H = "150px"
            }
            return {
                backgroundImage: "url('http://video.makalu.cc/img/jt.png')",
                width: W,
                height: H,
                backgroundSize: "100%",
                position: "relative"
            }
        },
        PTZTop() {
            return {
                width: "33%",
                height: "25%",
                position: "absolute",
                top: "0px",
                left: "33%",
                cursor: "pointer"
            }
        },
        PTZBottom() {
            return {
                width: "33%",
                height: "25%",
                position: "absolute",
                bottom: "0px",
                left: "33%",
                cursor: "pointer"
            }
        },
        PTZLeft() {
            return {
                width: "25%",
                height: "33%",
                position: "absolute",
                top: "33%",
                left: "0px",
                cursor: "pointer"
            }
        },
        PTZRight() {
            return {
                width: "25%",
                height: "33%",
                position: "absolute",
                top: "33%",
                right: "0px",
                cursor: "pointer"
            }
        },
        VIBtnCss() {
            return {
                width: "30px",
                height: "30px",
                background: "#38314b",
                border: "1px solid #38314b",
                fontSize: "20px",
                outline: "0",
                color: "#FFFFFF"
            }
        },
        zoomViewCss() {
            return {
                width: "75px",
                height: "30px",
                color: "#dddddd",
                background: "rgba(65, 63, 70, 0.5)",
                textAlign: "center",
                border: "0px solid rgba(65, 63, 70, 0.5)",
                outline: "0",
                fontSize: "14px"
            }
        }
    },
    watch: {
        token: function (now, old) {
            console.log(now)
            if (this.timeoutDetection) {
                clearTimeout(this.timeoutDetection)
                clearTimeout(this.timeoutDetectionInit)
            }
            if (!now) {
                if (this.oWebControl != null) {
                    this.oWebControl.JS_HideWnd();   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
                    this.oWebControl.JS_Disconnect().then(function () {  // 断开与插件服务连接成功
                        },
                        function () {  // 断开与插件服务连接失败
                        });
                }
            }else{
                this.init()
            }
        },
        openOrClose:function (n,o) {
            console.log(n)
                if(n == 'close'){
                    this.closeHk()
                }else{
                    if (this.type != "hk") {
                        this.settingVideoHost()
                        this.init()
                        this.fullScreenCss()
                    } else {
                        this.initPlugin();
                        this.windowInitFun();
                    }
                }
            }

    }
})