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

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

export default {
  data() {
    return {
      width: 0,
      height: 0,
    };
  },
  name: "MideaLottieView",
  components: {
    BaseSameLayer,
  },
  props: {
    hosUniqueProps: {
      type: Object,
      default() {
        return {};
      },
    },
    loop: {
      type: Boolean,
      default: true,
    },
    data: {
      type: String,
      default: "",
    },
    dataUrl: {
      type: String,
      default: "",
    },
    repeatCount: {
      type: Number,
      default: 0,
    },
    progress: {
      type: Number,
      default: 1,
    },
    autoPlay: {
      type: Boolean,
      default: true,
    },
    load: {
      type: Function,
      default: ()=>{},
    },
  },
  computed: {
    hosSameLayerArgs() {
      return {
        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
        width: this.width,
        height: this.height,
        loop: this.loop,
        data: this.data,
        dataUrl: this.dataUrl,
        repeatCount: this.repeatCount,
        progress: this.progress,
        autoPlay: this.autoPlay,
        load: this.load
      };
    },
  },
  mounted() {
    this.width = this.$el.clientWidth;
    this.height = this.$el.clientHeight;
  },

  methods: {
    load(){
      this.$emit("load");
    },
    // 自定义拓展其它逻辑
    handleOnChange(res) {
      if (res.mode == 1) {
        //停止滑动
        this.$emit("slideEnd", res);
      } else {
        this.$emit("slideChange", res);
      }
    },
  },
};
</script>
