<template>

  <el-pagination

    small

    background

    @size-change="handleSizeChange"

    @current-change="handleCurrentChange"

    :current-page="currentPage"

    :page-sizes="pageSizes"

    :page-size="pageSize"

    layout="total, sizes, prev, pager, next, jumper"

    :total="pageTotal"

  />

</template>

<script>

export default {

  props: {

    resetPageSize: {// 重置页面

      type: Boolean,

      default: false

    },

    dataTotal: {// 总条数

      type: [String, Number],

      default: 0

    },

    tableBegin: {// 总数据

      type: Array,

      default () {

        return []

      }

    },

    pageSizes: {// 分页条数：自定义[10,20,30]

      type: Array,

      default () {

        return [15, 25, 50, 100]

      }

    }

  },

  data () {

    return {

      currentPage: 1,

      pageSize: 15

    }

  },

  computed: {

    pageTotal () { // 分页前总条数：后台读取或直接计算传入数据

      return this.dataTotal || this.tableBegin.length

    }

  },

  watch: {

    tableBegin: {

      immediate: true,

      handler () { // 加载数据:初始化、更新数据

        this.resetSize()

        this.updateData()

      }

    },

    resetPageSize: {

      immediate: false,

      handler () { // 切换路由等:重置分页

        this.resetSize()

      }

    }

  },

  methods: {

    // 跳转到第几页

    handleCurrentChange (val) {

      this.currentPage = val

      this.updateData()

    },

    // 设置分页条数

    handleSizeChange (val) {

      this.resetSize()

      this.pageSize = val

      this.updateData()

    },

    // 重置分页

    resetSize(){

      this.currentPage = 1

      this.pageSize = this.pageSizes[0] || 15

    },

    // 更新数据

    updateData(){

      const begin = (this.currentPage - 1) * this.pageSize

      const end = this.currentPage * this.pageSize

      const tableData = this.tableBegin.slice(begin, end)

      if (this.dataTotal) { // 后台请求：不返回数据

        this.$emit('table-pagination-update', this.currentPage, this.pageSize)

      } else {

        this.$emit('table-pagination-change', tableData, this.currentPage, this.pageSize)

      }

      this.$emit('change', tableData, this.currentPage, this.pageSize)

    }

  }

}

</script>

    <!-- 页码 -->

    <pagination

      style="margin-top:10px"

      :page-sizes="pageSizes"

      :table-begin="tableBegin"

      @table-pagination-change="getTablePagination"

    />

  </div>

</template>

<script>

import pagination from 'module-comp/tablePagination'

export default {

  components: {

    pagination

  },

    // 分页方法

    getTablePagination (data, currentPage, pageSize) {

      this.tableData = data

      this.currentPage = currentPage

      this.pageSize = pageSize

    },

     <pagination

        ref="pager"

        style="margin-top:20px"

        :data-total="dataTotal"

        :reset-page-size="resetPageSize"

        @table-pagination-update="tablePaginationLoad"

      />

    // 表格分页：点击分页后拉新业务

    tablePaginationLoad (pagenum, pagesize) {

      this.pagenum = pagenum - 1

      this.pagesize = pagesize

    this.featureSearchChange(this.keyWords,this.businessIdSet,false)

    },

 // 搜索:所有数据的刷新

    featureSearchChange (val, businessId, resetPageSize) {

      if (resetPageSize) { // 搜索时切换业务

        this.pagenum = 0

        this.resetPageSize = !this.resetPageSize

      }

      const businessIdSet = businessId || ''

      const paramet = {

        'business.id': this.globalPage ? businessIdSet : this.businessIdSet,

        'pagenum': this.pagenum,

        'pagesize': this.pagesize,

        'authority': this.authority, // 个人或公共

        'keyword': val || ''

      }

      this.onLoadData(paramet)

    },

    // 重置分页

    // resetSize(){

    //   this.$refs.pager.resetSize()

    // },

    // 加载数据getAllData()

    onLoadData (paramet) {

      if (paramet) {

        this.loadingData = true

        getAllData(paramet).then(res => {

          if (res && res.data && res.data.err_code === '0' && res.data.info) {

            const result = res.data.info

            this.dataTotal = res.data.num || 0 // 总条数

            const tableData = [] // 展示数据

            if (result && result.length > 0) { // 省略遍历自定义result

              this.tableBegin = tableData

              this.loadingData = false

            } else {

              this.tableBegin = []

              this.loadingData = false

            }

          } else {

            this.tableBegin = []

            this.dataTotal = 0 // 总条数

            this.$message.error(res.data ? res.data.err_desc : '获取特征数据失败')

            this.loadingData = false

          }

        }).catch(() => {

          this.loadingData = false

          this.$message.error('获取数据失败')

        })

      }

    }

  }