<script setup lang="ts">
import type { PropType } from 'vue'
import type { BasicForm } from '@/types/form'

const props = defineProps({
  formConfig: {
    required: true,
    type: Object as PropType<BasicForm>
  },
  formData: {
    required: true,
    type: Object
  }
})

const formData = computed(() => {
  if (props.formData.id) {
    return props.formData
  } else {
    const res = props.formData
    props.formConfig?.formItems.forEach(item => {
      res[item.name] = item.value
    })
    return res
  }
})

// !props.formData.id &&
//   props.formConfig?.formItems.forEach(item => {
//     props.formData[item.name] = item.value
//   })
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="item.span || formConfig.span || 12" v-for="(item, index) in formConfig.formItems" :key="index">
      <el-form-item :label="item.label" :rules="item.rules" :prop="item.name">
        <form-comp :item="item" v-model="formData[item.name]"></form-comp>
      </el-form-item>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped></style>
