<template>
    <div>
        <div class="left">
            <div id="divPlugin" class="plugin"></div>
            <fieldset class="login">
                <legend>登录</legend>
                <el-button
                    icon="el-icon-caret-top"
                    @click="mouseDownPTZControl(1);"
                    v-on:mouseup="mouseUpPTZControl()"
                    type="primary"
                    plain
                >向上</el-button>
                <el-button icon="el-icon-caret-bottom" type="primary" plain></el-button>
                <el-button icon="el-icon-caret-left" type="primary" plain></el-button>
                <el-button icon="el-icon-caret-right" type="primary" plain></el-button>
                <el-button icon="el-icon-monitor" @click="clickFullScreen()" type="primary" plain>全屏</el-button>
                <el-button
                    icon="el-icon-microphone"
                    @click="clickOpenSound()"
                    type="primary"
                    plain
                >打开声音</el-button>
                <el-button
                    icon="el-icon-mic"
                    @click="clickStartVoiceTalk()"
                    type="primary"
                    plain
                >打开对讲</el-button>
            </fieldset>
            <fieldset class="ipchannel">
                <legend>数字通道</legend>
                <table width="100%" cellpadding="0" cellspacing="3" border="0">
                    <tr>
                        <td>
                            <input
                                type="button"
                                class="btn"
                                value="获取数字通道列表"
                                onclick="clickGetDigitalChannelInfo();"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="digitaltdiv">
                                <table
                                    id="digitalchannellist"
                                    class="digitalchannellist"
                                    cellpadding="0"
                                    cellspacing="0"
                                    border="0"
                                ></table>
                            </div>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <fieldset class="localconfig">
                <legend>本地配置</legend>
                <table cellpadding="0" cellspacing="3" border="0">
                    <tr>
                        <td class="tt">播放性能</td>
                        <td>
                            <select id="netsPreach" name="netsPreach" class="sel">
                                <option value="0">最短延时</option>
                                <option value="1">实时性好</option>
                                <option value="2">均衡</option>
                                <option value="3">流畅性好</option>
                            </select>
                        </td>
                        <td class="tt">图像尺寸</td>
                        <td>
                            <select id="wndSize" name="wndSize" class="sel">
                                <option value="0">充满</option>
                                <option value="1">4:3</option>
                                <option value="2">16:9</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">规则信息</td>
                        <td>
                            <select id="rulesInfo" name="rulesInfo" class="sel">
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </td>
                        <td class="tt">抓图文件格式</td>
                        <td>
                            <select id="captureFileFormat" name="captureFileFormat" class="sel">
                                <option value="0">JPEG</option>
                                <option value="1">BMP</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">录像文件打包大小</td>
                        <td>
                            <select id="packSize" name="packSize" class="sel">
                                <option value="0">256M</option>
                                <option value="1">512M</option>
                                <option value="2">1G</option>
                            </select>
                        </td>
                        <td class="tt">协议类型</td>
                        <td>
                            <select id="protocolType" name="protocolType" class="sel">
                                <option value="0">TCP</option>
                                <option value="2">UDP</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">录像文件保存路径</td>
                        <td colspan="3">
                            <input id="recordPath" type="text" class="txt">&nbsp;
                            <input
                                type="button"
                                class="btn"
                                value="浏览"
                                onclick="clickOpenFileDlg('recordPath', 0);"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">回放下载保存路径</td>
                        <td colspan="3">
                            <input id="downloadPath" type="text" class="txt">&nbsp;
                            <input
                                type="button"
                                class="btn"
                                value="浏览"
                                onclick="clickOpenFileDlg('downloadPath', 0);"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">预览抓图保存路径</td>
                        <td colspan="3">
                            <input id="previewPicPath" type="text" class="txt">&nbsp;
                            <input
                                type="button"
                                class="btn"
                                value="浏览"
                                onclick="clickOpenFileDlg('previewPicPath', 0);"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">回放抓图保存路径</td>
                        <td colspan="3">
                            <input id="playbackPicPath" type="text" class="txt">&nbsp;
                            <input
                                type="button"
                                class="btn"
                                value="浏览"
                                onclick="clickOpenFileDlg('playbackPicPath', 0);"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">回放剪辑保存路径</td>
                        <td colspan="3">
                            <input id="playbackFilePath" type="text" class="txt">&nbsp;
                            <input
                                type="button"
                                class="btn"
                                value="浏览"
                                onclick="clickOpenFileDlg('playbackFilePath', 0);"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">设备抓图保存路径</td>
                        <td colspan="3">
                            <input id="devicePicPath" type="text" class="txt">&nbsp;
                            <input
                                type="button"
                                class="btn"
                                value="浏览"
                                onclick="clickOpenFileDlg('devicePicPath', 0);"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <input
                                type="button"
                                class="btn"
                                value="获取"
                                onclick="clickGetLocalCfg();"
                            >&nbsp;
                            <input
                                type="button"
                                class="btn"
                                value="设置"
                                onclick="clickSetLocalCfg();"
                            >
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
        <div class="left">
            <fieldset class="preview">
                <legend>预览</legend>
                <table cellpadding="0" cellspacing="3" border="0">
                    <tr>
                        <td class="tt">码流类型</td>
                        <td>
                            <select id="streamtype" class="sel">
                                <option value="1">主码流</option>
                                <option value="2">子码流</option>
                                <option value="3">第三码流</option>
                                <option value="4">转码码流</option>
                            </select>
                        </td>
                        <td>
                            <input
                                type="button"
                                class="btn"
                                value="开始预览"
                                onclick="clickStartRealPlay();"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="停止预览"
                                @click="clickStopRealPlay();"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">音量</td>
                        <td>
                            <input type="text" id="volume" class="txt" value="50" maxlength="3">&nbsp;
                            <input
                                type="button"
                                class="btn"
                                value="设置"
                                onclick="clickSetVolume();"
                            >（范围：0~100）
                        </td>
                        <td>
                            <input
                                type="button"
                                class="btn"
                                value="打开声音"
                                @click="clickOpenSound();"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="关闭声音"
                                onclick="clickCloseSound();"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">对讲通道</td>
                        <td>
                            <select id="audiochannels" class="sel"></select>
                            <input
                                type="button"
                                class="btn"
                                value="获取通道"
                                onclick="clickGetAudioInfo();"
                            >
                        </td>
                        <td>
                            <input
                                type="button"
                                class="btn"
                                value="开始对讲"
                                onclick="clickStartVoiceTalk();"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="停止对讲"
                                onclick="clickStopVoiceTalk();"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <input
                                type="button"
                                class="btn"
                                value="抓图"
                                onclick="clickCapturePic();"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="开始录像"
                                onclick="clickStartRecord('realplay');"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="停止录像"
                                onclick="clickStopRecord('realplay');"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <input
                                type="button"
                                class="btn2"
                                value="启用电子放大"
                                onclick="clickEnableEZoom();"
                            >
                            <input
                                type="button"
                                class="btn2"
                                value="禁用电子放大"
                                onclick="clickDisableEZoom();"
                            >
                            <input
                                type="button"
                                class="btn2"
                                value="启用3D放大"
                                onclick="clickEnable3DZoom();"
                            >
                            <input
                                type="button"
                                class="btn2"
                                value="禁用3D放大"
                                onclick="clickDisable3DZoom();"
                            >
                            <input type="button" class="btn" value="全屏" @click="clickFullScreen();">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            分辨率：
                            <input id="resolutionWidth" type="text" class="txt">x
                            <input id="resolutionHeight" type="text" class="txt">
                            <input
                                type="button"
                                class="btn"
                                value="设备抓图"
                                onclick="clickDeviceCapturePic();"
                            >
                        </td>
                    </tr>
                </table>
            </fieldset>
            <fieldset class="draw">
                <legend>绘图</legend>
                <table cellpadding="0" cellspacing="3" border="0">
                    <tr>
                        <td>
                            <input
                                type="button"
                                class="btn"
                                value="启用绘制"
                                onclick="clickEnableDraw();"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="禁用绘制"
                                onclick="clickDisableDraw();"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td>
                            图形ID：
                            <input id="snapId" type="text" class="txt">
                            名称：
                            <input
                                id="snapName"
                                type="text"
                                class="txt"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input
                                type="button"
                                class="btn"
                                value="添加图形"
                                onclick="clickAddSnapPolygon()"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="删除图形"
                                onclick="clickDelSnapPolygon()"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="编辑图形"
                                onclick="clickEditSnapPolygon()"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="停止编辑"
                                onclick="clickStopSnapPolygon()"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="获取图形"
                                onclick="clickGetSnapPolygon()"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="设置图形"
                                onclick="clickSetSnapPolygon()"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input
                                type="button"
                                class="btn"
                                value="清空图形"
                                onclick="clickDelAllSnapPolygon()"
                            >
                        </td>
                    </tr>
                </table>
            </fieldset>
            <fieldset class="ptz">
                <legend>云台控制</legend>
                <table cellpadding="0" cellspacing="3" border="0" class="left">
                    <tr>
                        <td>
                            <input
                                type="button"
                                class="btn"
                                value="左上"
                                onmousedown="mouseDownPTZControl(5);"
                                onmouseup="mouseUpPTZControl();"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="上"
                                onmousedown="mouseDownPTZControl(1);"
                                onmouseup="mouseUpPTZControl();"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="右上"
                                onmousedown="mouseDownPTZControl(7);"
                                onmouseup="mouseUpPTZControl();"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input
                                type="button"
                                class="btn"
                                value="左"
                                onmousedown="mouseDownPTZControl(3);"
                                onmouseup="mouseUpPTZControl();"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="自动"
                                onclick="mouseDownPTZControl(9);"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="右"
                                onmousedown="mouseDownPTZControl(4);"
                                onmouseup="mouseUpPTZControl();"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input
                                type="button"
                                class="btn"
                                value="左下"
                                onmousedown="mouseDownPTZControl(6);"
                                onmouseup="mouseUpPTZControl();"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="下"
                                onmousedown="mouseDownPTZControl(2);"
                                onmouseup="mouseUpPTZControl();"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="右下"
                                onmousedown="mouseDownPTZControl(8);"
                                onmouseup="mouseUpPTZControl();"
                            >
                        </td>
                    </tr>
                </table>
                <table cellpadding="0" cellspacing="3" border="0" class="left">
                    <tr>
                        <td class="tt">云台速度</td>
                        <td>
                            <select id="ptzspeed" class="sel">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4" selected>4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">预置点号</td>
                        <td>
                            <input id="preset" type="text" class="txt" value="1">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="button" class="btn" value="设置" onclick="clickSetPreset();">
                            <input type="button" class="btn" value="调用" onclick="clickGoPreset();">
                        </td>
                    </tr>
                </table>
                <table cellpadding="0" cellspacing="3" border="0" class="left">
                    <tr>
                        <td class="tt">
                            <input
                                type="button"
                                class="btn2"
                                value="变倍+"
                                onmousedown="PTZZoomIn()"
                                onmouseup="PTZZoomStop()"
                            >
                        </td>
                        <td>
                            <input
                                type="button"
                                class="btn2"
                                value="变倍-"
                                onmousedown="PTZZoomout()"
                                onmouseup="PTZZoomStop()"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">
                            <input
                                type="button"
                                class="btn2"
                                value="变焦+"
                                onmousedown="PTZFocusIn()"
                                onmouseup="PTZFoucusStop()"
                            >
                        </td>
                        <td>
                            <input
                                type="button"
                                class="btn2"
                                value="变焦-"
                                onmousedown="PTZFoucusOut()"
                                onmouseup="PTZFoucusStop()"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">
                            <input
                                type="button"
                                class="btn2"
                                value="光圈+"
                                onmousedown="PTZIrisIn()"
                                onmouseup="PTZIrisStop()"
                            >
                        </td>
                        <td>
                            <input
                                type="button"
                                class="btn2"
                                value="光圈-"
                                onmousedown="PTZIrisOut()"
                                onmouseup="PTZIrisStop()"
                            >
                        </td>
                    </tr>
                </table>
            </fieldset>
            <fieldset class="playback">
                <legend>回放</legend>
                <table width="100%" cellpadding="0" cellspacing="3" border="0">
                    <tr>
                        <td class="tt">码流类型</td>
                        <td>
                            <select id="record_streamtype" class="sel">
                                <option value="1">主码流</option>
                                <option value="2">子码流</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">开始时间</td>
                        <td>
                            <input
                                id="starttime"
                                type="text"
                                class="txt"
                                value="2013-12-10 00:00:00"
                            >（时间格式：2013-11-11 12:34:56）
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">结束时间</td>
                        <td>
                            <input id="endtime" type="text" class="txt" value="2013-12-11 23:59:59">
                            <input
                                type="button"
                                class="btn"
                                value="搜索"
                                onclick="clickRecordSearch(0);"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div id="searchdiv" class="searchdiv">
                                <table
                                    id="searchlist"
                                    class="searchlist"
                                    cellpadding="0"
                                    cellspacing="0"
                                    border="0"
                                ></table>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input
                                type="button"
                                class="btn2"
                                value="开始回放"
                                onclick="clickStartPlayback();"
                            >
                            <input
                                type="button"
                                class="btn2"
                                value="停止回放"
                                onclick="clickStopPlayback();"
                            >
                            <input
                                type="button"
                                class="btn"
                                value="倒放"
                                onclick="clickReversePlayback();"
                            >
                            <input type="button" class="btn" value="单帧" onclick="clickFrame();">
                            <input id="transstream" type="checkbox" class="vtop">&nbsp;启用转码码流
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="button" class="btn" value="暂停" onclick="clickPause();">
                            <input type="button" class="btn" value="恢复" onclick="clickResume();">
                            <input type="button" class="btn" value="慢放" onclick="clickPlaySlow();">
                            <input type="button" class="btn" value="快放" onclick="clickPlayFast();">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input
                                type="button"
                                class="btn"
                                value="抓图"
                                onclick="clickCapturePic();"
                            >
                            <input
                                type="button"
                                class="btn2"
                                value="开始剪辑"
                                onclick="clickStartRecord('playback');"
                            >
                            <input
                                type="button"
                                class="btn2"
                                value="停止剪辑"
                                onclick="clickStopRecord('playback');"
                            >
                            <input
                                type="button"
                                class="btn2"
                                value="OSD时间"
                                onclick="clickGetOSDTime();"
                            >&nbsp;
                            <input id="osdtime" type="text" class="txt" readonly>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <fieldset class="maintain">
                <legend>系统维护</legend>
                <table width="100%" cellpadding="0" cellspacing="3" border="0">
                    <tr>
                        <td>
                            <input
                                type="button"
                                class="btn2"
                                value="导出配置文件"
                                onclick="clickExportDeviceConfig();"
                            >
                            <input
                                type="button"
                                class="btn2"
                                value="检查插件版本"
                                onclick="clickCheckPluginVersion();"
                            >
                            <input
                                type="button"
                                class="btn2"
                                value="远程配置库"
                                onclick="clickRemoteConfig();"
                            >
                            <input
                                type="button"
                                class="btn2"
                                value="恢复默认参数"
                                onclick="clickRestoreDefault();"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="configFile" type="text" class="txt">&nbsp;
                            <input
                                type="button"
                                class="btn"
                                value="浏览"
                                onclick="clickOpenFileDlg('configFile', 1);"
                            >&nbsp;
                            <input
                                type="button"
                                class="btn2"
                                value="导入配置文件"
                                onclick="clickImportDeviceConfig();"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="upgradeFile" type="text" class="txt">&nbsp;
                            <input
                                type="button"
                                class="btn"
                                value="浏览"
                                onclick="clickOpenFileDlg('upgradeFile', 1);"
                            >&nbsp;
                            <input
                                type="button"
                                class="btn2"
                                value="升级"
                                onclick="clickStartUpgrade();"
                            >
                        </td>
                    </tr>
                </table>
            </fieldset>
            <fieldset class="ipparse">
                <legend>设备IP解析</legend>
                <table cellpadding="0" cellspacing="3" border="0">
                    <tr>
                        <td class="tt">模式</td>
                        <td colspan="3">
                            <select
                                id="devicemode"
                                class="sel"
                                onchange="changeIPMode(this.value);"
                            >
                                <option value="1">IPServer</option>
                                <option value="2">HiDDNS</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">服务器地址</td>
                        <td>
                            <input id="serveraddress" type="text" class="txt" value="">
                        </td>
                        <td class="tt">端口号</td>
                        <td>
                            <input id="serverport" type="text" class="txt" value="7071">
                        </td>
                    </tr>
                    <tr>
                        <td class="tt">设备标识</td>
                        <td>
                            <input id="deviceid" type="text" class="txt" value="">
                        </td>
                        <td class="tt">&nbsp;</td>
                        <td>
                            <input
                                type="button"
                                class="btn"
                                value="获取设备IP"
                                onclick="clickGetDeviceIP();"
                            >
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
        <div class="left">
            <fieldset class="operate">
                <legend>操作信息</legend>
                <div id="opinfo" class="opinfo"></div>
            </fieldset>
            <fieldset class="callback">
                <legend>事件回调信息</legend>
                <div id="cbinfo" class="cbinfo"></div>
            </fieldset>
        </div>
    </div>
