<script setup lang="ts">
import { basicFormProps } from "./types";
import FormItems from "./form-items.vue";
import { useVModel } from "@vueuse/core";

const props = defineProps(basicFormProps);

const formData = useVModel(props, "formData");
</script>

<template>
  <template v-for="(item, index) in formGroup!" :key="index">
    <el-col :span="24" v-if="!divider">
      <h1 class="font-500 text-lg py-2">{{ item.title }}</h1>
    </el-col>

    <FormItems
      :form-items="item.formItems!"
      :form-data="formData"
      :col-layout="colLayout"
      :contact="contact"
    />

    <div
      v-if="divider && formGroup.length - 1 !== index"
      class="bg-[#dcdfe6] h-[1px]"
      w-full
      my-5
    />
  </template>
</template>
