<template>
  <!-- <el-table-column v-bind="column"> -->

  <el-table-column v-bind="column">
    <template v-for="col in column.children">
      <template v-if="col.children">
        <BiColumnGroup
          :key="'g'+column.prop + column.label+col.prop + col.label + '1'"
          v-bind="$attrs"
          :column="col"
        ></BiColumnGroup>
      </template>
      <bi-column
        v-else
        :key="'c'+column.prop + column.label+col.prop + col.label + '1'"
        :column="col"
        v-on="$listeners"
      />
    </template>

  </el-table-column>

  <!-- </el-table-column> -->
</template>

<script>
import BiColumn from './columu.vue'
import CellForced from './forced'

export default {
  name: 'BiColumnGroup',
  components: {
    BiColumn
  },
  props: {
    column: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    column: {
      handler: 'renderColumn',
      immediate: true
    }
  },
  mounted() {},
  methods: {
    renderColumn() {
      const { column } = this

      // 多选：selection / 索引：index / 展开的按钮：expand
      if (column.type) {
        column.renderHeader = CellForced[column.type].renderHeader
        column.render = column.render || CellForced[column.type].renderCell
      }
      // 格式化内容
      if (column.formatter) {
        column.render = (h, scope) => {
          return <span>{scope.column.formatter(scope.row, scope.column, scope.row[scope.column.property], scope.$index)}</span>
        }
      }
      // 渲染成text
      if (!column.render) {
        column.render = (h, scope) => {
          return <span>{scope.row[scope.column.property]}</span>
        }
      }
      if (column.children) {
        return column
      }
      return column
    },

    getColBind(col) {
      const bind = Object.assign({}, this.$attrs, col)
      delete bind.component
      delete bind.listeners
      delete bind.propsHandler
      return bind
    },

    getCptBind({ row, column }, col) {
      const props = { row, col, column }
      const handler = col.propsHandler
      return (handler && handler(props)) || props
    }
  }
}
</script>
