<template>
  <div>
    <a-pagination 
    show-size-changer 
    show-quick-jumper 
    :page-size-options="pageSizeOptions"
    :show-total="total => `共 ${ Math.ceil(total/params.pageSize)} 页 共 ${total} 条`"
    :default-current="1" 
    :total="params.total" 
    :page-size="params.pageSize"
    @change="onChange" 
    @showSizeChange="onShowSizeChange" />
  </div>
</template>
<script>
export default {
  props: {
    // startPage: Number,
    // endPage: Number,
    personalListData: Array
  },
  data () {
    return {
      pageSizeOptions: ['5','10', '20', '30', '50'],
      params: {
        total: 5,
        pageNum: 1,
        pageSize: 5
      }
    }
  },
  methods: {
    onChange(pageNumber) {
      console.log('Page: ', pageNumber)
      const startPage = this.params.pageSize * (pageNumber - 1)
      const endPage = this.params.pageSize * pageNumber
      // this.newArr = this.personalListData.slice(startPage, endPage)
      this.$root.$emit('pageChange', {startPage, endPage})
    },
    onShowSizeChange (current, pageSize) {
      console.log('current >> ', current)
      console.log('pageSize >> ', pageSize)
      const startPage = pageSize * (current - 1)
      const endPage = pageSize * current
      // this.newArr = this.personalListData.slice(startPage, endPage)
      this.params.pageSize = pageSize

      this.$root.$emit('pageChange', {startPage, endPage})
    },
    // sameData() {
    //   this.params.startPage=this.startPage
    //   this.params.endPage=this.endPage
    //   console.log('111111111111 :>> ', 111111111111);
    // },
    sameNum() {
      this.params.total = this.personalListData.length
    }
  },
  watch: {
      // startPage: {
      //     immediate: true,
      //     // deep: true,
      //     handler: 'sameData',
      // },
      // endPage: {
      //     immediate: true,
      //     // deep: true,
      //     handler: 'sameData',
      // },
      personalListData: {
        immediate: true,
        handler: 'sameNum'
      }
  }
};
</script>
