<template>
  <div v-loading="loading">
    <slot />
    <!-- <el-pagination
      v-if="pagination.total > 0"
      style="text-align:right;margin-top:15px"
      v-bind="paginationBind"
      :current-page="pagination.pageIndex"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="onchange"
      @current-change="showSizeChange"
    /> -->
    <div class="pagesip">
      <el-button
        type="primary"
        size="small"
        style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px"
        @click="jumpFirstPage"
      >首页
      </el-button>
      <el-pagination
        ref="pagination"
        background
        layout="prev, pager, next"
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        v-bind="paginationBind"
        prev-text="上一页"
        next-text="下一页"
        :hide-on-single-page="false"
        @size-change="onchange"
        @current-change="showSizeChange"
      />
      <el-button
        type="primary"
        size="small"
        style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px"
        @click="jumpLastPage"
      >尾页
      </el-button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'VxetableWrapper',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    pagination: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      paginationAttr: {
        pageIndex: 0,
        total: 0,
        pageSize: 10,
        pageSizes: ['10', '30', '50', '100']
      },
      pageIndex: 1,
      pageSize: 10
    }
  },
  computed: {
    paginationBind() {
      return {
        ...this.paginationAttr,
        ...this.pagination
      }
    }
  },
  methods: {
    jumpFirstPage() {
      this.showSizeChange(1)
    },
    jumpLastPage() {
      const total = this.pagination.total
      const pageSize = this.pagination.pageSize
      const cpage = Math.ceil(total / pageSize)
      this.showSizeChange(cpage)
    },
    showSizeChange(pageIndex) {
      this.$emit('change', {
        pageIndex,
        pageSize: this.pageSize
      })
    },
    onchange(pageSize) {
      this.pageSize = pageSize
      this.$emit('change', {
        current: 1,
        pageSize
      })
    }
  }
}
</script>
<style lang="scss">

	.pagesip {
		width: 100%;
		margin: 20px auto;
		padding-right: 50px;
		display: flex;
		// align-items: center;
		justify-content: flex-end;
	}

	.el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #d8ab5a;
	}

	.el-col {
		margin-bottom: 20px;
	}
	.btn{
		padding: 20px;
	}
</style>
