<template>
  <BaseSameLayer
    :hosSameLayerArgs="hosSameLayerArgs"
    embedType="native/drag-vertical-list-view"
    :defaultWidth="300"
    :defaultHeight="500"
  ></BaseSameLayer>
</template>
  
  <script>
import BaseSameLayer from "./baseSameLayer.vue";

export default {
  data() {
    return {
      width: 0,
      height: 0,
    };
  },
  name: "DragVerticalListView",
  components: {
    BaseSameLayer,
  },
  props: {
    hosUniqueProps: {
      type: Object,
      default() {
        return {};
      },
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    },

  },
  computed: {
    hosSameLayerArgs() {
      return {
        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
        width: this.width,
        height: this.height,
        data: this.data,
        handleOnClick: this.handleOnClick,
        handleOnDelete: this.handleOnDelete,
        handleOnDragEnd: this.handleOnDragEnd,
        handleOnCheck: this.handleOnCheck,
        handleOnLongPress: this.handleOnLongPress,
        handleOnSwitchCheck: this.handleOnSwitchCheck,
        handleOnSwipeItemClick: this.handleOnSwipeItemClick,
      };
    },
  },
  mounted() {
    this.width = this.$el.clientWidth;
    this.height = this.$el.clientHeight;
  },

  methods: {
    // 自定义拓展其它逻辑
    handleOnClick(res) {
      this.$emit("onClickEvent", res);
    },
    handleOnDelete(res) {
      this.$emit("onDeleteEvent", res);
    },
    handleOnDragEnd(res) {
      this.$emit("onDragEndEvent", res);
    },
    handleOnCheck(res) {
      this.$emit("onCheckEvent", res);
    },
    handleOnLongPress(res) {
      this.$emit("onLongPressDragListView", res);
    },
    handleOnSwitchCheck(res) {
      this.$emit("onSwitchCheck", res);
    },
    handleOnSwipeItemClick(res) {
      this.$emit("onSwipeItemClick", res);
    }
  },
};
</script>
  