<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :small="isSmall"
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="size"
      :layout="playout"
      :page-sizes="pageSizes"
      :pager-count="pageCount"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
  import {scrollTo} from './XdPagination'

  export default {
    name: 'Pagination',
    props: {
      /**记录总数**/
      total: {
        required: true,
        type: Number
      },

      /**当前在第几页**/
      page: {
        type: Number,
        default: 1
      },

      /**每页展示记录条数**/
      limit: {
        type: Number,
        default: 10
      },
      
      //自定义页面可选每页展示记录条数选项
      pageSizes: {
        type: Array,
        default() {
          return [5, 10, 20, 30, 50]
        }
      },
      
      layout: {
        type: String,
        default: 'total,sizes, prev, pager, next, jumper' //default: 'total, sizes, prev, pager, next, jumper'
      },
      
      background: {
        type: Boolean,
        default: true
      },
      
      //翻页之后是否定位到顶部
      autoScroll: {
        type: Boolean,
        default: true
      },
      
      hidden: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        pageCount:5,
        isSmall: false,
        playout: 'prev, pager, next',
        size: 10, //每页显示条数
        currentPage: 1, //当前页码
      }
    },
    watch:{
      limit(){
        this.size = this.limit;
      },
      page(){
        this.currentPage = this.page;
      },
      currentPage(val){
        this.$emit('update:page', val);
      },
      size(val){
        this.$emit('update:limit', val);
        this.currentPage  = 1;
      }
    },

    created() {
      this.playout = this.layout;
      this.size = this.limit;
      this.currentPage = this.page;
    },

    methods:{
      handleSizeChange(val) {
        this.$emit('update:limit', val);
        this.$emit('pagination', {page: 1, limit: val});
        this.$emit('onPagination', 1);
        if (this.autoScroll) {
          scrollTo(0, 800, () => {
          });
        }
      },
      handleCurrentChange(val) {
        this.$emit('update:page', val);
        this.$emit('pagination', {page: val, limit: this.pageSize});
        this.$emit('onPagination', val);
        if (this.autoScroll) {
          scrollTo(0, 800, ()=>{});
        }
      }
    }

  }
</script>

<style scoped>
  .pagination-container {
    background: #fff;
    padding: 0;
    overflow-x: auto;
  }

  .pagination-container.hidden {
    display: none;
  }
</style>
