<script setup lang="ts">
import { computed, unref } from 'vue'
import type { RuleError } from 'ant-design-vue/lib/form/interface'
import { formSchemas } from './config'
import { FormLayoutEnum } from '@/components/Form/src/enum'
import { BasicForm, useForm } from '@/components/Form'

export interface ComponentExposeType {
  getFieldsValue: () => any
  setFieldsValue: (value: any) => void
  validate: () => Promise<RuleError | any>
}

const props = defineProps<{ componentKey?: string }>()
defineEmits(['fieldValueChange'])

const getComponentKey = computed(() => {
  return props.componentKey
})

const [registerForm, formActionType] = useForm({
  schemas: formSchemas(unref(getComponentKey)),
  showActionButtonGroup: false,
  layout: FormLayoutEnum.HORIZONTAL,
  labelWidth: 70,
})

const getFieldsValue = () => {
  return formActionType.getFieldsValue()
}

const validate = async () => {
  return await formActionType.validate()
}

const setFieldsValue = (value: Recordable) => {
  formActionType.setFieldsValue(value)
  formActionType.clearValidate()
}

defineExpose<ComponentExposeType>({
  getFieldsValue,
  setFieldsValue,
  validate,
})
</script>

<template>
  <BasicForm @register="registerForm" @field-value-change="$emit('fieldValueChange')" />
</template>