<template>
  <div class="pagination">
    <el-pagination
      :current-page="Data.currentPage"
      :page-size="Data.page_size"
      :page-sizes="PagesSize"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="CurrentFunc"
      @size-change="SizeFunc"
      :page-count="Data.page_count"
      :total="Data.total"
    />
  </div>
</template>
<script>
export default {
  props: {
    Data: {
      type: Object,
      default: () => ({
        currentPage: 1,
        page_size: 10,
        total: 0
      })
    },
    PagesSize: {
      type: Array,
      default: () => ([10, 20, 30, 40, 50, 100])
    }
  },
  data () {
    return {
      page_size: 10
    }
  },
  updated () {
    this.page_size = this.Data.page_size;
  },
  methods: {
    SizeFunc (data) {
      this.page_size = data;
      this.CurrentFunc(this.Data.currentPage)
    },
    CurrentFunc (data) {
      this.$emit("Func", { limit: this.page_size, page: data })
    }
  }
}
</script>
<style lang="less" scoped>
.pagination {
  margin: 20px 0;
}
</style>