<!--
 * @Description: 
 * @Author: 陈长吉
 * @Date: 2018-10-29 16:30:28
 * @LastEditTime: 2020-09-02 15:15:39
 * @LastEditors: Please set LastEditors
 -->
<template>
  <el-pagination
    v-show="query.total"
    :page-sizes="pageSizes"
    v-bind="$attrs"
    layout="total, sizes, prev, pager, next, jumper"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  >
  </el-pagination>
</template>

<script>
// @yunjidoc 功能组件 - 分页
import { searchUpdateRoute } from '@/utils'
export default {
  componentName: 'Pagination',
  props: {
    /**
     * @prop {Object} query 分页参数
     */
    query: {
      type: [Object, Array]
    },
    /**
     * @prop {Boolean} history 列表分页是否产生历史记录  默认: true
     */
    history: {
      // 列表分页是否产生历史记录
      type: Boolean,
      default: true
    },
    /**
     * @prop {Object, Array} pageSizes 每页数量选择  默认: [10, 20, 40, 60, 80, 100]
     */
    pageSizes: {
      type: [Object, Array],
      default: function(value) {
        return [10, 20, 40, 60, 80, 100]
      }
    },
    currentPageName: {
      type: String,
      default: 'pageIndex'
    },
    pageSizeName: {
      type: String,
      default: 'pageSize'
    }
  },
  watch: {
    $route() {
      if (this.history) {
        this.$emit('fetch', this.getQuery(this.query))
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    /**
     * @method: 获取路由参数与传入query混合
     * @param {Object} query 请求参数
     * @return {Object} 路由query和传入query混合结果
     */
    getQuery(query) {
      let _query = this.$route.query
      if (_query[this.currentPageName]) {
        _query[this.currentPageName] = parseInt(_query[this.currentPageName])
      } else {
        delete _query[this.currentPageName]
      }
      if (_query[this.pageSizeName]) {
        _query[this.pageSizeName] = parseInt(_query[this.pageSizeName])
      } else {
        delete _query[this.pageSizeName]
      }
      delete _query.pageTotal
      delete _query.total
      return Object.assign({}, query, _query)
    },
    /**
     * @method: 获取搜索参数， 删除分页使用的多余字段
     * @param {Object} query 请求参数
     * @return {Object} 删除分页使用的多余字段
     */
    getSearch(query) {
      let search = Object.assign({}, query, this.$route.query)
      delete search.pageTotal
      delete search.total
      return search
    },
    /**
     * @method: 更新路由历史
     * @param {Object} query 请求参数
     */
    updateRoute(query) {
      // 更新URL地址
      if (this.history) {
        searchUpdateRoute(query, this)
      } else {
        this.$emit('update:query', query)
        this.$emit('fetch', query)
      }
    },
    /**
     * @method: 修改页数事件
     * @param {Number} value 页码
     */
    handleCurrentChange(value) {
      // 修改页数事件
      if (!this.$sizeChangeTimer) {
        //eslint-disable-line
        let query = Object.assign({}, this.query, { [this.currentPageName]: value })
        this.updateRoute && this.updateRoute(query)
        let node = this.$el.querySelector('.el-pagination')
        if (node) {
          // 阻止频繁点击
          node.style.pointerEvents = 'none'
          setTimeout(() => {
            node.style.pointerEvents = ''
          }, 1000)
        }
      }
    },
    /**
     * @method: 修改分页条数事件
     * @param {Number} value 页码
     */
    handleSizeChange(value) {
      // 修改分页条数事件
      this.$sizeChangeTimer = true // 避免页数修改后当前页Change事件重复触发
      setTimeout(() => {
        this.$sizeChangeTimer = false
      }, 500)
      let pages = {}
      pages[this.currentPageName] = 1
      pages[this.pageSizeName] = value
      let query = Object.assign({}, this.query, pages)
      this.updateRoute(query)
    }
  }
}
</script>

<style lang="less"></style>
