<template>
  <el-pagination
  :style="[style.original,style[type]]"
  :current-page.sync="currentPageSelf"
  :page-sizes="pageSizes" :page-size.sync="pageSizeSelf" :layout="layout" :total="total">
  </el-pagination>
</template>
<script>
  const pageSize =20;
  let style={
    original:{
      position:'static',
      transform:'translate(0,0)',
      textAlign:'center'
    },
    primary:{
      backgroundColor:'#fff',
      padding:'15px',
      border:'1px solid #EBEEF5',
      borderTop:0
    }
  };
  export default {
    props: {
      type:{
        type:String,
        default:'primary'
      },
      pageSizes: {
        type: Array,
        default: function () {
          return [1.5*pageSize, 2 * pageSize, 3 * pageSize, 5 * pageSize,10*pageSize]
        }
      },
      pageSize: {
        type: Number,
        default:1.5*pageSize
      },
      layout: {
        type: String,
        default: 'total,sizes,prev, pager, next, jumper'
      },
      total: {
        type: Number,
        default: 0
      },
      currentPage:{
        type: Number,
        default:1
      }
    },
    data:function(){
      return {
        style:style
      }
    },
    computed: {
      currentPageSelf: {
        get: function () {
          return this.currentPage
        },
        set: function (value){
          this.$emit('update:currentPage', value);
        }
      },
      pageSizeSelf:{
        get:function(){
          return this.pageSize
        },
        set:function(value){
          this.$emit('update:pageSize',value);
        }
      }
    },
    watch:{
      pageSize:function(){
        this.emitChange()
      },
      currentPage:function(){
        this.emitChange()
      }
    },
    methods:{
      emitChange:function(){
        clearTimeout(this.timerId);
        setTimeout(()=>{
          this.$emit('change',[this.currentPage,this.pageSize]);
        },80)
      }
    }
  }
</script>
