<template>
    <enoPagingCpt
      :onQuery="onQuery"
      :position="position"
      :layout="layout"
      :pageSizes="pageSizes"
      :pagerCount="pagerCount"
	    :initPager="initPager"
      :current="initPager?current:$store.state.pageIndex"
      :size="initPager?size:$store.state.pageSize"
      @updateCurrent="updateCurrent"
      @updateSize="updateSize"
      v-bind="$attrs"
    ></enoPagingCpt>
</template>

<script>
import enoPagingCpt from './enoPagingCpt'
export default {
  name: 'enoPaging',
  components: {
      enoPagingCpt,
  },
  data() {
		return {
			initPager:false,
      current:1,
      size:10
		}
  },
  watch:{
    current(val){
      if(this.initPager){
        let pager = {
          current:val,
          size:this.size
        }
         this.$emit('update:pager', pager)
      }

    },
    size(val){
      if(this.initPager){
         let pager = {
           current:1,
           size:val
         }
         this.$emit('update:pager', pager)
       }
    },
    pager: {
      handler(val) {
        this.size = val.size
        this.current = val.current
      },
      deep: true
    }
  },
	created() {
		if(this.pager.size && this.pager.current){
			this.initPager = true
      this.size = this.pager.size
      this.current = this.pager.current
		}
	},
  methods:{
    updateCurrent(val){
      this.$set(this, 'current', val)
    },
    updateSize(val){
      this.$set(this, 'size', val)
    },
  },
  props: {
    onQuery: Function,
    position: String,
    layout: String,
    pageSizes: Array,
    pagerCount: Number,
    pager: {
      type: Object,
      default: () => {
        return {
        }
      },
    },
  }
}
</script>
