<template>
  <div id="DHVideo">
    <div id="dhplayer-dom" class="playWnd" v-html="AllData.Getchajian === null ? desc : ''"></div>
  </div>
</template>

<script setup name="DHVideo">
import { ref, reactive, toRefs, onMounted } from 'vue';
import { listConfig } from '@/api/system/config';
const { proxy } = getCurrentInstance();

const props = defineProps({
  // 内网、公网 4个配置
  channelId: {
    type: String,
    default: () => '1000131$1$0$0',
  },
});

const desc = ref('插件启动中....');
const AllData = reactive({
  Getchajian: null,
  URL: null,
  channelId: null,
  myVideoPlayer: null,
  pluginLoginInfo: {
    // 传入 icc 平台的登录信息
    // 内网端口
    host: '172.28.41.16', // icc 平台ip
    port: '443', // icc 平台端口 https 默认 443
    username: 'sfduijie', // icc 平台用户名
    password: 'sfduijie@123', // icc 平台密码

    // 外网端口
    // host: '220.249.115.224', // icc 平台ip
    // port: '1443', // icc 平台端口 https 默认 443
    // username: 'sfduijie', // icc 平台用户名
    // password: 'sfduijie@123', // icc 平台密码
  },
});

// 监听视频编码的改变(单个视频编码)
watch(
  () => props.channelId,
  val => {
    if (props.channelId) {
      console.log('初始化视频', props.channelId);
      AllData.channelId = props.channelId.trim();
      if (AllData.Getchajian) {
        startReal();
      } else {
        initDHPlayer();
      }
    }
  },
  { deep: true, immediate: true }
);

