<template>
  <div class="hello-ezuikit-js" style="width: 100%;height:100%;padding: 35px;">
    <div id="ope-video-container" style="width:90%;height:90%"></div>
  </div>
</template>

<script>
import EZUIKit from "ezuikit-js";
import { getMonitor } from "../../api/opemonitorv.js";
import axios from "axios";
const service = axios.create({});
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  mounted: async () => {
    console.group("mounted 组件挂载完毕状态===============》");
    let result = null;
    await getMonitor().then(res => {
      result = res[0];
      // const player = new EZUIKit.EZUIKitPlayer({
      //   autoplay: true,
      //   id: "ope-video-container",
      //   accessToken:
      //     "at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz" ||
      //     res[0].appsecret,
      //   url: "ezopen://open.ys7.com/203751922/1.live" || res[0].channel,
      //   template: "simple" // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
      //   // 视频上方头部控件
      //   //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
      //   //plugin: ['talk'],                       // 加载插件，talk-对讲
      //   // 视频下方底部控件
      //   // footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
      //   // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
      //   // openSoundCallBack: data => console.log("开启声音回调", data),
      //   // closeSoundCallBack: data => console.log("关闭声音回调", data),
      //   // startSaveCallBack: data => console.log("开始录像回调", data),
      //   // stopSaveCallBack: data => console.log("录像回调", data),
      //   // capturePictureCallBack: data => console.log("截图成功回调", data),
      //   // fullScreenCallBack: data => console.log("全屏回调", data),
      //   // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
      //   // width: 600,
      //   // height: 400
      // });
      // player.play();
    });

    let dataJson = "appKey=" + result.appkey + "&appSecret=" + result.appsecret;
    service.defaults.headers["Content-Type"] =
      "application/x-www-form-urlencoded; charset=UTF-8";
    let result2 = null;
    await service
      .post("https://open.ys7.com/api/lapp/token/get", dataJson)
      .then(res1 => {
        console.log(res1, "service post");
        result2 = res1;
      });
    if (result2.data.code === "200") {
      const player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: "ope-video-container",
        accessToken: result2.data.data.accessToken,
        url: `ezopen://open.ys7.com/${result.mid}/${result.channel}`,
        template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // footer: ["fullScreen"],
        // 视频上方头部控件
        // header: ["capturePicture", "save", "zoom"] // 如果templete参数不为simple,该字段将被覆盖
        // plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        // footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: 600,
        // height: 400
      });
      player.play();
    }
    // console.log("player", player);
    // setTimeout(()=>{
    //   player.stop(); // 方法调用示例，10秒后关闭视频
    // },10000)
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.hello-ezuikit-js {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ope-video-container {
  width: 96%;
  height: 70%;
}
</style>
