<script lang="ts" setup name="VideoHK">
import { ElMessage } from 'element-plus'
import { ref, getCurrentInstance } from 'vue'


/*** 初始化
 * @param {number} iWndowType 分屏类型：1 - 1*1，2 - 2*2，3 - 3*3，4 - 4*4，默认值1，单画面
 */
var g_iWndIndex = 0;
const instance = getCurrentInstance()

const videoWrapper = ref() // 组件

let initPlugin = (iWndowType) => {
  // 检查浏览器是否支持无插件
  // if (!WebVideoCtrl.I_SupportNoPlugin()) {
  //   ElMessage.warning("当前浏览器不支持无插件预览监控视频，已自动切换成插件模式，如果还未安装插件请安装")
  //   // 检查插件是否已经安装
  //
  // }
  const isInstall = WebVideoCtrl.I_CheckPluginInstall();
  if (isInstall == -1) {
    ElMessage.warning("您还未安装过插件，请先下载WebComponentsKit.exe双击安装！");
    // 后面推下载文件
    return;
  }
  // 初始化插件参数及插入插件
  WebVideoCtrl.I_InitPlugin({
    szColorProperty: "plugin-background:ffffff; sub-background:00000; sub-border:D0DAE4; sub-border-select:409EFF",
    bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
    iWndowType: iWndowType,
    cbSelWnd: function (xmlDoc) {
      g_iWndIndex = parseInt(document.getElementById(xmlDoc).find("SelectWnd").eq(0).text(), 10);
      console.log("当前选择的窗口编号：" + g_iWndIndex);
    },
    cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
      var szInfo = "当前放大的窗口编号：" + iWndIndex;
      if (!bFullScreen) {
        szInfo = "当前还原的窗口编号：" + iWndIndex;
      }
      console.log(szInfo);
    },
    cbEvent: function (iEventType, iParam1, iParam2) {
      if (2 == iEventType) {// 回放正常结束
        console.log("窗口" + iParam1 + "回放结束！");
      } else if (-1 == iEventType) {
        console.log("设备" + iParam1 + "网络错误！");
      } else if (3001 == iEventType) {
        clickStopRecord(g_szRecordType, iParam1);
      }
    },
    cbInitPluginComplete: function () {
      WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
        resize()
        login()
        // 检查插件是否最新
        WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
          if (bFlag) {
            ElMessage.warning("检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！");
          }
        });
      }, () => {
        ElMessage.warning("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！");
      });
    }
  });
};

function login() {
  loginDevice('192.168.1.64', '80', 'admin', 'abcd1234')
}

function loginDevice(szIP, szPort, szUsername, szPassword) {
  if ("" == szIP || "" == szPort) {
    return;
  }
  var szDeviceIdentify = szIP + "_" + szPort;
  console.log(szDeviceIdentify)
  WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
    timeout: 3000,
    success: function (xmlDoc) {
      console.log(szDeviceIdentify + " 登录成功！");
      preview(szIP, szPort, szUsername, szPassword)
      // $("#ip").prepend("<option value='" + szDeviceIdentify + "'>" + szDeviceIdentify + "</option>");
      // setTimeout(function () {
      //   $("#ip").val(szDeviceIdentify);
      //   setTimeout(function() {
      //     getChannelInfo();
      //   }, 1000);
      //   getDevicePort();
      // }, 10);
    },
    error: function (oError) {
      debugger
      if (2001 === status) {
        console.log(szDeviceIdentify + " 已登录过！");
      } else {
        console.log(szDeviceIdentify + " 登录失败！", oError.errorCode, oError.errorMsg);
      }
    }
  });
};

function preview(szIP, szPort, szUsername, szPassword) {
  var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
    szDeviceIdentify = szIP,
    iRtspPort = parseInt('554', 10),
    iChannelID = parseInt('1', 10),
    bZeroChannel = false,
    szInfo = "",
    iStreamType = parseInt('1', 10); // 主码流

  if (null == szDeviceIdentify) {
    return;
  }
  var startRealPlay = function () {
    WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
      iStreamType: iStreamType,
      iChannelID: iChannelID,
      bZeroChannel: bZeroChannel,
      success: function () {
        szInfo = "开始预览成功！";
        console.log(szDeviceIdentify + " " + szInfo);
      },
      error: function (oError) {
        console.log(szDeviceIdentify + " 开始预览失败！", oError.errorCode, oError.errorMsg);
      }
    });
  };

  if (oWndInfo != null) {// 已经在播放了，先停止
    WebVideoCtrl.I_Stop({
      success: function () {
        startRealPlay();
      }
    });
  } else {
    startRealPlay();
  }
}

// 调整大小
let resize = () => {
  const divPlugin = document.getElementById('divPlugin')
  WebVideoCtrl.I_Resize(divPlugin.clientWidth, divPlugin.clientHeight);
};

function hide () {
  WebVideoCtrl.I_Resize(0,0);
}
onMounted(() => {
  initPlugin(2)
  window.addEventListener('resize', resize)
})


onBeforeUnmount(()=>{
  hide()
  // isShow.value = false
  // videoWrapper.value.style.display = null
  // // instance.$forceUpdate()
  window.removeEventListener('resize', resize)
})
const videoHK = ref('videoHK')
const isShow = ref(true)
</script>

<template>
  <div v-if="isShow" ref="videoWrapper" id="divPlugin" class="plugin" :class="videoHK"></div>
</template>

<style lang="scss" scoped>
.videoHK {
  margin: 20px;
  height: calc(100vh - 150px);
  width: calc(100% - 40px);
  position: relative;
}
</style>