<template>
  <div
    class="hello-ezuikit-js"
    style="width: 100%;height:100%;padding: 35px;display: flex; justify-content: center;"
  >
    <div
      ref="monitordom"
      id="ope-video-container"
      style="width:90%;height:90%"
    ></div>
  </div>
</template>

<script>
import EZUIKit from "ezuikit-js";
import axios from "axios";
const service = axios.create({});
export default {
  name: "HelloWorld",
  props: {
    msg: String,
    appKey: String,
    appSecret: String,
    filename: String,
    devNumber: String
  },
  async mounted() {
    console.group("mounted 组件挂载完毕状态===============》");

    // let result = null;

    let dataJson = "appKey=" + this.appKey + "&appSecret=" + this.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 iframeText = this.getIframeText(
        "ysOpenDevice",
        this.devNumber,
        this.filename,
        result2.data.data.accessToken
      );
      this.$refs.monitordom.innerHTML = iframeText;
      // this.$refs.monitordom.innerHTML = `<iframe  src="https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/${
      //   this.devNumber
      // }/${this.filename}&autoplay=1&audio=1&accessToken=${
      //   result2.data.data.accessToken
      // }&templete=2"id="'${"ysOpenDevice"}'" width="100%" height="100%" frameborder="no" border="0" allowfullscreen> </iframe>`;
      // const player = new EZUIKit.EZUIKitPlayer({
      //   autoplay: true,
      //   id: "ope-video-container",
      //   accessToken: result2.data.data.accessToken,
      //   url: `ezopen://open.ys7.com/${this.devNumber}/${this.filename}`,
      //   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: {
    getIframeText(idName, filename, devNumber, accessToken) {
      return (
        '<iframe  src="https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/' +
        devNumber +
        "/" +
        filename +
        "&autoplay=1&audio=1&accessToken=" +
        accessToken +
        '&templete=2" id="' +
        idName +
        '" width="100%" height="100%" frameborder="no" border="0" allowfullscreen> </iframe>'
      );
    }
  },
  getAccessToken(appKey, appSecret) {
    var dataJson = "appKey=" + appKey + "&appSecret=" + appSecret;
    var request = axios.create({});
    request.defaults.headers["Content-Type"] =
      "application/x-www-form-urlencoded; charset=UTF-8";
    return request
      .post("https://open.ys7.com/api/lapp/token/get", dataJson)
      .then(res => {
        var data = res.data || {};
        if (data["code"] == "200") {
          return data["data"]["accessToken"];
        } else {
          return null;
        }
      })
      .catch(err => {
        console.log(err);
        return err;
      });
  }
};
</script>
<style lang="scss" scoped>
.hello-ezuikit-js {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ope-video-container {
  width: 96%;
  height: 70%;
}
</style>
