<template>
  <div class="pagination-container">
    <template v-if="rowsTotal > 0">
      <nav>
        <ul class="pagination light-theme simple-pagination">
          <li v-bind:class="{'disabled':isFirst}" @click="prev">
            <span class="current prev">Prev</span>
          </li>
          <li v-for="n in pageChunkCurrent" v-bind:class="{'active':isActive[n+1]}" @click="nav( n+1 )">
            <a  href="javascript:void(0)">{{n + 1}}</a>
          </li>
          <li @click="next" v-bind:class="{'disabled':isLast}">
            <span class="current next">Next</span>
          </li>
        </ul>
      </div>
    </template>
  </div>
</template>

<script>
export default {
    props: {
      pageSize: {
        type: Number,
        default: 10
      },
      rowsTotal: {
        type: Number,
        required: true
      },
      page: {
        type: Number,
        required: true
      }
    },
    watch: {
      rowsTotal(newVal, oldVal) {
        if (newVal !== oldVal) {
          // init option when rows changes
          this.page = 1
          this.isFirst = true
          this.isLast = false
        }
      },
      pageTotal(newVal, oldVal) {
        if (newVal === 1) {
          // only one page
          this.isFirst = true
          this.isLast = true
        }
      }
    },
    computed: {
      pageChunkCurrent() {
        let pageTotal = Math.ceil(this.rowsTotal / this.pageSize)
        let pageArr = []
        for (let i = 0; i < pageTotal; i++) {
          pageArr[i] = i
        }
        let pageChunk = []
        let j = pageArr.length
        for (let i = 0; i < j; i += this.pageSize) {
          pageChunk.push(pageArr.slice(i, i + this.pageSize))
        }
        return pageChunk[this.pageChunkIndex]
      },
      pageTotal() {
        let total = Math.ceil(this.rowsTotal / this.pageSize)
        if (total === 1) {
          this.isLast = true
          this.isFirst = true
        }
        return Math.ceil(this.rowsTotal / this.pageSize)
      },
      isActive() {
        let pageTotal = this.pageTotal
        let o = {}
        for (let i = 0; i < pageTotal; i++) {
          o[i + 1] = 0
        }
        o['actived'] = this.page
        o[this.page] = 1
        return o
      }
    },
    data() {
      let pageTotal = this.pageTotal
      let pageArr = []
      for (let i = 0; i < pageTotal; i++) {
        pageArr[i] = i
      }
      let pageChunk = []
      let j = pageArr.length
      for (let i = 0; i < j; i += this.pageSize) {
        pageChunk.push(pageArr.slice(i, i + this.pageSize))
      }
      return {
        pageChunk: pageChunk,
        pageChunkIndex: 0,
        isLast: false,
        isFirst: true
      }
    },
    methods: {
      nav(n) {
        let activeObj = this.isActive
        activeObj[activeObj['actived']] = 0
        activeObj[n] = 1
        activeObj['actived'] = n
        n === 1 ? this.isFirst = true : this.isFirst = false
        this.pageTotal === n ? this.isLast = true : this.isLast = false
        this.page = n
        this.$dispatch('page', this.page)
      },
      next() {
        let activeObj = this.isActive
        if (activeObj.actived % this.pageSize === 0) {
          this.pageChunkIndex += 1
          this.pageChunkCurrent = this.pageChunk[this.pageChunkIndex]
        }
        if (activeObj.actived + 1 <= this.pageTotal) {
          this.nav(activeObj.actived + 1)
        }
      },
      prev() {
        let activeObj = this.isActive
        if (activeObj.actived - 1 >= 1) {
          this.nav(activeObj.actived - 1)
        }
        if (activeObj.actived % this.pageSize === 0) {
          this.pageChunkIndex -= 1
          this.pageChunkCurrent = this.pageChunk[this.pageChunkIndex]
        }
      }
    }
  }
</script>