<template>
  <el-form ref="formRef" :model="modelValue" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
    <el-row :gutter="gutter">
      <form-items-renderer v-model="modelValue" :options="options" :span="span">
        <template v-for="(_, name) in slots" :key="name" #[name]="slotProps">
          <slot :name="name" v-bind="slotProps" />
        </template>
      </form-items-renderer>
    </el-row>
  </el-form>
</template>

<script setup>
import { useSlots, useTemplateRef } from "vue";
import FormItemsRenderer from "./form_items_renderer.vue";
import { ElForm, ElRow } from "element-plus";
import "element-plus/es/components/form/style/css";
import "element-plus/es/components/row/style/css";

const slots = useSlots();
defineOptions({
  name: "AppFormBuilder",
});
defineProps({
  options: { type: Array, required: true },
  rules: { type: Object, default: () => ({}) },
  gutter: { type: Number, default: 24 },
  span: { type: Number, default: 0 },
  labelWidth: { type: [Number, String], default: "120px" },
  labelPosition: { type: String, default: "right" },
  autoGenerateRequired: { type: Boolean, default: true },
});
const modelValue = defineModel({ type: Object, required: true });
const formRef = useTemplateRef("formRef");
defineExpose({
  validate: (callback) => formRef.value.validate(callback),
  resetFields: () => formRef.value.resetFields(),
});
</script>

<style scoped lang="scss"></style>
