<template>
  <div>
    <ul>
      <li v-for="(point, index) in points" :key="index">
        点位 {{ index + 1 }}: ({{ point.x }}, {{ point.y }})
        <button @click="movePoint(index)">移动</button>
        <button @click="deletePoint(index)">删除</button>
      </li>
    </ul>
    <button @click="addPoint">新增点位</button>
    <button @click="undo" :disabled="historyIndex === 0">撤回</button>
    <button @click="redo" :disabled="historyIndex === history.length - 1">重做</button>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

// 初始化点位数据
const points = reactive([
  { x: 10, y: 20 },
  { x: 30, y: 40 }
])

// 操作历史记录
const history = reactive([[...points]])
// 历史记录指针
const historyIndex = ref(0)

// 新增点位方法
const addPoint = () => {
  const newPoint = { x: Math.random() * 100, y: Math.random() * 100 }
  points.push(newPoint)
  updateHistory()
}

// 移动点位方法
const movePoint = (index) => {
  points[index].x = Math.random() * 100
  points[index].y = Math.random() * 100
  updateHistory()
}

// 删除点位方法
const deletePoint = (index) => {
  points.splice(index, 1)
  updateHistory()
}

// 更新历史记录
const updateHistory = () => {
  // 如果已经进行了撤回操作，移除撤回之后的历史记录
  if (historyIndex.value < history.length - 1) {
    history.splice(historyIndex.value + 1)
  }
  // 保存当前状态到历史记录
  history.push([...points])
  // 更新历史记录指针
  historyIndex.value++
}

// 撤回操作
const undo = () => {
  if (historyIndex.value > 0) {
    historyIndex.value--
    // 恢复到上一个状态
    points.splice(0, points.length, ...history[historyIndex.value])
  }
}

// 重做操作
const redo = () => {
  if (historyIndex.value < history.length - 1) {
    historyIndex.value++
    // 恢复到下一个状态
    points.splice(0, points.length, ...history[historyIndex.value])
  }
}
</script>
