<template>
  <BaseSameLayer
    ref="mideaDragListView"
    :hosSameLayerArgs="hosSameLayerArgs"
    embedType="native/midea-drag-list-view"
    :defaultWidth="500"
    :defaultHeight="500"
  ></BaseSameLayer>
</template>

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

export default {
  data() {
    return {
      width: 0,
      height: 0,
      embedId: '',
    };
  },
  name: 'MideaDragListView',
  components: {
    BaseSameLayer,
  },
  props: {
    data: {
      hosUniqueProps: {
        type: Object,
        default() {
          return {};
        },
      },
      data: {
        type: Object,
        default() {
          return {};
        },
      },
    },
  },
  computed: {
    hosSameLayerArgs() {
      return {
        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
        width: this.width,
        height: this.height,
        data: this.data,
        onDeleteEvent: this.onDeleteEvent,
        onDragEventStart: this.onDragEventStart,
        onDragEventEnd: this.onDragEventEnd,
        onClickEvent: this.onClickEvent,
      };
    },
  },
  mounted() {
    this.width = this.$el.clientWidth;
    this.height = this.$el.clientHeight;
    this.embedId = this.$refs.mideaDragListView.embedId;
  },

  methods: {
    onDeleteEvent(params) {
      this.$emit('onDeleteEvent', params);
    },
    onDragEventStart(params) {
      this.$emit('onDragEventStart', params);
    },
    onDragEventEnd(params) {
      this.$emit('onDragEventEnd', params);
    },
    onClickEvent(params) {
      this.$emit('onClickEvent', params);
    },
    getListData(callback) {
      weexModule.callNative(
        'dragListHandle',
        {
          method: 'getListData',
          name: this.embedId,
        },
        callback,
        callback
      );
    },
  },
};
</script>
