<template>
  <BaseSameLayer
    ref="apng"
    :hosSameLayerArgs="hosSameLayerArgs"
    embedType="native/midea-apng-view"
    :defaultWidth="750"
    :defaultHeight="300"
    v-on="$listeners"
    :listenEvents="['click']"
  ></BaseSameLayer>
</template>

<script>
import BaseSameLayer from "./baseSameLayer.vue";
const weexModule = weex.requireModule("weexModule");

export default {
  data() {
    return {
      width: 0,
      height: 0
    }
  },
  name: "MideaApngView",
  components: {
    BaseSameLayer,
  },
  props: {
    hosUniqueProps: {
      type: Object,
      default() {
        return {};
      },
    },
    src: {
      type: String,
      require: true,
    },
    loop: {
      type: Boolean,
      require: false,
      default: false,
    },
    auto: {
      type: Boolean,
      require: false,
      default: true,
    },
  },
  computed: {
    hosSameLayerArgs() {
      return {
        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
        width: this.width,
        height: this.height,
        src: this.src,
        loop: this.loop,
        auto: this.auto,
        onPlayComplete: this.onPlayComplete,
      };
    },
  },
  mounted() {
    this.width = this.$el.clientWidth;
    this.height = this.$el.clientHeight;
  },

  methods: {
    onPlayComplete(res) {
      this.$emit('onPlayComplete', res);
    },
    // 自定义拓展其它逻辑
    play(params, callback, callbackFail) {
      weexModule.callNative('apngHandle', {
        method: 'play',
        name: this.$refs.apng.embedId,
        params,
      }, undefined, callback, callbackFail)
    },
    stop(params, callback, callbackFail) {
      weexModule.callNative('apngHandle', {
        method: 'stop',
        name: this.$refs.apng.embedId,
        params,
      }, undefined, callback, callbackFail)
    },
    resume(params, callback, callbackFail) {
      weexModule.callNative('apngHandle', {
        method: 'resume',
        name: this.$refs.apng.embedId,
        params,
      }, undefined, callback, callbackFail)
    },
    pause(params, callback, callbackFail) {
      weexModule.callNative('apngHandle', {
        method: 'pause',
        name: this.$refs.apng.embedId,
        params,
      }, undefined, callback, callbackFail)
    },
    goTo(params, callback, callbackFail) {
      weexModule.callNative('apngHandle', {
        method: 'goTo',
        name: this.$refs.apng.embedId,
        params,
      }, undefined, callback, callbackFail)
    },
    run(params, callback, callbackFail) {
      weexModule.callNative('apngHandle', {
        method: 'run',
        name: this.$refs.apng.embedId,
        params,
      }, undefined, callback, callbackFail)
    },
  },
};
</script>
