<template>
  <div class="el-pagination is-background compat-pagination">
    <span
      v-if="showTotal"
      class="el-pagination__total">共 {{ total }} 条</span>

    <button
      v-if="showPrev"
      type="button"
      class="btn-prev"
      :disabled="disabled || current <= 1"
      @click="changePage(current - 1)">
      <i class="el-icon el-icon-arrow-left"></i>
    </button>

    <ul
      v-if="showPager"
      class="el-pager">
      <li
        v-for="page in pageList"
        :key="page"
        class="number"
        :class="{ active: page === current, disabled: disabled }"
        @click="changePage(page)">
        {{ page }}
      </li>
    </ul>

    <button
      v-if="showNext"
      type="button"
      class="btn-next"
      :disabled="disabled || current >= pageCount"
      @click="changePage(current + 1)">
      <i class="el-icon el-icon-arrow-right"></i>
    </button>
  </div>
</template>

<script>
export default {
  name: 'CompatPagination',
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    },
    layout: {
      type: String,
      default: 'prev, pager, next, total'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      current: this.currentPage || 1
    }
  },
  computed: {
    layoutParts () {
      return (this.layout || '')
        .split(',')
        .map(item => item.trim())
        .filter(Boolean)
    },
    pageCount () {
      const count = Math.ceil((this.total || 0) / (this.pageSize || 10))
      return count > 0 ? count : 1
    },
    showTotal () {
      return false
    },
    showPrev () {
      return this.layoutParts.includes('prev')
    },
    showPager () {
      return this.layoutParts.includes('pager')
    },
    showNext () {
      return this.layoutParts.includes('next')
    },
    pageList () {
      const maxShow = 7
      if (this.pageCount <= maxShow) {
        return Array.from({ length: this.pageCount }, (_, idx) => idx + 1)
      }

      let start = Math.max(1, this.current - 3)
      let end = Math.min(this.pageCount, start + maxShow - 1)
      if (end - start < maxShow - 1) {
        start = Math.max(1, end - maxShow + 1)
      }

      const pages = []
      for (let p = start; p <= end; p++) {
        pages.push(p)
      }
      return pages
    }
  },
  watch: {
    currentPage (val) {
      const next = val > 0 ? val : 1
      this.current = next
    },
    pageCount (val) {
      if (this.current > val) {
        this.current = val
      }
    }
  },
  methods: {
    changePage (page) {
      if (this.disabled) return
      const next = Math.min(this.pageCount, Math.max(1, page))
      if (next === this.current) return
      this.current = next
      this.$emit('current-change', next)
      this.$emit('update:currentPage', next)
      this.$emit('input', next)
    }
  }
}
</script>

<style scoped>
.compat-pagination {
  min-height: 28px;
}
</style>
