<template>
  <el-form :model="model" v-bind="$attrs" ref="formRef">
    <slot />
    <el-form-item v-if="showFooter">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { FormInstance } from 'element-plus'

const props = defineProps<{
  model: any
  showFooter?: boolean
}>()

const emit = defineEmits(['submit', 'reset'])

const formRef = ref<FormInstance>()

const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid) => {
    if (valid) {
      emit('submit', props.model)
    }
  })
}

const handleReset = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
  emit('reset')
}

defineExpose({
  validate: () => formRef.value?.validate(),
  resetFields: () => formRef.value?.resetFields()
})
</script>
