<template>
  <div id="cpt-pagination">
    <div class="pagination_wrapper" :class="position||'middle'">
      <span>总计：</span>
      <el-pagination
        @size-change="changePageSize"
        :page-sizes="pageSizes"
        :pager-count="pagerCount"
        @current-change="pageChange"
        :layout="layout"
        :page-size="size"
        :current-page="current"
        v-bind="$attrs"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'enoPagingCpt',
  data() {
    return {}
  },
  props: {
    onQuery: Function,
    position: String,
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next , jumper',
    },
    pageSizes: {
      type: Array,
      default: () => {
        return [10, 20, 30, 50, 100, 500, 1000, 10000]
      },
    },
    pagerCount: {
      type: Number,
      default: 5,
    },
    size: {
      type: Number,
      default: 10,
    },
    current:{
      type: Number,
      default: 1,
    },
		initPager:Boolean
  },
  watch: {
    '$store.state.pageIndex': {
      handler(newVal) {
        if (!this.initPager) {
          this.current = newVal
        }
      },
      immediate: true
    }
  },
  created() {
		if(!this.initPager){
			if (this.current) {
			  this.$store.commit('updatePageIndex', this.current)
			}
			if (this.size) {
			  this.$store.commit('updatePageSize', this.size)
			}
		}

  },
	activated(){
    if(!this.initPager){
      this.onQuery(this.$store.state.searchInfo)
      this.$store.commit('updatePageSize', this.$store.state.searchInfo.size)
      this.$store.commit('updatePageIndex', this.$store.state.searchInfo.current)
      this.$store.commit('updateSearchInfo', this.$store.state.searchInfo)
    }
	},
  methods: {
    pageChange: function (pageNumber) {
			if(!this.initPager){
				this.$store.commit('updatePageIndex', pageNumber)
				this.$store.commit('updateSearchInfo', {
				  ...this.$store.state.searchInfo,
				  current: pageNumber,
				  size: this.$store.state.pageSize,
				})
			}
      else{
        this.$emit('updateCurrent', pageNumber)
      }
      this.$nextTick(()=>{
        if (this.onQuery && this.onQuery.constructor === Function) {
          this.onQuery({
            ...this.$store.state.searchInfo,
            current: pageNumber,
            size: this.size,
          })
        } else {
          this.$emit('changeQuery', {
            current: pageNumber,
            size: this.size,
          })
        }
      })

    },
    changePageSize: function (size) {
			if(!this.initPager){
				this.$store.commit('updatePageSize', size)
				this.$store.commit('updatePageIndex', 1)
				this.$store.commit('updateSearchInfo', {
				  ...this.$store.state.searchInfo,
				  current: 1,
				  size: size,
				})
			}else{
        this.$emit('updateSize', size)
      }
      this.$nextTick(()=>{
        if (this.onQuery && this.onQuery.constructor === Function) {
          this.onQuery({
            ...this.$store.state.searchInfo,
            current: 1,
            size: size,
          })
        } else {
          this.$emit('changeQuery', {
            current: this.current,
            size: size,
          })
        }
      })

    },
  },
}
</script>

<style lang="less">
  #cpt-pagination {
    position: relative;
    height: 32px;
    font-size: 14px;
    color: @textColor;

    .pagination_wrapper {
      display: flex;
      align-items: center;
      height: 100%;

      span {
        font-size: 13px;
        white-space: nowrap;
      }

      &.middle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      &.right {
        position: absolute;
        top: 50%;
        right: 20px;
        margin-top: -14px;
      }

      .el-pagination {
        display: inline-block;
        vertical-align: middle;
        display: flex;
        align-items: center;
        padding: 0;
        height: 32px;

        .el-pagination__sizes {
          height: 32px;
        }

        .el-pagination__jump {
          margin-left: 16px;
        }

        .el-pager {
          .number {
            color: @57Color;
            font-weight: normal;

            &.active {
              color: @mainColor;
            }
          }
        }

        .btn-prev,
        .btn-next {
          color: @57Color;
        }

        .el-pagination__sizes {
          .el-select {
            max-width: 120px;

            .el-input--mini {
              width: 120px !important;
            }
          }
        }
      }
    }

    .el-pagination__jump {
      .el-input {
        max-width: 50px;

        .el-input__inner {
          border-color: @borderColor;
          padding-left: 0 !important;
        }
      }
    }

    .el-input {
      .el-input__inner {
        border-color: @borderColor;
      }

      &:hover {
        border-color: @borderColor;
      }
    }
  }
</style>
