<template>
  <!-- :label="col.label"
    :prop="col.prop"
    :width="col.width"
    :min-width="col.minWidth"
    :fixed="col.fixed" -->
  <el-table-column
    v-bind="col.props"
    :label="col.label"
    :prop="col.prop"
    :class-name="col.prop === 'operation' ? 'no-print' : ''"
    align="center"
  >
    <template v-if="col.children && col.children.length">
      <my-table-column
        v-for="(item, index) of col.children"
        :key="'t-' + (item.prop || index)"
        :field="item"
      />
    </template>
    <template slot-scope="scope">
      <slot v-bind="scope" :name="col.prop">
        <component
          :is="col.slot || 'MyTableField'"
          :field="col"
          :type="col.type"
          :props="col.props"
          :scope="scope"
          :row="scope.row"
          :text="
            scope.row
              | _result(col.prop)
              | fieldsFilters(col.filter, scope.row, scope)
          "
        />
      </slot>
    </template>
  </el-table-column>
</template>

<script>
// import MyTableField from '@/components/MyTableField'
import _ from 'lodash'
import MyTableField from "./MyTableField";
import { fieldsManager } from "../utils";
export default {
  name: "MyTableColumn",
  components: { MyTableField },
  filters: {
    _result: _.result,
    fieldsFilters(value, filter, row, scope) {
      if (!filter) return value;
      return filter(value, row, scope);
    },
  },
  props: {
    field: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    field() {
      this.initField()
    }
  },
  data() {
    return {
      col: {}
    }
  },
  created() {
    this.initField()
  },
  methods: {
    initField() {
      const { children = [] } = this.field
      this.col = { ...this.field, children: fieldsManager(children)}
    },
  }
};
</script>
