<template>
  <el-table-column v-bind="mergedColumnAttrs">
    <template v-if="column.slotHeader" #header="headerScope">
      <slot :name="column.slotHeader" v-bind="{ ...headerScope, columnDef: column, display: column.label}">
        {{ column.label }}
      </slot>
    </template>
    <template v-if="column.slotBody" #default="scope">
      <slot :name="column.slotBody" v-bind="{...scope, columnDef: column, display: scope.row[column.prop]}">
        {{ scope.row[column.prop] }}
      </slot>
    </template>
    <dynamic-table-column v-for="child in visibleChildren" :key="child.prop" :column="child"
                          :default-setting="defaultSetting">
      <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
        <slot :name="slot" v-bind="scope">
          {{ scope.display }}
        </slot>
      </template>
    </dynamic-table-column>
  </el-table-column>
</template>

<script>
export default {
  name: 'dynamic-table-column',
  props: {
    column: { type: Object, default: () => ({ prop: '', slotBody: '', slotHeader: '', children: [] }) },
    defaultSetting: { type: Object, default: () => ({}) }
  },
  computed: {
    mergedColumnAttrs() {
      return { ...this.defaultSetting, ...this.column }
    },
    visibleChildren() {
      return this.column.children?.filter(child => child.hidden !== true) || []
    }
  }
}
</script>

<style scoped>

</style>
