<template>
  <template v-if="isShow() && !config.slot && checkLayout(config)">
    <DynamicLayout :config="config">
      <DynamicDetailItem v-for="(item, index) in config.children" :key="index" :config="item" />
    </DynamicLayout>
  </template>
  <template v-if="isShow() && !config.slot && !checkLayout(config)">
    <el-col class="col-item" :span="config.span">
      <DynamicData style="width: 100%" :config="config" />
    </el-col>
  </template>
  <template v-if="isShow() && config.slot">
    <slot />
  </template>
</template>
<script setup>
import { onMounted, ref , inject} from 'vue'
import DynamicLayout from './DynamicLayout.vue'
import DynamicData from './DynamicData.vue'

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

const formData = inject('formData')

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

const isShow = () => {
  if(props.config.show === false) return false
  if(typeof props.config.show === 'function') return props.config.show(formData)
  return true
}
</script>
<style scoped lang="scss">
.col-item {
  margin-bottom: 10px;
}
</style>
