<!--
  Description: 设备管理 - 区域绘制（电子围栏）
  Author: 李亚光
  Date: 2024-11-01
 -->

<script lang="ts" setup name="DrawArea">
// const props = defineProps({
//   width: {
//     type: Number,
//     required: true,
//   },
//   height: {
//     type: Number,
//     required: true,
//   },
// })

const points = ref([
  { x: 50, y: 50 },
  { x: 480, y: 50 },
  { x: 480, y: 250 },
  { x: 50, y: 250 },
])
onMounted(() => {
  const canvas = document.getElementById('myCanvas')
  const container = document.getElementById('draw-area')
  const ctx = canvas.getContext('2d')
  ctx.clearRect(0, 0, container.clientWidth, container.clientHeight)
  // 初始位置
  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.beginPath()
    ctx.moveTo(points.value[0].x, points.value[0].y)
    ctx.lineTo(points.value[1].x, points.value[1].y)
    ctx.lineTo(points.value[2].x, points.value[2].y)
    ctx.lineTo(points.value[3].x, points.value[3].y)
    ctx.closePath()
    ctx.strokeStyle = 'red'
    ctx.lineWidth = 1
    ctx.stroke()
  }

  function drag(e, pointIndex) {
    e = e || window.event
    e.preventDefault()
    var mousePos = { x: e.clientX - canvas.getBoundingClientRect().left, y: e.clientY - canvas.getBoundingClientRect().top }
    console.log(mousePos, 'mousePos')
    // 限制在指定区域内
    if (mousePos.x < 0) {
      mousePos.x = 0
    }
    else if (mousePos.x > 533) {
      mousePos.x = 533
    }
    if (mousePos.y < 0) {
      mousePos.y = 0
    }
    else if (mousePos.y > 300) {
      mousePos.y = 300
    }
    points.value[pointIndex].x = mousePos.x
    points.value[pointIndex].y = mousePos.y
    draw()
  }

  function addDragEvents() {
    var dragEvents = {
      dragStart(e) {
        e = e || window.event
        var target = e.target || e.srcElement
        var pointIndex = parseInt(target.getAttribute('data-point-index'), 10)
        if (isNaN(pointIndex)) { return }
        document.onmouseup = function () {
          document.onmouseup = null
          document.onmousemove = null
        }
        document.onmousemove = function (e) {
          drag(e, pointIndex)
        }
      },
    }

    var pointsElements = document.getElementsByClassName('point')
    for (var i = 0; i < pointsElements.length; i++) {
      pointsElements[i].addEventListener('mousedown', dragEvents.dragStart)
      pointsElements[i].setAttribute('data-point-index', i)
    }
  }

  function init() {
    draw()
    addDragEvents()
  }
  init()
})

const style = ref([
  {
    top: `${points.value[0].y - 5}px`,
    left: `${points.value[0].x - 5}px`,
  },
  {
    top: `${points.value[1].y - 5}px`,
    left: `${points.value[1].x - 5}px`,
  },
  {
    top: `${points.value[2].y - 5}px`,
    left: `${points.value[2].x - 5}px`,
  },
  {
    top: `${points.value[3].y - 5}px`,
    left: `${points.value[3].x - 5}px`,
  },
])

watch(() => points.value, () => {
  style.value = [
    {
      top: `${points.value[0].y - 5}px`,
      left: `${points.value[0].x - 5}px`,
    },
    {
      top: `${points.value[1].y - 5}px`,
      left: `${points.value[1].x - 5}px`,
    },
    {
      top: `${points.value[2].y - 5}px`,
      left: `${points.value[2].x - 5}px`,
    },
    {
      top: `${points.value[3].y - 5}px`,
      left: `${points.value[3].x - 5}px`,
    },
  ]
}, {
  deep: true,
})
</script>

<template>
  <div style="width: 533px;height: 300px;">
    <canvas id="myCanvas" width="533" height="300" class="canvans" />
    <div v-for="(item, index) in points" :key="index" class="point" :style="style[index]" />
  </div>
</template>

<style scoped>
.canvans {
  padding: 0;
  margin: 0;

  /* position: absolute; */

  /* width: 100%;
  height: 100%; */

  /* left: 0;
  top: 0; */
  position: relative;
}

.point {
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 50%;
  background-color: red;
  opacity: 0.5;
  top: 0;
  left: 0;
  z-index: 99;

  &:hover {
    cursor: move;
  }
}
</style>