<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { BasicForm, FormActionType } from '/@/components/Form';
  import { dataSourceSchema } from '../../config/basicConfiguration';
  import { FrontComponent } from '../../../const/const';

  defineProps<{
    frontId?: FrontComponent;
  }>();

  const formEl = ref<Nullable<FormActionType>>();

  const setFormEl = (el: any) => {
    formEl.value = el;
  };

  const getFieldsValue = () => {
    return unref(formEl)!.getFieldsValue();
  };

  const validate = async () => {
    await unref(formEl)!.validate();
  };

  const setFieldsValue = async (record: Recordable) => {
    await unref(formEl)!.setFieldsValue(record);
  };

  const clearValidate = async (name?: string | string[]) => {
    await unref(formEl)!.clearValidate(name);
  };
  defineExpose({
    formActionType: { getFieldsValue, validate, setFieldsValue, clearValidate },
  });
</script>

<template>
  <div class="w-full flex-1">
    <BasicForm
      :ref="(el) => setFormEl(el)"
      :schemas="dataSourceSchema($props.frontId)"
      class="w-full flex-1 data-source-form"
      :show-action-button-group="false"
      :row-props="{
        gutter: 10,
      }"
      layout="horizontal"
      :label-col="{ span: 0 }"
    />
  </div>
</template>