<template>
  <div class="table-wrapper">

    <!-- 表格 -->
    <el-table :data="data" class="table"
      :header-cell-style="{ background: '#F2F4F6', color: '#333', 'text-align': 'center' }"
      :cell-style="{ color: '#666', 'font-size': '13px', 'text-align': 'center' }" v-bind="tableProps"
      @sort-change="onSortChange">
      <el-table-column v-for="column in columns" :key="column.prop" v-bind="column">
        <template slot-scope="scope" >
          <span v-if="column.needSlot">
            <slot :row="scope.row" :col="column" :data="scope.row[column.prop]" />
          </span>
          <span v-else-if="!column.prop">
            {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
          </span>
          <span v-else>{{ scope.row[column.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="page">
      <!-- 分页 -->
      <el-pagination v-if="isShowPage" background layout="total, prev, pager, next, sizes, jumper" :total="total"
        :page-size="pageSize" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" @current-change="onPageChange"
        @size-change="onPageSizeChange" />
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  props: {
    // element table支持的props
    tableProps: Object,
    // 为v-model准备的
    // 为.sync准备的
    currentPage: Number,
    data: Array,
    columns: Array,
    total: {
      type: Number,
      default: 0
    },
    // 为.sync准备的
    pageSize: {
      type: Number,
      default: 10
    },
    isShowPage: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 改变分页事件
    onPageChange(currentPage) {
      // 改变props的方法
      this.$emit('update:currentPage', currentPage)
    },
    // 改变分页条数事件
    onPageSizeChange(size) {
      this.$emit('update:pageSize', size)
    },
    onSortChange(column) {
      this.$emit('update:sortBy', column)
    },
  },
}
</script>

<style lang="scss" scoped>
.table-wrapper {
  .table {
    width: 100%;
  }

  .page {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
