<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'

export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [5, 10, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { pageNum: this.currentPage, pageSize: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { pageNum: val, pageSize: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>

<style lang="scss" >

.pagination-container {
  background: #fff;
  padding: 10px 0;
  display: flex;
  justify-content: flex-end;
  .el-pagination {
    padding: 2px 1px;
  }
  .el-pagination.is-background {
    .el-pager li:not(.disabled).active {
      background-color: rgba(82, 125, 203, 1) !important;
      // background: linear-gradient(0deg, rgba(102, 147, 225, 1), rgb(69, 126, 231)) !important;
      box-shadow: 0px 0px 0px 0px #77a2e7 !important;
    }
    .el-pager li {
      background: #FFFFFF;
      border: 1px solid #E5E5E5;
      // border-radius: 4px;
    }
    .el-pagination__total {
      font-size: 13px;
      font-family: 'SourceHanSansCN'!important;
    }
    .el-pagination__jump {
      font-size: 13px;
      font-family: 'SourceHanSansCN'!important;
      .el-input {
        .el-input__inner {
          font-size: 13px;
          font-family: 'SourceHanSansCN'!important;
          box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 40%) inset;
        }
      }
    }
    .el-pagination__sizes {
      .el-select {
        .el-input {
          .el-input__inner {
            font-size: 13px;
            font-family: 'SourceHanSansCN'!important;
          }
        }
      }
    }
  }
}
.pagination-container.hidden {
  display: none;
}


</style>
