<template>
  <template v-if="!config.slot && checkLayout(config)">
    <DynamicLayout :config="config">
      <DynamicFormItem v-for="(item, index) in config.children" :key="index" :config="item" />
    </DynamicLayout>
  </template>
  <template v-if="!config.slot && !checkLayout(config)">
    <el-col :span="config.span">
      <el-form-item :label="config.label" :prop="config.prop">
        <DynamicControl style="width: 100%" :config="config" />
      </el-form-item>
     </el-col>
  </template>
  <template v-if="config.slot">
    <slot />
  </template>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import DynamicLayout from './DynamicLayout.vue';
import DynamicControl from './DynamicControl.vue';

const layoutTypes = ['card', 'block', 'row']
const checkLayout = (config) => {
  return layoutTypes.includes(config?.type)
};

const props = defineProps({
  config: {
    type: Object,
    default: () => ({})
  }
})

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