<template>
  <div class="qingliu" :class="classNames" id="qinglliu" ref="qingliu">
    <div :id="'qingliu_' + name" class="qingcanvas" ref="qingcanvas">
    </div>
  </div>
</template>

<script>

export default {
  name: "QingLiuPlayer",
  props: {
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      name: "QingLiuPlayer" + Date.now(),
    };
  },
  watch: {
  },
  created() {},
  mounted() {
    this.init();
  },
  beforeDestroy() {
    window.kbt_player_destroy("qingliu_" + this.name);
    window.removeEventListener("resize", this.handResize);
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      // 新
      window.kbt_sdk_load(this.url, "qingliu_" + this.name);

      // 监听窗口大小变化事件
      window.addEventListener("resize", this.handResize);
      var canvas_qinliu = document.getElementById("qingliu_" + this.name);
      var resizeObserver = new ResizeObserver((e) => {
        for (let i of e) {
          window.kbt_player_resize("qingliu_" + this.name);
        }
      });
      resizeObserver.observe(canvas_qinliu);
    },
    handResize() {
      // 获取 Canvas 元素
      var canvas_qinliu = document.getElementById("qingliu_" + this.name);
      // 获取 Canvas 的初始宽度和高度
      var initialWidth = canvas_qinliu.width;
      var initialHeight = canvas_qinliu.height;
      // 获取当前 Canvas 的宽度和高度
      var currentWidth = canvas_qinliu.clientWidth;
      var currentHeight = canvas_qinliu.clientHeight;
      // 检查 Canvas 的大小是否发生变化
      if (currentWidth !== initialWidth || currentHeight !== initialHeight) {
        // 执行适应新尺寸的操作
        window.kbt_player_resize("qingliu_" + this.name);
      }
    },
    fullScreen(flag) {
      if (flag) {
        let dom = document.querySelector("#qingliu_" + this.name);
        dom.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.qingliu ::v-deep {
  width: 100%;
  height: calc(100% - 46px);
  .qingcanvas {
    width: 100%;
    height: 100%;
  }

  canvas {
    width: 100% !important;
  }
}
</style>
