<template>
  <el-table-column
    v-if="!hiddenCol"
    :type="type"
    :align="align"
    :prop="prop"
    :label="label"
    :width="width"
    :sortable="columnSortable"
    :filters="filters"
    :column-key="prop"
    :formatter="columnFormatter"
    :render-header="columnRenderHeader"
    :show-overflow-tooltip="showOverflowTooltip"
    :fixed="fixed"
  ></el-table-column>
</template>
<script>
export default {
  name: "ht-table-column",
  props: {
    type: {
      type: String,
      validator: val => {
        return ["selection", "index", "expand"].indexOf(val) !== -1;
      }
    },
    align: {
      default: "center",
      validator: val => {
        return ["left", "center", "right"].indexOf(val) !== -1;
      }
    },
    prop: String,
    label: String,
    width: String,
    sortable: {
      type: Boolean,
      default: false
    },
    filters: Array,
    showOverflowTooltip: {
      type: Boolean,
      default: false
    },
    fixed: {
      type: [Boolean, String],
      default: false,
      validator: val => [true, false, "left", "right"].indexOf(val) != -1
    },
    formatter: Function,
    renderHeader: Function,
    hidden: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      hiddenCol: this.hidden,
      _formatter: null,
      _renderHeader: null
    };
  },
  computed: {
    columnSortable: {
      get() {
        return this.sortable ? "custom" : this.sortable;
      }
    },
    columnFormatter: {
      get() {
        if (this.formatter || this._formatter || !this.$scopedSlots.default) {
          return this.formatter ? this.formatter : this._formatter;
        } else {
          this._formatter = (row, column, cellValue, index) => {
            return this.$scopedSlots.default({ row, column, cellValue, index });
          };
          return this._formatter;
        }
      }
    },
    columnRenderHeader: {
      get() {
        if (
          this.renderHeader ||
          this._renderHeader ||
          !this.$scopedSlots.header
        ) {
          return this.renderHeader ? this.renderHeader : this._renderHeader;
        } else {
          const headerCB = this.$scopedSlots.header;
          this._renderHeader = (h, { column, $index }) => {
            return headerCB({ column, $index });
          };
          return this._renderHeader;
        }
      }
    }
  }
};
</script>