<!--
  @description: 分页组件 全局使用
  @Modifier：haoFx
  @routerPath:
  @date：  2019/11/12-10:00
-->
<template>
  <el-row :class="['pagination','p16',shopmallPagination]">
    <el-pagination
      :current-page="paginationData.pageNo"
      :page-size="paginationData.pageSize"
      :page-sizes="[10,30, 50,100,300]"
      :total="paginationData.total"
      background
      layout="total,slot,prev"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <!--      <el-button :disabled="firstPageBtnDisabled" class="first-pager" @click="toFirstPage">
        首页
      </el-button>-->
    </el-pagination>
    <el-pagination
      :current-page="paginationData.pageNo"
      :page-size="paginationData.pageSize"
      :page-sizes="[10,30, 50,100,300]"
      :total="paginationData.total"
      background
      layout="pager,next,slot,sizes,jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <!--      <el-button :disabled="lastPageBtnDisabled" class="last-pager" @click="toLastPage">
        末页
      </el-button>-->
    </el-pagination>
  </el-row>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Pagination',
  props: {
    paginationData: {
      type: Object,
      default: function() {
        return {
          pageNo: 1, // 第几页
          pageSize: 10, // 显示条数
          total: 0 // 总记录条数
        }
      }
    },
    // 电商独有分页样式，传进来的值均为 'shopmall-pagination'
    shopmallPagination: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      firstPageBtnDisabled: true, // 首页
      lastPageBtnDisabled: false, // 末页
      lastPageNum: Math.ceil(this.paginationData.total / this.paginationData.pageSize) // 末页数
    }
  },
  computed: {
    /* langcommon 国际化*/
    ...mapGetters(['language'])
  },
  watch: {
    'paginationData.total'(newVal, oldVal) {
      this.paginationData.total = newVal
      this.lastPageNum = Math.ceil(newVal / this.paginationData.pageSize)
    }
  },
  methods: {
    // 分页条数切换
    handleSizeChange(val) {
      this.lastPageNum = Math.ceil(this.paginationData.total / val)
      this.paginationData.pageSize = val
      // this.paginationData.pageNo = 1
      this.$store.dispatch('setSysLocal', { pageSize: val })
      this.$emit('change', this.paginationData)
    },
    // 分页
    handleCurrentChange(val) {
      this.firstPageBtnDisabled = val === 1
      this.lastPageBtnDisabled = val === this.lastPageNum
      this.paginationData.pageNo = val
      this.$emit('change', this.paginationData)
    },
    // 首页
    toFirstPage(val) {
      this.handleCurrentChange(1)
    },
    // 末页
    toLastPage(val) {
      this.paginationData.pageNo = this.lastPageNum
      this.handleCurrentChange(this.lastPageNum)
    }
  }
}
</script>

<style scoped lang="less">
.el-pagination{
  display: inline-block;
}
</style>

