<template>
  <BaseSameLayer :hosSameLayerArgs="hosSameLayerArgs" embedType="native/midea-video" :defaultWidth="300"
    :defaultHeight="300">
  </BaseSameLayer>
</template>

<script>
import BaseSameLayer from "./baseSameLayer.vue";

export default {
  data() {
    return {
      width: 0,
      height: 0,
    };
  },
  name: "MideaVideo",
  components: {
    BaseSameLayer,
  },
  props: {
    hosUniqueProps: {
      type: Object,
      default() {
        return {};
      },
    },
    autoplay: {
      type: Boolean,
      default: false,
    },
    src: {
      type: String,
      default: "",
    },
    videoCover: {
      type: String,
      default: "",
    },
    controls: {
      type: Boolean,
      default: true,
    },
    objectFit: {
      type: String,
      default: "",
    },
    muted: {
      type: Boolean,
      default: false,
    },
    loop: {
      type: Boolean,
      default: false,
    },
    playStatus:{
      type: String,
      default: "",
    }
  },
  computed: {
    hosSameLayerArgs() {
      return {
        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
        width: this.width,
        height: this.height,
        autoplay: this.autoplay,
        src: this.src,
        videoCover: this.videoCover,
        controls: this.controls,
        start: this.start,
        pause: this.pause,
        fail: this.fail,
        finish: this.finish,
        objectFit: this.objectFit,
        muted: this.muted,
        loop: this.loop,
        appear: this.appear,
        playStatus: this.playStatus
      };
    },
  },
  mounted() {
    this.width = this.$el.clientWidth;
    this.height = this.$el.clientHeight;
  },

  methods: {
    /** 判断组件是否可见 */
    isInBrowserViewport() {
      const el = this.$el;
      if (!el || typeof el.getBoundingClientRect !== "function") {
        return false;
      }
      const rect = el.getBoundingClientRect();
      const vw = window.innerWidth || 0;
      const vh = window.innerHeight || 0;
      if (!vw || !vh) {
        return false;
      }
      return (
        rect.bottom > 0 &&
        rect.right > 0 &&
        rect.top < vh &&
        rect.left < vw
      );
    },
    // 自定义拓展其它逻辑
    handleOnChange(res) {
      if (res.mode == 1) {
        //停止滑动
        this.$emit("slideEnd", res);
      } else {
        this.$emit("slideChange", res);
      }
    },
    //开始
    start(event) {
      this.$emit("start", event || {});
    },
    pause(event) {
      this.$emit("pause", event || {});
    },
    fail(event) {
      this.$emit("fail", event || {});
    },
    finish(event) {
      this.$emit("finish", event || {});
    },
    appear(event) {
      this.$nextTick(() => {
        if (!this.isInBrowserViewport()) {
          return;
        }
        this.$emit("appear", event || {});
      });
    },
  },
};
</script>
