<template>
  <ul class="drag-area" ref="el" style="margin: 0;">
    <li v-for="el in modelValue" :key="el.name">
      <div style="min-width: fit-content;border: 1px solid red;">
        <p>{{ el.name }}:{{ el.id }}</p>
      </div> 
      <nested-function v-model="el.children" />
    </li>
  </ul>
</template>
<script setup lang="ts">
import { useDraggable} from 'vue-draggable-plus'
import { computed, ref } from 'vue'
import { IPageComponent } from '../type/IPageComponent'

interface Props {
  modelValue: IPageComponent[]
}

const props = defineProps<Props>()
interface Emits {
  (e: 'update:modelValue', value: IPageComponent[]): void
}
const emits = defineEmits<Emits>()
const list = computed({
  get: () => props.modelValue,
  set: value => emits('update:modelValue', value)
})

const el = ref()
useDraggable(el, list, {
  group: 'designer',
  animation: 150,
  onStart() {
    console.log('start')
  },
  onUpdate() {
    console.log('update list')
  },
  onAdd: () => {
    // console.log(e)
    console.log('add list')
  },
  onRemove: () => {
    console.log('remove list')
  }
},)
</script>
<style scoped>
.drag-area {
  min-height: 50px;
  outline: 1px dashed;
  background-color: hsl(0, 0%, 100%);
}
</style>