<template>
  <div class="dynamic-form">
    <el-form class="form-wrapper" :model="modelValue" ref="formRef">
      <template v-for="(config, configIndex) in configList" :key="configIndex">
        <DynamicFormItem :config="config" />
      </template>
    </el-form>
  </div>
</template>
<script setup>
import { onMounted, watch, ref, provide } from 'vue'
import DynamicFormItem from './DynamicFormItem.vue'
const props = defineProps({
  configList: {
    type: Array,
    default: () => []
  },
  modelValue: {
    type: Object,
    default: () => {}
  }
})

const computedModelValue = computed(() => {
  return props.modelValue
})

provide('formData', computedModelValue)

const formRef = ref(null)

// 获得默认表单值
const getDefaultFormValue = () => {
  const form = {}
  props.formConfig.forEach((config) => {
    form[config.name] = config.default !== undefined ? config.default : ''
  })
  return form
}

defineExpose({
  getDefaultFormValue,
  formComponent: formRef.value
})
</script>
<style scoped lang="scss">
.form-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
</style>
