<template>
  <div class="draggable-box" :style="boxStyle">
    <div class="title-bar" @mousedown="startDrag">
      <slot name="title">Default Title</slot>
    </div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="resize-handle" @mousedown="startResize"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      isResizing: false,
      startMouseX: 0,
      startMouseY: 0,
      startBoxX: 0,
      startBoxY: 0,
      startBoxWidth: 0,
      startBoxHeight: 0
    };
  },
  computed: {
    boxStyle() {
      return {
        left: this.startBoxX + "px",
        top: this.startBoxY + "px",
        width: this.startBoxWidth + "px",
        height: this.startBoxHeight + "px"
      };
    }
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      this.startMouseX = event.clientX;
      this.startMouseY = event.clientY;
      this.startBoxX = parseInt(this.$el.style.left, 10);
      this.startBoxY = parseInt(this.$el.style.top, 10);
      document.addEventListener("mousemove", this.doDrag);
      document.addEventListener("mouseup", this.stopDrag);
    },
    doDrag(event) {
      if (this.isDragging) {
        const deltaX = event.clientX - this.startMouseX;
        const deltaY = event.clientY - this.startMouseY;
        this.startBoxX += deltaX;
        this.startBoxY += deltaY;
        this.startMouseX = event.clientX;
        this.startMouseY = event.clientY;
      }
    },
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener("mousemove", this.doDrag);
      document.removeEventListener("mouseup", this.stopDrag);
    },
    startResize(event) {
      this.isResizing = true;
      this.startMouseX = event.clientX;
      this.startMouseY = event.clientY;
      this.startBoxWidth = this.$el.offsetWidth;
      this.startBoxHeight = this.$el.offsetHeight;
      document.addEventListener("mousemove", this.doResize);
      document.addEventListener("mouseup", this.stopResize);
    },
    doResize(event) {
      if (this.isResizing) {
        const deltaX = event.clientX - this.startMouseX;
        const deltaY = event.clientY - this.startMouseY;
        this.startBoxWidth += deltaX;
        this.startBoxHeight += deltaY;
        this.startMouseX = event.clientX;
        this.startMouseY = event.clientY;
      }
    },
    stopResize() {
      this.isResizing = false;
      document.removeEventListener("mousemove", this.doResize);
      document.removeEventListener("mouseup", this.stopResize);
    }
  }
};
</script>

<style scoped>
.title-bar {
  position: relative;
  background-color: #ccc;
  cursor: move;
  padding: 5px;
  box-sizing: border-box;
}

.content {
  padding: 10px;
  box-sizing: border-box;
}

.resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #666;
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
}
</style>
