<script setup>
import { JsvDragBox } from "jsview";
import { shallowRef, onMounted, ref, computed } from "vue";

const vDragBox1 = shallowRef();
const vDragBox2 = shallowRef();
const vHole1Fitted = ref(false);
const vHole2Fitted = ref(false);

const vHole1Text = computed(() => {
  return vHole1Fitted.value ? "已放入" : "未放入";
});
const vHole2Text = computed(() => {
  return vHole2Fitted.value ? "已放入" : "未放入";
});

const hole1Style = {
  left: 50,
  top: 200,
  width: 100,
  height: 100,
  backgroundColor: "#00FF0088",
};
const hole2Style = {
  left: 200,
  top: 300,
  width: 100,
  height: 50,
  backgroundColor: "#0000FF88",
};
function ifFit(cur, target) {
  return (
    Math.abs(cur.left - target.left) < 10 && Math.abs(cur.top - target.top) < 10
  );
}
function onMove1(pos) {
  vHole1Fitted.value = ifFit(pos, hole1Style);
}

function onMove2(pos) {
  vHole2Fitted.value = ifFit(pos, hole2Style);
}

const cBoxRect = {
  left: 100,
  top: 100,
  width: 400,
  height: 400,
};
onMounted(() => {
  vDragBox1.value.setSensor(onMove1, 12);
  vDragBox1.value.setTouchCallback(
    (pos) => {
      console.log("1 drag start", pos);
    },
    (pos) => {
      let p = vDragBox1.value.getPosition();
      console.log("1 drag end", pos, p);
      if (ifFit(p, hole1Style)) {
        vDragBox1.value.moveTo(hole1Style.left, hole1Style.top);
      }
    }
  );
  vDragBox2.value.setSensor(onMove2, 12);
  vDragBox2.value.setTouchCallback(
    (pos) => {
      console.log("2 drag start", pos);
    },
    (pos) => {
      let p = vDragBox2.value.getPosition();
      console.log("2 drag end", pos, p);
      if (ifFit(p, hole2Style)) {
        vDragBox2.value.moveTo(hole2Style.left, hole2Style.top);
      }
    }
  );
});
</script>
<template>
  <div :style="{ width: 1280, height: 720, backgroundColor: '#ffffff' }"></div>
  <div
    :style="{
      ...cBoxRect,
      backgroundColor: '#ff0000aa',
    }"
  >
    <div :style="hole1Style"></div>
    <div :style="hole2Style"></div>
  </div>

  <div :style="{
    left: 20,
    top: 20,
    width: 1280,
    height: 100,
    fontSize: 30,
    color: '#000000'
  }">
    拖动带文字的方块放入对应的矩形中, 当拖动到附近时释放后会自动吸附
  </div>

  <jsv-drag-box
    ref="vDragBox1"
    :boxRect="cBoxRect"
    :dragRect="{
      left: 50,
      top: 50,
      width: hole1Style.width,
      height: hole1Style.height,
    }"
  >
    <div
      :style="{
        width: hole1Style.width,
        height: hole1Style.height,
        backgroundColor: '#00FF00',
        lineHeight: hole1Style.height,
        fontSize: 20,
      }"
    >
      {{ vHole1Text }}
    </div>
  </jsv-drag-box>

  <jsv-drag-box
    ref="vDragBox2"
    :boxRect="cBoxRect"
    :dragRect="{
      left: 250,
      top: 50,
      width: hole2Style.width,
      height: hole2Style.height,
    }"
  >
    <div
      :style="{
        width: hole2Style.width,
        height: hole2Style.height,
        backgroundColor: '#0000FF',
        lineHeight: hole2Style.height,
        fontSize: 20,
        color: '#ffffff',
      }"
    >
      {{ vHole2Text }}
    </div>
  </jsv-drag-box>
</template>
