<template>
  <div class="jc-rich-table">
    <div class="jc-rich-table__header-wrapper">
      <slot name="header"></slot>
    </div>
    <div>
      <el-table ref="internalTable" :data="tableData" :width="width" :height="height" :max-height="maxHeight" :fit="fit" :stripe="stripe" :border="border" :row-key="rowKey" :context="context" :show-header="showHeader" :show-summary="showSummary" :sum-text="sumText" :summary-method="summaryMethod" :row-class-name="rowClassName" :row-style="rowStyle" :highlight-current-row="highlightCurrentRow" :current-row-key="currentRowKey" :empty-text="emptyText" :expand-row-keys="expandRowKeys" :default-expand-all="defaultExpandAll" :default-sort="defaultSort" :tooltip-effect="tooltipEffect" v-on="$listeners">
        <slot></slot>
      </el-table>
    </div>
    <div class="jc-rich-table__footer-wrapper">
      <slot name="footer"></slot>
      <el-pagination class="jc-rich-table__footer-pagi" v-show="data.length" :page-size="pageSize" :small="small" :total="data.length" :current-page.sync="pagiCurrentPage" :layout="layout" :page-sizes="pageSizes" @current-change="handleCurrentChange" @size-change="handleSizeChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ElTable from 'element-ui/packages/table';
import ElPagination from 'element-ui/packages/pagination';

export default {
  name: 'JcRichTable',

  components: [ElTable, ElPagination],

  props: {
    // pagination
    pageSize: {
      type: Number,
      default: 10
    },

    small: Boolean,

    currentPage: {
      type: Number,
      default: 1
    },

    layout: {
      default: 'total, sizes, prev, pager, next, jumper'
    },

    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 50];
      }
    },

    // table
    data: {
      type: Array,
      default: function() {
        return [];
      }
    },

    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],

    highlightCurrentRow: Boolean,

    currentRowKey: [String, Number],

    emptyText: String,

    expandRowKeys: Array,

    defaultExpandAll: Boolean,

    defaultSort: Object,

    tooltipEffect: String
  },
  data() {
    return {
      internalCurrentPage: 1,
      pagiCurrentPage: 1,
      internalPageSize: 0
    };
  },
  methods: {
    // pagination
    handleCurrentChange(val) {
      console.log('cur:' + val);
      this.internalCurrentPage = val;
      this.$emit('update:currentPage', val);
      this.$emit('pagi-current-change', val);
    },
    handleSizeChange(val) {
      this.internalPageSize = val;
      this.$emit('pagi-size-change', val);
    },
    setCurrentRow(row) {
      this.$refs.internalTable.setCurrentRow(row);
    },
    toggleRowSelection(row, selected) {
      this.$refs.internalTable.toggleRowSelection(row, selected);
    },
    clearSelection() {
      this.$refs.internalTable.clearSelection();
    }
  },
  computed: {
    tableData() {
      const pageSize = this.internalPageSize;
      const currentPage = this.internalCurrentPage;
      const data = this.data;
      if (!pageSize) {
        return [];
      }
      const l = (currentPage - 1) * pageSize;
      const r = Math.min(data.length, l + pageSize);
      return data.slice(l, r);
    }
  },
  watch: {
    pageSize: {
      immediate: true,
      handler(val) {
        this.internalPageSize = val;
      }
    },
    currentPage: {
      immediate: true,
      handler(val) {
        this.pagiCurrentPage = val;
      }
    }
  }
};
</script>
