<template>
  <div>
    <embed
      :id="embedId"
      type="native/video"
      :width="width"
      :height="height"
      src=""
    />
  </div>
</template>

<script>
const weexModule = weex.requireModule("weexModule");

export default {
  name: "HlVideoTest",
  props: {
    width: {
      type: Number,
      required: false,
      default: 300,
    },
    height: {
      type: Number,
      required: false,
      default: 250,
    },
    src: {
      type: String,
      required: true,
    },
    controls: {
      type: Boolean,
      required: false,
    },
    autoPlay: {
      type: Boolean,
      required: false,
    },
    muted: {
      type: Boolean,
      required: false,
    },
    loop: {
      type: Boolean,
      required: false,
    },
  },
  data() {
    return {
      embedId: `video_${this._uid}`, // 使用Vue实例的唯一ID来生成embed元素的唯一ID
      isTransferScheduled: false, // 添加一个标志来检查是否已经安排了transferPropsAndListeners的调用
    };
  },
  created() {
    console.log("[weex] hl-video created!");
    this.transferPropsAndListeners(); // 组件创建时调用
  },
  mounted() {
    console.log("[weex] hl-video mounted!");
    this.addTouchEvent();
  },
  beforeDestroy() {
    console.log("[weex] hl-video beforeDestroy!");
    this.removeTouchEvent();
  },
  methods: {
    transferPropsAndListeners() {
      // 构建一个包含所需信息的对象
      const args = {
        componentId: this.embedId,
        width: this.width,
        height: this.height,
        src: this.src, // 要播放视频的资源地址
        controls: this.controls, // 是否显示播放控件
        muted: this.muted, // 是否静音
        loop: this.loop,
        autoPlay: this.autoPlay,
        onPlay: this.handleOnPlay,
        onPause: this.handleOnPause,
      };
      // 调用JSbridge方法，传递属性和监听方法到原生组件
      weexModule.callNative("transferSameLayerArgs", args);
    },
    // 必须给embed元素添加touchstart事件监听，addEventListener的第二个参数监听事件对象置空即可（同层渲染事件处理需要）
    addTouchEvent() {
      const embedElement = document.getElementById(this.embedId);
      if (embedElement) {
        console.log("[weex] hl-video-embed addEventListener");
        embedElement.addEventListener("touchstart", {});
      }
    },
    removeTouchEvent() {
      const embedElement = document.getElementById(this.embedId);
      if (embedElement) {
        console.log("[weex] hl-video-embed removeEventListener");
        embedElement.removeEventListener("touchstart", {});
      }
    },
    scheduleTransfer() {
      if (!this.isTransferScheduled) {
        this.isTransferScheduled = true;
        this.$nextTick(() => {
          this.transferPropsAndListeners();
          this.isTransferScheduled = false;
        });
      }
    },
    handleOnPlay(res) {
      this.$emit("onPlay", res);
    },
    handleOnPause(res) {
      this.$emit("onPause", res);
    },
  },
  watch: {
    src(newSrc, oldSrc) {
      if (newSrc !== oldSrc) {
        this.scheduleTransfer(); // 当src属性变化时重新调用
      }
    },
    muted(newMuted, oldMuted) {
      if (newMuted !== oldMuted) {
        this.scheduleTransfer(); // 当muted属性变化时重新调用
      }
    },
    controls(newControls, oldControls) {
      if (newControls !== oldControls) {
        this.scheduleTransfer(); // 当controls属性变化时重新调用
      }
    },
    width(newWidth, oldWidth) {
      if (newWidth !== oldWidth) {
        this.scheduleTransfer(); // 当width属性变化时重新调用
      }
    },
    height(newHeight, oldHeight) {
      if (newHeight !== oldHeight) {
        this.scheduleTransfer(); // 当width属性变化时重新调用
      }
    },
  },
};
</script>

<style scoped>
</style>