<template>
  <div style="width: 100%;text-align: center; margin: auto">
    <Page :total="dataCount" :page-size="realPageSize" @on-change="changepage" :pageSizeOpts="pageSizeOpts"
          @on-page-size-change="changePageSize"  class="page" :size="size" show-elevator show-sizer show-total/>
  </div>
</template>

<script>
    export default {
      name: "bcPage",
      props : {
        dataCount:Number,
        size:String,
        pageSize: {
          type: Number,
          default: 10
        }
      },
      data () {
        return {

          currData: [],

          realPageSize: 10,

          parentReloadFuc:'',

          pageSizeOpts: [10, 20, 50, 100],
        }
      },
      methods:{
        changepage(index){
          //var _start = ( index - 1 ) * this.pageSize;
          //var _end = index * this.pageSize;
          //this.currData = this.allData.slice(_start,_end);
          this.$emit('reload-data',this.realPageSize,index);
        },
        changePageSize(pageSize){
          //this.pageSize = pageSize;
          this.realPageSize = pageSize;
          this.$emit('update:pageSize', pageSize);
          this.$emit('reload-data',pageSize,1);
        }
      },
      mounted() {
         //this.realPageSize = this.pageSize;
      },
      created(data){
        //return this.initData(data);
        this.realPageSize = this.pageSize;
      }
    }
</script>

<style scoped>
 .page{
   margin-top: 10px;
 }
</style>
