<template>
  <template v-if="config.type == 'card'">
    <el-card>
      <template #header>
        <div class="section-header">
          <span class="section-title">{{ config.label }}</span>
        </div>
      </template>
      <slot />
    </el-card>
  </template>
  <template v-else-if="config.type == 'block'">
    <BlockItem :title="config.label">
      <slot />
    </BlockItem>
  </template>
  <template v-else-if="config.type == 'row'">
    <el-row v-bind="config.componentProps">
      <slot />
    </el-row>
  </template>
  <template v-else-if="config.type == 'col'">
    <el-col v-bind="config.componentProps">
      <slot />
    </el-col>
  </template>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import BlockItem from './BlockItem.vue';

const props = defineProps({
  config: {
    type: Object,
    default: () => ({})
  },
})
</script>
<style scoped lang="scss"></style>