</template>
<script>
/*eslint-disable*/
import { WebVideoCtrl } from '@static/js/webVideoCtrl.js'
// import axios from 'axios'
export default {
  data() {
    return {
      iProtocol: 1,
      szIP: '192.168.4.50',
      szUsername: 'admin',
      szPort: 80,
      szPassword: 'huansi.net',
      g_iWndIndex: 0,
      cameraArray: [
        {
          szIP: '192.168.4.50',
          szUsername: 'admin',
          szPort: 80,
          szPassword: 'huansi.net',
          channelId: 0
        }
      ],
      iWidth: 500,
      iHeight: 300,
      iWndowType: 2,
      path: '',
      g_bPTZAuto: false
    }
  },
  props: {
    StopRealPlay: {}
  },
  watch: {
    // 监听路由变化
    $route(to, from) {
      if (to.path === this.path && from.fullPath !== this.path) {
        window.location.reload()
      }
    }
  },
  computed: {},
  mounted() {
    this.path = this.$route.path
  },
  methods: {
    //  打开对讲
    clickStartVoiceTalk() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0)
      var iRet = WebVideoCtrl.I_StartVoiceTalk(
        oWndInfo.szDeviceIdentify,
        oWndInfo.iChannelID
      )
      var szInfo = ''
      if (0 == iRet) {
        szInfo = '打开声音成功！'
      } else {
        szInfo = '打开声音失败！'
      }
      console.log(oWndInfo, oWndInfo.szDeviceIdentify + ' ' + szInfo)
    },
    mouseDownPTZControl (iPTZIndex) {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0);
      console.log(oWndInfo)
      if (oWndInfo !== null) {
        if (iPTZIndex === 9 && this.g_bPTZAuto) {
          iPTZSpeed = 0;
        } else {
          this.g_bPTZAuto = false;
        }
        var iRet = WebVideoCtrl.I_PTZControl(iPTZIndex, false, {iWndIndex: 0, iPTZSpeedL: 5})
        console.log(iRet)
        // WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
        //   iWndIndex: 0,
        //   iPTZSpeed: 4,
        //   success: function (xmlDoc) {
        //     console.log(xmlDoc);
        //     if (iPTZIndex === 9 && this.g_bPTZAuto) {
        //       console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！");
        //     } else {
        //       console.log(oWndInfo.szDeviceIdentify + " 开启云台成功！");
        //     }
        //     if (iPTZIndex === 9) {
        //       this.g_bPTZAuto = !this.g_bPTZAuto;
        //     }
        //   },
        //   error: function (status, xmlDoc) {
        //     console.log(oWndInfo.szDeviceIdentify + " 开启云台失败！", status, xmlDoc);
        //   }
        // });
      }
    },
    //   全屏
    clickFullScreen() {
      WebVideoCtrl.I_FullScreen(true)
    },
    // 打开声音
    clickOpenSound() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
      if (oWndInfo != null) {
        var allWndInfo = WebVideoCtrl.I_GetWindowStatus()
        // 循环遍历所有窗口，如果有窗口打开了声音，先关闭
        for (var i = 0, iLen = allWndInfo.length; i < iLen; i++) {
          oWndInfo = allWndInfo[i]
          if (oWndInfo.bSound) {
            WebVideoCtrl.I_CloseSound(oWndInfo.iIndex)
            break
          }
        }
        var iRet = WebVideoCtrl.I_OpenSound(this.g_iWndIndex)
        var szInfo = ''
        if (0 == iRet) {
          szInfo = '打开声音成功！'
        } else {
          szInfo = '打开声音失败！'
        }
        console.log(oWndInfo.szDeviceIdentify + ' ' + szInfo)
      }
    },
    // 开始预览
    startRealPlay: function(szDeviceIdentify, iWndIndex, iChannelID) {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
      console.log(oWndInfo, '我是什么')
      WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
        iWndIndex: iWndIndex,
        iStreamType: this.iWndowType,
        // iChannelID: iChannelID,
        bZeroChannel: false,
        success: function() {
          console.log('开始预览成功 ')
        },
        error: function(status, xmlDoc2) {
          //   this.clickOpenSound()
          if (status === 403) {
            console.log('szInfo 设备不支持Websocket取流！')
          } else {
            console.log('开始预览失败 ')
          }
        }
      })
    },
    // 停止预览
    clickStopRealPlay() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex),
        szInfo = ''
      console.log(oWndInfo)
      if (oWndInfo != null) {
        WebVideoCtrl.I_Stop({
          success: function() {
            szInfo = '停止预览成功！'
            console.log('停止预览成功！')
          },
          error: function() {
            szInfo = '停止预览失败！'
            console.log('停止预览失败！')
          }
        })
      }
    },
    getbase() {
      var iRet = WebVideoCtrl.I_CheckPluginInstall()
      if (iRet === -1) {
        alert('您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！')
        return
      }
      var that = this
      WebVideoCtrl.I_InitPlugin(this.iWidth, this.iHeight, {
        bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
        iWndowType: 2,
        cbSelWnd: function(xmlDoc) {
          var giWndIndex = parseInt(
            $(xmlDoc)
              .find('SelectWnd')
              .eq(0)
              .text(),
            10
          )
          var szInfo = '当前选择的窗口编号：' + giWndIndex
          console.log(szInfo)
        },
        cbInitPluginComplete: function() {
          WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin')
          // 检查插件是否最新
          if (WebVideoCtrl.I_CheckPluginVersion() === -1) {
            alert(
              '检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！'
            )
            return
          }
          if (that.cameraArray.length > 0) {
            that.szIP = that.cameraArray[0].szIP
            that.szPort = that.cameraArray[0].szPort
            that.szUsername = that.cameraArray[0].szUsername
            that.szPassword = that.cameraArray[0].szPassword
          }
          WebVideoCtrl.I_Login(
            that.szIP,
            that.iProtocol,
            that.szPort,
            that.szUsername,
            that.szPassword,
            {
              async: false,
              success: function(xmlDoc) {
                console.log(xmlDoc) //不能删除
                // 开始预览
                var szDeviceIdentify = that.szIP + '_' + that.szPort
                for (var i = 0; i < that.cameraArray.length; i++) {
                  var cameraId = that.cameraArray[i].channelId
                  // console.log("cameraId: "+ cameraId);
                  setTimeout(
                    that.startRealPlay(szDeviceIdentify, i, cameraId),
                    500
                  )
                }
              },
              error: function() {
                console.log('login error')
              }
            }
          )
        }
      })
    }
  },
  activated() {
    this.getbase()
    //   this.getbase()
  }
}
</script>
<style>
.el-button {
  padding: 6px !important;
}
</style>

