<template>
  <!-- 递归 el-table-column by zhao -->
  <!-- children: 数组|null 子项, 属性同el-table-column -->
  <!-- inheritProps: bool|数组 是否继承父级属性|指定继承属性名称 -->
  <!-- keyGenerator: function 子项循环key生成函数: 不指定key, 重新渲染会有问题, 最根项的key在外部指定, 子项也可以自行指定key值 -->
  <el-table-column
    :label="label"
    :header-align="headerAlign"
    :prop="prop"
    :align="align"
    :class-name="className"
    :label-class-name="labelClassName"
    :property="property"
    :width="width"
    :min-width="minWidth"
    :renderHeader="renderHeader"
    :sortable="sortable"
    :sortMethod="sortMethod"
    :sortBy="sortBy"
    :resizable="resizable"
    :columnKey="columnKey"
    :showTooltipWhenOverflow="showTooltipWhenOverflow"
    :showOverflowTooltip="showOverflowTooltip"
    :fixed="fixed"
    :formatter="formatter"
    :selectable="selectable"
    :reserveSelection="reserveSelection"
    :filterMethod="filterMethod"
    :filteredValue="filteredValue"
    :filters="filters"
    :filterPlacement="filterPlacement"
    :filterMultiple="filterMultiple"
    :index="index"
    :sortOrders="sortOrders"
  >
    <template v-if="hasChildren()">
      <el-table-column_r v-for="(item, index) in children"
        :label="getChildProp(item.label, label, 'label')"
        :header-align="getChildProp(item.headerAlign, headerAlign, 'headerAlign')"
        :prop="getChildProp(item.prop, prop, 'prop')"
        :align="getChildProp(item.align, align, 'align')"
        :class-name="getChildProp(item.className, className, 'className')"
        :label-class-name="getChildProp(item.labelClassName, labelClassName, 'labelClassName')"
        :property="getChildProp(item.property, property, 'property')"
        :width="getChildProp(item.width, width, 'width')"
        :min-width="getChildProp(item.minWidth, minWidth, 'minWidth')"
        :renderHeader="getChildProp(item.renderHeader, renderHeader, 'renderHeader')"
        :sortable="getChildProp(item.sortable, sortable, 'sortable')"
        :sortMethod="getChildProp(item.sortMethod, sortMethod, 'sortMethod')"
        :sortBy="getChildProp(item.sortBy, sortBy, 'sortBy')"
        :resizable="getChildProp(item.resizable, resizable, 'resizable')"
        :columnKey="getChildProp(item.columnKey, columnKey, 'columnKey')"
        :showTooltipWhenOverflow="getChildProp(item.showTooltipWhenOverflow, showTooltipWhenOverflow, 'showTooltipWhenOverflow')"
        :showOverflowTooltip="getChildProp(item.showOverflowTooltip, showOverflowTooltip, 'showOverflowTooltip')"
        :fixed="getChildProp(item.fixed, fixed, 'fixed')"
        :formatter="getChildProp(item.formatter, formatter, 'formatter')"
        :selectable="getChildProp(item.selectable, selectable, 'selectable')"
        :reserveSelection="getChildProp(item.reserveSelection, reserveSelection, 'reserveSelection')"
        :filterMethod="getChildProp(item.filterMethod, filterMethod, 'filterMethod')"
        :filteredValue="getChildProp(item.filteredValue, filteredValue, 'filteredValue')"
        :filters="getChildProp(item.filters, filters, 'filters')"
        :filterPlacement="getChildProp(item.filterPlacement, filterPlacement, 'filterPlacement')"
        :filterMultiple="getChildProp(item.filterMultiple, filterMultiple, 'filterMultiple')"
        :index="getChildProp(item.index, index, 'index')"
        :sortOrders="getChildProp(item.sortOrders, sortOrders, 'sortOrders')"
        :key="getChildProp(item.key, keyGenerator(item, index))"

        :inherit-props="getChildProp(item.inheritProps, inheritProps, 'inheritProps')"
        :key-generator="getChildProp(item.keyGenerator, keyGenerator, 'keyGenerator')"
        :children="item.children"
      >
      </el-table-column_r>
    </template>
  </el-table-column>
</template>

<script>

import {camelCase} from "@/utils";

export default {
  name: "el-table-column_r",
  props: {
    type: {
      type: String,
      default: 'default'
    },
    label: String,
    className: String,
    labelClassName: String,
    property: String,
    prop: String,
    width: {},
    minWidth: {},
    renderHeader: Function,
    sortable: {
      type: [Boolean, String],
      default: false
    },
    sortMethod: Function,
    sortBy: [String, Function, Array],
    resizable: {
      type: Boolean,
      default: true
    },
    columnKey: String,
    align: String,
    headerAlign: String,
    showTooltipWhenOverflow: Boolean,
    showOverflowTooltip: Boolean,
    fixed: [Boolean, String],
    formatter: Function,
    selectable: Function,
    reserveSelection: Boolean,
    filterMethod: Function,
    filteredValue: Array,
    filters: Array,
    filterPlacement: String,
    filterMultiple: {
      type: Boolean,
      default: true
    },
    index: [Number, Function],
    sortOrders: {
      type: Array,
      default: function _default() {
        return ['ascending', 'descending', null];
      },
      validator: function validator(val) {
        return val.every(function (order) {
          return ['ascending', 'descending', null].indexOf(order) > -1;
        });
      }
    },

    children: {},
    inheritProps: {
      type: [Boolean, Array],
      default: true
    },
    keyGenerator: {
      type: Function,
      default: function(item, index) {
        return JSON.stringify(item) + '_' + index + '_' + Date.now() + Math.random();
      },
    }
  },
  methods: {
    hasChildren() {
      return(Array.isArray(this.children) && this.children.length > 0);
    },
    getChildProp(childProp, parentProp, propName) {
      if(childProp !== undefined)
        return childProp;
      if(propName)
      {
        if(typeof(this.inheritProps) === 'boolean')
        {
          if(this.inheritProps)
            return parentProp;
        }
        else if(Array.isArray(this.inheritProps))
        {
          return this.inheritProps.findIndex((x) => camelCase(x) === propName) !== -1;
        }
        else
          return undefined;
      }
      else
        return parentProp;
    },
  },
}
</script>

<style scoped>

</style>
