<script lang="ts">
import hwInput from './elements/hw-input.vue';
import hwInputNumber from './elements/hw-input-number.vue';
import hwTable from './elements/hw-table.vue';
import hwForm from './elements/hw-form.vue';
import hwChart from './elements/hw-chart.vue';
import hwSlider from './elements/hw-slider.vue';
import hwRadioGroup from './elements/hw-radio-group.vue';

export default {
  name: 'nested-draggable',
  components: {
    hwInput,
    hwInputNumber,
    hwTable,
    hwForm,
    hwChart,
    hwSlider,
    hwRadioGroup
  }
};
</script>
<template>
  <draggable
    class="dragArea"
    style="height: 100%"
    :list="tasks"
    :group="{ name: 'list' }"
    item-key="name"
    @change="changeCB"
    :move="onMove"
  >
    <template #item="{ element }">
      <div style="margin-bottom: 10px;">
        <component :is="element.type" :options="element.options" :tasks="element.tasks" :formData="formData" />
      </div>
    </template>
  </draggable>
</template>
<script lang="ts" setup>
import draggable from 'vuedraggable';


const props = defineProps({
  tasks: Array,
  formData: Object
});


const { tasks, formData } = toRefs(props);

const changeCB = (e) => {
  if (e.added) {
    tasks.value[e.added.newIndex].id = Date.now();
  }
  if (e.moved) {
    tasks.value[e.moved.newIndex].id = Date.now();
  }
};
const onMove = (e) => {
  console.log('move', e);
};
</script>
<style scoped>
</style>