// 初始化并登录插件
function initDHPlayer() {
  console.log('初始化视频');
  desc.value = '插件启动中....';
  AllData.myVideoPlayer = new VideoPlayer({
    videoId: 'dhplayer-dom', // 唯一标识，必填，不能重复
    windowType: 0, // 播放器类型，必传， 0 - 实时预览，3 - 录像回放，7- 录像回放（支持倒放）
    usePluginLogin: true, // 采用登录 (请默认传true，插件内部自动拉流)
    pluginLoginInfo: AllData.pluginLoginInfo,
    division: 1, // 默认展示的窗口数量， 必传
    draggable: false, // 窗口拖拽 【暂不支持】
    showBar: true, // 底部操作栏， 选传，【true - 显示, false - 隐藏】
    shieldClass: ['shield-class', 'select'], // 如果DOM元素被插件挡住了，把DOM元素的类名传入。
    coverShieldClass: [], // 如果插件要在dom内滚动，需要把DOM元素的类名传入，请查看案例-遮挡
    parentIframeShieldClass: [], // 有 iframe 时，top层 的 dom 元素被插件挡住了，把DOM元素的类名传入。
    // 下面均为回调函数，请按需使用，具体可在 API 内进行功能的体验和查看。

    // 创建播放器成功回调
    createSuccess: versionInfo => {
      // 该回调触发后，我们可以进行实时预览/录像回放等操作
      // desc.value = '创建成功!!!' + versionInfo.message;
      console.log('准备进入', AllData.channelId);
      AllData.Getchajian = 1;
      startReal();
    },
    // 创建播放器失败回调
    createError: err => {
      console.log('错误', JSON.stringify(err));
      // 有错误码，可打印查看错误信息
      // desc.value = '创建失败!!!' + JSON.stringify(err);
      AllData.Getchajian = null;

      GetchajianUrl();
    },
    // 插件公共回调
    dhPlayerMessage: (info, err) => {},
    // 实时预览成功回调
    realSuccess: info => {},
    // 实时预览失败回调
    realError: (info, err) => {},
    // 对讲成功回调
    talkSuccess: info => {},
    // 对讲失败回调
    talkError: (info, err) => {},
    // 录像播放成功回调
    playbackSuccess: info => {},
    // 录像播放失败回调
    playbackError: (info, err) => {},
    // 录像播放完成回调
    playbackFinish: info => {},
    // 抓图成功回调
    snapshotSuccess: ({ base64Url, path }, info) => {
      var byteCharacters = atob(base64Url.replace(/^data:image\/(png|jpeg|jpg);base64,/, ''));
      var byteNumbers = new Array(byteCharacters.length);
      for (var i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      var byteArray = new Uint8Array(byteNumbers);
      var blob = new Blob([byteArray], {
        type: undefined,
      });
      var aLink = document.createElement('a');
      let time = proxy.moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss');
      aLink.download = `大华截图-${time}.jpg`; //这里写保存时的图片名称
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    },
    // 本地录像下载成功回调
    videoDownloadSuccess: (path, info) => {
      alert('本地录像地址：' + path);
    },
    // 关闭视频窗口回调
    closeWindowSuccess: ({ isAll, snum, channelList }) => {},
    // 鼠标单击窗口回调
    clickWindow: snum => {},
    // 鼠标双击窗口回调
    dbClickWindow: snum => {},
    // 播放器窗口的数量回调
    changeDivision: division => {},
    // rtsp 流下载录像成功回调
    downloadRecordSuccess: info => {},
    // rtsp 流下载录像失败回调
    downloadRecordError: (info, err) => {},
  });
}

/** document.getElementById("recordDownload").onclick = function () {
    if(document.querySelector('#player-type').value == '0') {
        return console.error("创建录像回放播放器, 才能录像下载")
    }
    let date = document.querySelector('#date').value;
    AllData.myVideoPlayer.downloadRecord({
        channelId: AllData.channelId,
        snum: 0,
        url: 'rtsp://10.56.10.35:9090/dss/playback/param?cameraid=1000025%240&substream=1&trackID=701&type=3&recordType=2&begintime=1703610000&endtime=1703630000',
        records: [],
        startTime: date + ' 01:00:00', // 开始时间
        endTime: date +' 01:00:20', // 结束时间
        redirect: true
    }); // 下载录像
} */

// 实时预览
function startReal() {
  console.log('开始实时预览', AllData.channelId);
  AllData.myVideoPlayer.startReal([
    // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码) <br />可在ICC平台设备管理页面查看到通道id
    {
      channelId: AllData.channelId, // 通道id 【必传】
      channelName: '通道名称', // 通道名称 (用于本地录像下载)
      snum: 0, // 即将要播放的窗口序号，从0开始 【必传】
      streamType: 1, // 1-主码流  2-辅码流 (可不传，默认主码流)
      deviceType: 5, // 设备类别 (插件对讲时，需要配置该参数，否则无法对讲)
      cameraType: '1', // 摄像头类型 (用于云台)
      capability: '00000000000000000000000000000001', // 能力集 (用于云台)
    },
  ]);
}

// 录像回放
function startPlayback() {
  let date = document.querySelector('#date').value;
  console.log(date);
  AllData.myVideoPlayer.startPlayback([
    {
      channelId: AllData.channelId, // 道id
      channelName: '通道名称', // 通道名称 (用于本地录像下载和错误提示)
      startTime: date + ' 00:00:00', // 开始时间
      endTime: date + ' 23:59:59', // 结束时间
      recordSource: AllData.channelId || 3, // 2-录像 3-中心
      streamType: 0, // 0-所有码流 1-主码流  2-辅码流
      snum: 0, //  播放的窗口序号 (从0开始计数，表示第一个窗口)
    },
  ]);
}

// 控制插件的显示，两种方式均试用
function showDHPlayer() {
  // 1.
  AllData.myVideoPlayer._update({
    visible: true,
  });
  // 2.
  // AllData.myVideoPlayer.show();
}

// 控制插件的隐藏，两种方式均试用
function hideDHPlayer() {
  // 1.
  AllData.myVideoPlayer._update({
    visible: false,
  });
  // 2.
  // AllData.myVideoPlayer.hide();
}

// 根据接口获取插件的url
function GetchajianUrl() {
  let paramas = {
    configKey: 'dahua_player_url',
  };
  listConfig(paramas).then(res => {
    AllData.URL = res.data[0].configValue;

    desc.value = `插件启动失败，请检查插件是否安装！
    <a href=${AllData.URL} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
  });
}

onMounted(() => {});
onBeforeUnmount(() => {
  if (AllData.myVideoPlayer) {
    hideDHPlayer();
    AllData.myVideoPlayer.destroy();
  }
});
</script>

<style lang="scss" scoped>
#DHVideo {
  width: 100%;
  height: 100%;
  .playWnd {
    width: 100%;
    height: 100%;
  }
}
</style>