<template>
  <!-- <div>
    <xy-render-comp
      v-for="(comp, index) in itemChildren"
      :key="index"
      :create-element-func="getChildrenColumns(comp)"
    />
  </div>-->
  <el-table-column
    :type="itemChildren.type"
    :index="itemChildren.index"
    :column-key="itemChildren.columnKey"
    :label="itemChildren.label"
    :prop="itemChildren.prop"
    :width="itemChildren.width"
    :min-width="itemChildren['min-width'] || itemChildren.minWidth || 160"
    :fixed="itemChildren.fixed"
    :render-header="itemChildren.renderHeader || (itemChildren.headerRequired && renderHeader)"
    :sortable="itemChildren.sortable ? itemChildren.sortable : false"
    :sort-method="itemChildren.sortMethod"
    :sort-by="itemChildren.sortBy"
    :sort-orders="itemChildren.sortOrders || ['ascending', 'descending', null]"
    :resizable="itemChildren.resizable ? itemChildren.resizable : true"
    :show-overflow-tooltip="itemChildren.showOverflowTooltip ? itemChildren.showOverflowTooltip : false"
    :align="itemChildren.align || 'center'"
    :header-align="itemChildren.headerAlign"
    :class-name="itemChildren.className"
    :label-class-name="itemChildren.labelClassName"
    :selectable="itemChildren.selectable"
    :reserve-selection="itemChildren.reserveSelection ? itemChildren.reserveSelection : false"
    :filters="itemChildren.filters"
    :filter-placement="itemChildren.filterPlacement"
    :filter-multiple="itemChildren.filterMultiple ? itemChildren.filterMultiple : true"
    :filter-method="itemChildren.filterMethod"
    :filtered-value="itemChildren.filteredValue"
  >
    <template slot-scope="scope">
      <template v-if="itemChildren.slotName">
        <slot :name="itemChildren.slotName" :scope="scope" />
      </template>
      <template
        v-if="!itemChildren.slotName && itemChildren.formatter"
      >{{ itemChildren.formatter(scope.row, scope.column, scope.$index) }}</template>
      <template v-if="!itemChildren.slotName && !itemChildren.formatter">{{ scope.row[itemChildren.prop] }}</template>
    </template>

    <template v-if="itemChildren.children && itemChildren.children.length > 0">
      <children-column v-for="(item2, index2) in itemChildren.children" :key="index2" :item-children="item2" />
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: 'ChildrenColumn',
  props: {
    itemChildren: {
      type: Object,
      default: () => { }
    }
  },
  methods: {
    getChildrenColumns(item) {
      return () => <el-table-column
        prop={item.prop}
        label={item.label}
        min-width={item.minWidth || '160'}
        align={item.align || 'center'}
      ></el-table-column>
    }
  }
}
</script>

<style>
</style>
