<template>
  <div
    ref="move"
    class="es-layout-item"
    :class="defaultClasss"
    :style="defaultaStyle"
  >
    <es-card> </es-card>
    <div class="es-layout-resizable-width"></div>
    <div class="es-layout-resizable-height"></div>
    <div class="es-layout-resizable"></div>
  </div>
</template>
<script>
// import '@interactjs/auto-start';
// import '@interactjs/auto-scroll';
// import '@interactjs/actions/drag';
// import '@interactjs/actions/resize';
// import '@interactjs/modifiers';
// import '@interactjs/dev-tools';
import interact from 'interactjs';
export default {
  name: 'LayoutItem',
  components: {},
  props: {
    redact: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100px'
    },
    left: String,
    top: String,
    index: Number
  },
  computed: {
    defaultClasss() {
      return {
        'es-dragging': this.dragging
      };
    },
    defaultaStyle() {
      return {
        width: this.width,
        height: this.height,
        left: this.left,
        top: this.top
      };
    },
    cardStyle() {
      return {
        width: this.width,
        height: this.height
      };
    }
  },
  watch: {},
  data() {
    return {
      position: { x: 0, y: 0 },
      interaction: null,
      dragging: false
    };
  },
  created() {
    this.position = {
      x: parseInt(this.left) || 0,
      y: parseInt(this.top) || 0
    };
    console.log(this.position);
  },
  mounted() {
    console.log(interact.feedback);
    this.interaction = interact(this.$refs.move);
    this.interaction.draggable({
      // modifiers: [
      //   interact.modifiers.restrictRect({
      //     restriction: 'parent',
      //     endOnly: false
      //   })
      // ],
      // listeners: {
      //   start: (event) => {
      //     this.dragging = true;
      //     console.log(event.type, event.target, 111);
      //   },
      //   move: (event) => {
      //     this.position.x += event.dx;
      //     this.position.y += event.dy;
      //     event.target.style.transform = `translate(${this.position.x}px, ${this.position.y}px)`;
      //   },
      //   end: (event) => {
      //     this.dragging = false;
      //     console.log(event.type, event.target, 222);
      //   }
      // }
      inertia: true,
      //autoScroll: { container: '.container' },
      listeners: [interact.feedback.pointers()],
      modifiers: [
        interact.modifiers.restrict({
          restriction: 'html',
          elementRect: { left: 0, top: 0, right: 1, bottom: 1 }
        }),
        interact.modifiers.transform(),
        interact.modifiers.spring()
      ]
    });
    this.interaction.resizable({
      modifiers: [
        // keep the edges inside the parent
        interact.modifiers.restrictEdges({
          outer: 'parent'
        }),

        // minimum size
        interact.modifiers.restrictSize({
          min: { width: 100, height: 100 }
        })
      ],

      //inertia: true,
      edges: { top: true, left: true, bottom: true, right: true },
      listeners: {
        move: function (event) {
          console.log(1212);
          let { x, y } = event.target.dataset;

          x = (parseFloat(x) || 0) + event.deltaRect.left;
          y = (parseFloat(y) || 0) + event.deltaRect.top;

          Object.assign(event.target.style, {
            width: `${event.rect.width}px`,
            height: `${event.rect.height}px`,
            transform: `translate(${x}px, ${y}px)`
          });

          Object.assign(event.target.dataset, { x, y });
        }
      }
    });
  },
  methods: {},
  beforeDestroy() {}
};
</script>
