<commit_before><template lang="jade">
nav.fit-pagination-pagination-full
  button-group.pagination
    fit-button.before <
    fit-button.after >
    fit-input.inline-input(v-if="enableJump")
    fit-button(v-if="enableJump") 跳转
</template>

<script>
import Vue from 'vue'
import FitInput from '../form/input.vue'
import FitButton from '../form/button.vue'
import ButtonGroup from '../form/button-group.vue'

export default {
  props: ['default-page', 'all-page', 'enable-jump'],
  data () {
    return {
      currentPage: this.defaultPage
    }
  },
  components: {
    fitInput: FitInput,
    fitButton: FitButton,
    buttonGroup: ButtonGroup
  },
  methods: {
    handleChange (page, disable, activeButtonName) {
      if (!disable) {
        let tempPage = this.currentPage
        this.prevPage = tempPage
        this.currentPage = page
        this.activeButtonName = activeButtonName
        Vue.nextTick(() => {
          this.$emit('change', this.currentPage)
        })
      }
    }
  }
}
</script>

<style>
.fit-pagination-pagination-full .pagination {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }
  .fit-pagination-pagination-full .pagination .loading {
    width: 14px;
    height: 14px; }
  .fit-pagination-pagination-full .pagination .before .loading {
    margin-right: 5px; }
  .fit-pagination-pagination-full .pagination .after .loading {<commit_msg>pagination-full<commit_after><template lang="jade">
nav.fit-pagination-pagination-full
  button-group.pagination
    fit-button.before(@click="handleChange(currentPage - 1, !hasPrevious || loading, 'before')", v-bind:disabled="!hasPrevious || loading", v-bind:loading="isPreviousLoading") <
    fit-button(@click="handleChange(page, loading || page === currentPage, page > currentPage ? 'after' : 'before')", v-for="page of middleNumbers", v-bind:class="{active: page === currentPage && !loading}", v-bind:disabled="!page || loading", track-by="$index") {{page || '...'}}
    fit-button.after(@click="handleChange(currentPage + 1, !hasNext || loading, 'after')", v-bind:disabled="!hasNext || loading", v-bind:loading="isNextLoading") >
    fit-input.inline-input(v-if="enableJump")
    fit-button(v-if="enableJump") 跳转
</template>

<script>
import Vue from 'vue'
import FitInput from '../form/input.vue'
import FitButton from '../form/button.vue'
import ButtonGroup from '../form/button-group.vue'

export default {
  props: ['default-page', 'all-page', 'enable-jump', 'loading'],
  data () {
    return {
      currentPage: this.defaultPage
    }
  },
  components: {
    fitInput: FitInput,
    fitButton: FitButton,
    buttonGroup: ButtonGroup
  },
  watch: {
    defaultPage (newVal, oldVal) {
      this.currentPage = newVal
    }
  },
  computed: {
    middleNumbers () {
      const all = this.allPage
      const current = this.currentPage

      if (all <= 7) {
        let arrs = []
        for (let i = 0; i < all; i++) {
          arrs.push(i + 1)
        }
        return arrs
      }
      if (current <= 4) {
        return [1, 2, 3, 4, 5, 6, null, all]
      }
      if (all - current < 5) {
        let arr = [1, null]
        for (let i = all - 6; i <= all; i++) {
          arr.push(i)
        }
        return arr
      }
      let arr = [1, null]
      for (let i = current - 2; i <= current + 3; i++) {
        arr.push(i)
      }
      arr.push(null)
      arr.push(all)
      return arr
    },
    hasNext () {
      return this.currentPage !== this.allPage
    },
    hasPrevious () {
      return this.currentPage !== 1
    },
    isPreviousLoading () {
      const active = (this.activeButtonName === 'before')
      const loading = this.loading
      return active && loading
    },
    isNextLoading () {
      const active = (this.activeButtonName === 'after')
      const loading = this.loading
      return active && loading
    }
  },
  methods: {
    handleChange (page, disable, activeButtonName) {
      if (!disable) {
        let tempPage = this.currentPage
        this.prevPage = tempPage
        this.currentPage = page
        this.activeButtonName = activeButtonName
        Vue.nextTick(() => {
          this.$emit('change', this.currentPage)
        })
      }
    }
  }
}
</script>

<style>
.fit-pagination-pagination-full .pagination {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }
  .fit-pagination-pagination-full .pagination .loading {
    width: 14px;
    height: 14px; }
  .fit-pagination-pagination-full .pagination .before .loading {
    margin-right: 5px; }
  .fit-pagination-pagination-full .pagination .after .loading {
{'fraction_non_alphanumeric': 0.1499030799052337, 'fraction_numerical': 0.00624596166271807, 'mean_word_length': 2.6196414653156666, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 18, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2543643', 'n_tokens_mistral': 1530, 'n_tokens_neox': 1490, 'n_words': 327}