import Table from './Table.vue';

export default {
  name: 'md-table',
  props: {
    data: {
      type: Array,
      default: function() {
        return [];
      },
    },

    size: String,

    width: [String, Number],

    height: [String, Number],

    maxHeight: [String, Number],

    fit: {
      type: Boolean,
      default: true,
    },

    stripe: Boolean,

    border: Boolean,

    rowKey: [String, Function],

    context: {},

    showHeader: {
      type: Boolean,
      default: true,
    },

    showSummary: Boolean,

    sumText: String,

    summaryMethod: Function,

    rowClassName: [String, Function],

    rowStyle: [Object, Function],

    cellClassName: [String, Function],

    cellStyle: [Object, Function],

    headerRowClassName: [String, Function],

    headerRowStyle: [Object, Function],

    headerCellClassName: [String, Function],

    headerCellStyle: [Object, Function],

    highlightCurrentRow: Boolean,

    currentRowKey: [String, Number],

    emptyText: String,

    expandRowKeys: Array,

    defaultExpandAll: Boolean,

    defaultSort: Object,

    tooltipEffect: String,

    spanMethod: Function,

    selectOnIndeterminate: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      maxWrapHeight: 0,
      eventNames: [
        'select',
        'select-all',
        'selection-change',
        'cell-mouse-enter',
        'cell-mouse-leave',
        'cell-click',
        'cell-dblclick',
        'row-click',
        'row-contextmenu',
        'row-dblclick',
        'header-click',
        'header-contextmenu',
        'sort-change',
        'filter-change',
        'current-change',
        'header-dragend',
        'expand-change',
      ],
      eventListeners: {},
    };
  },
  created() {
    const eventListeners = {};
    this.eventNames.map(name => {
      eventListeners[name] = (...args) => this.eventHandle(name, ...args);
    });
    this.eventListeners = eventListeners;
  },
  mounted() {
    this.updateHeight();
    addEventListener('resize', this.updateHeight);
  },
  destroyed() {
    removeEventListener('resize', this.updateHeight);
  },
  methods: {
    updateHeight() {
      let tableWrapDom = document.querySelector('.table-wrap');
      this.maxWrapHeight = tableWrapDom.offsetHeight;
    },
    eventHandle(evenName, ...args) {
      this.$emit(evenName, ...args);
    },
  },
  render(h) {
    const { maxHeight, maxWrapHeight, eventListeners } = this;
    const eventHandle = {
      on: { ...eventListeners },
    };
    return maxHeight ? (
      <Table
        {...eventHandle}
        maxHeight={this.maxHeight}
        data={this.data}
        size={this.size}
        width={this.width}
        height={this.height}
        fit={this.fit}
        stripe={this.stripe}
        border={this.border}
        rowKey={this.rowKey}
        context={this.context}
        showHeader={this.showHeader}
        showSummary={this.showSummary}
        sumText={this.sumText}
        summaryMethod={this.summaryMethod}
        rowClassName={this.rowClassName}
        rowStyle={this.rowStyle}
        cellClassName={this.cellClassName}
        cellStyle={this.cellStyle}
        headerRowClassName={this.headerRowClassName}
        headerRowStyle={this.headerRowStyle}
        headerCellClassName={this.headerCellClassName}
        headerCellStyle={this.headerCellStyle}
        highlightCurrentRow={this.highlightCurrentRow}
        currentRowKey={this.currentRowKey}
        emptyText={this.emptyText}
        expandRowKeys={this.expandRowKeys}
        defaultExpandAll={this.defaultExpandAll}
        defaultSort={this.defaultSort}
        tooltipEffect={this.tooltipEffect}
        spanMethod={this.spanMethod}
        selectOnIndeterminate={this.selectOnIndeterminate}>
        {this.$slots.default}
      </Table>
    ) : maxWrapHeight ? (
      <Table
        {...eventHandle}
        maxHeight={this.maxWrapHeight}
        data={this.data}
        size={this.size}
        width={this.width}
        height={this.height}
        fit={this.fit}
        stripe={this.stripe}
        border={this.border}
        rowKey={this.rowKey}
        context={this.context}
        showHeader={this.showHeader}
        showSummary={this.showSummary}
        sumText={this.sumText}
        summaryMethod={this.summaryMethod}
        rowClassName={this.rowClassName}
        rowStyle={this.rowStyle}
        cellClassName={this.cellClassName}
        cellStyle={this.cellStyle}
        headerRowClassName={this.headerRowClassName}
        headerRowStyle={this.headerRowStyle}
        headerCellClassName={this.headerCellClassName}
        headerCellStyle={this.headerCellStyle}
        highlightCurrentRow={this.highlightCurrentRow}
        currentRowKey={this.currentRowKey}
        emptyText={this.emptyText}
        expandRowKeys={this.expandRowKeys}
        defaultExpandAll={this.defaultExpandAll}
        defaultSort={this.defaultSort}
        tooltipEffect={this.tooltipEffect}
        spanMethod={this.spanMethod}
        selectOnIndeterminate={this.selectOnIndeterminate}>
        {this.$slots.default}
      </Table>
    ) : null;
  },
};
