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

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

export default {
  data() {
    return {
      width: 0,
      height: 0,
    };
  },
  name: 'MideaTimelineView',
  components: {
    BaseSameLayer,
  },
  props: {
    hosUniqueProps: {
      type: Object,
      default() {
        return {};
      },
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    hosSameLayerArgs() {
      return {
        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
        width: this.width,
        height: this.height,
        data: this.data,
        onBeginDragging: this.onBeginDragging,
        onStopDragging: this.onStopDragging,
        onBeginZooming: this.onBeginZooming,
        onStopZooming: this.onStopZooming,
      };
    },
  },
  mounted() {
    this.width = this.$el.clientWidth;
    this.height = this.$el.clientHeight;
  },

  methods: {
    enableUserInteraction(callback) {
      weexModule.callNative(
        'timeLineApi',
        {
          method: 'enableUserInteraction',
          name: this.embedId,
        },
        callback,
      );
    },
    disableUserInteraction(callback) {
      weexModule.callNative(
        'timeLineApi',
        {
          method: 'disableUserInteraction',
          name: this.embedId,
        },
        callback,
      );
    },
    updateCurrentTime(params,callback) {
      weexModule.callNative(
        'timeLineApi',
        {
          method: 'updateCurrentTime',
          name: this.embedId,
          params
        },
        callback,
      );
    },
    getCurrentTime(callback) {
      weexModule.callNative(
        'timeLineApi',
        {
          method: 'getCurrentTime',
          name: this.embedId,
        },
        callback,
      );
    },
    onBeginDragging(data) {
      this.$emit('onBeginDragging', data);
    },
    onStopDragging(data) {
      this.$emit('onStopDragging', data);
    },
    onBeginZooming(data) {
      this.$emit('onBeginZooming', data);
    },
    onStopZooming(data) {
      this.$emit('onStopZooming', data);
    },
  },
};
</script>
