<script setup lang="ts">
import { FormKitNode } from '@formkit/core';
import { FormKitMessages } from '@formkit/vue'
import { onMounted, ref } from 'vue';

const listRef = ref<{ node: FormKitNode }>()
onMounted(() => {
  const listNode = listRef.value?.node
  console.debug(`listNode :>> `, listNode);
  setTimeout(() => {
    listNode;
  }, 1000);
})
</script>

<template>
  <FormKit
    ref="listRef"
    type="list"
    name="guests"
    label="客人列表"
    :value="[{}]"
    dynamic
    validation="required"
    #default="{ items, node, value }"
  >
    <div
      class="attributes-group"
      v-auto-animate="{ duration: 500 }"
    >
      <FormKitMessages />
      <FormKit
        type="group"
        v-for="(item, index) in items"
        :key="item"
        :index="index"
      >
        <div class="list-group-item">
          <FormKit
            type="text"
            name="name"
            label="客人姓名"
            placeholder="客人姓名"
            validation="required"
            value="默认值"
          >
          </FormKit>
          <FormKit
            type="number"
            name="age"
            label="客人年龄"
          />
          <button
            type="button"
            class="border border-blue-600 text-blue-600 p-3"
            @click="() => node.remove(node.children[index])"
          >
            - 移除
          </button>
        </div>
      </FormKit>
      <button
        type="button"
        @click="() => node.input(value?.concat({}))"
        class="border border-blue-600 text-blue-600 p-3 mb-4"
      >
        + 添加另一个
      </button>
      <pre wrap>{{ value }}</pre>

    </div>
  </FormKit>
</template>

<style scoped>
.list-group-item {
  position: relative;
  padding: 10px;
  border: 1px solid grey;
  border-radius: 10px;
  margin-bottom: 5px;
}

.list-group-item button {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>