<script setup>
import draggable from 'vuedraggable'
import {onUpdated, ref} from "vue";
// import ListItem from "@/components/ListItem.vue";

const props = defineProps({
  todo: Array
})
const emit = defineEmits(['updateTodo'])

const todoList = ref(props.todo)

const handleChange = () => {
  emit('updateTodo', todoList.value)
}

const handleClick = (index) => {
  const data = todoList.value.splice(index, 1)
  emit('updateTodo', todoList.value, data[0])
}

</script>

<template>
  <div class="basis-1/4">
    <h2 class="text-xl text-center">事件库</h2>
    <draggable :list="todoList"
               class="list-group"
               group="events"
               itemKey="id"
               @change="handleChange">
      <template #item="{ element, index }">
        <div class="list-group-item text-center bg-slate-400" @click="() => handleClick(index)">{{ element.title }}</div>
      </template>
    </draggable>
  </div>
</template>

<style scoped>

</style>