<template>
  <el-pagination
      :pager-count="5"
      :size="size"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :layout="layout"
      background
      :total="totalCount"
  />
</template>

<script>
export default {
  name: "ElePagination",
  props:{
    size:{
      type:String,
      default: 'small'
    },

    pageSizes:{
      default() {
        return [10, 20, 50, 100]
      }
    },
    currentPage:{
      default:1
    },
    pageSize:{
      default:10
    },
    totalCount:{
      default:400
    },
    defaultPageSize:{
      default:10
    },
    initCount:{
      default:1
    },
    layout:{
      default:'total,prev,pager,next,sizes,jumper'
    }
  },
  data() {
    return {
      //currentPage:1,
      //pageSize:10
    }
  },
  mounted() {
    if (+this.pageSize !==  +this.defaultPageSize) {
      this.pageSize = this.defaultPageSize
    }
    this.$emit('sizeOrPageChange',this.currentPage,this.pageSize)


  },
  methods:{
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.$emit('sizeOrPageChange',this.currentPage,size)
      // this.$emit('update:pageSize',size)
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.$emit('sizeOrPageChange',page,this.pageSize)
    },
    initPage() {
      console.log('进行了出书画')
      this.pageSize = this.defaultPageSize
      this.currentPage = 1
      this.$emit('sizeOrPageChange',this.currentPage,this.pageSize)
    }
  },
  watch:{
    totalCount:{
      handler(val) {
        console.log(val,this.pageSize,this.currentPage)
        if (this.pageSize * (this.currentPage)  > val  && val % this.pageSize === 0 ) {
          this.$emit('sizeOrPageChange',(this.currentPage - 1) || 1,this.pageSize)
        }
      }
    },
    currentPage:{
      handler(val) {
        console.log(val,this.pageSize,this.currentPage)
        this.currentPage = val;
      }
    },
    initCount:{
      handler() {
        this.initPage()

      }
    }

  }
}
</script>

<style scoped lang="scss">
//::v-deep .el-pagination__jump{
//
//  margin-left: 0;
//}
//
//::v-deep .el-pagination__sizes{
//  margin: 0 0px;
//  line-height: normal !important;
//  .el-input--mini .el-input__inner, .el-select--mini,.select-trigger{
//    height: 100%;
//  }
//  //line-height: auto;
//}
//.el-pagination ::v-deep  .el-select .el-input{
//
//  height: 100%;
//  .el-input--mini .el-input__inner, .el-select--mini{
//    height: 100%;
//  }
//}
</style>
