<template>
  <div ref="pagination">
    <el-row v-if="pageFlag" class="pagination" :class="{'pagination_fixed':fiexd}">
      <el-pagination
        :current-page="defaultPage.pageNo"
        :page-size="defaultPage.pageSize"
        :page-sizes="[10,30, 50,100,300]"
        :total="defaultPage.total"
        background
        layout="total, prev, pager, next,sizes, jumper"
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'TablePage',
  inject: ['tableCrud'],
  data() {
    return {
      fiexd: false,
      defaultPage: {
        total: 0, // 总页数
        pageNo: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      }
    }
  },
  computed: {
    // 是否展示分页
    pageFlag() {
      return this.tableCrud.pageFlag
    }
  },
  created() {
    // 初始化分页
    this.pageInit()
  },
  methods: {
    pageInit() {
      this.defaultPage.total = this.tableCrud.page.total || 0
      this.defaultPage.pageNo = this.tableCrud.page.pageNo || 1
    },
    // 页大小回调
    sizeChange(val) {
      this.tableCrud.page.pageSize = val
      this.tableCrud.pageChange()
    },
    // 根据分页条数设置合适的当前分页
    pageSize() {
      // 向上取整得到页数(总条数 / 页条数) < 当前页
      if (Math.ceil(this.defaultPage.total / this.tableCrud.page.pageSize) < this.tableCrud.page.pageNo) {
        this.tableCrud.page.pageNo--
        this.pageSize()
      }
    },
    // 页码回调
    currentChange(val) {
      this.tableCrud.page.pageNo = val
      this.tableCrud.pageChange()
    }
  }
}
</script>
<style scoped lang="less">
</style>
