<template>
  <div class="dynamic-detail">
    <template v-for="(config, configIndex) in configList" :key="configIndex">
      <DynamicDetailItem :config="config" />
    </template>
  </div>
</template>
<script setup>
import { onMounted, watch, ref, provide, computed } from 'vue'
import DynamicDetailItem from './DynamicDetailItem.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>
