<template>
  <el-table-column 
    v-bind="columns"
  >
    <template v-if="columns?.slots?.header" #header>
      <slot :name="columns?.slots?.header"></slot>
    </template>
    <template #default="scope">
      <template v-if="columns.children?.length">
        <fvTableColumn 
          v-for="columnChildren in columns.children"
          :key="columnChildren.prop"
          :columns="columnChildren"
        >
        </fvTableColumn>
      </template>
      <slot v-else-if="columns.slots?.default" :name="columns.slots?.default" v-bind="scope"></slot>
      <component v-else-if="columns?.currentRender" :is="contentRender(columns?.currentRender, scope)"></component>
      <template v-else-if="!['selection', 'index', 'expand'].includes(columns?.type)">
        {{ renderCell(scope) }}
      </template>
    </template>
  </el-table-column>
</template>

<script setup lang="jsx">
import { isVNode } from 'vue'

  defineOptions({
    name: 'fvTableColumn',
    inheritAttrs: false
  })

  const props = defineProps({
    columns: {
      type: Object,
      default: []
    }
  })

  const contentRender = (render, scope) => {
    const content = render({row: unref(scope.row), index: scope.$index})
    return isVNode(content) ? content : <span>{content || '!(^-^)!'}</span>
  }

  const renderCell = ({row, column, $index}) => {
    const property = column.property
    const value = property && row[property]
    if(column && column?.formatter) {
      return column.formatter(row, column, value, $index) || '--'
    }
    return value !== null && value !== undefined ? value.toString() : '--'
  }
</script>

<style lang="scss" scoped>

</style>