<template>
    <div class="d-flex justify-center align-center pa-5" style="font-size: 16px;">
        <v-pagination
            v-model="currentPage"
            :length="pageLength"
            @input="handleCurrentChange"
            v-bind="$attrs"
            :total-visible="totalVisible"
        ></v-pagination>
        <span style="color: #666;">共{{ total }}条数据</span>
        <div class="search px-3">
          <v-text-field
            v-model="currentJump"
            type="number"
            hide-details
            outlined
            dense
            height="35"
            label=""
            placeholder=""
            hide-spin-buttons
          ></v-text-field>
        </div>
        <div class="">
          <v-btn color="primary" rounded class="half-button" @click="handleCurrentJump">跳转</v-btn>
        </div>
    </div>
</template>

<script>
export default {
  name: 'pagination-page',
  props: {
    total: {
      type: [String, Number],
      default: 0
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default: () => [5, 10, 15, 20]
    },
    layout: {
      type: String,
      default: 'total, prev, pager, next, jumper'
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    },
    totalVisible: {
      type: Number,
      default: 7
    }
  },
  data () {
    return {
      currentPage: 1,
      currentJump: null
    }
  },
  created () {
    this.currentPage = this.page
  },
  watch: {
    page: {
      handler (val) {
        this.currentPage = val
      },
      deep: true
    }
  },
  computed: {
    pageLength () {
      return Math.ceil(this.total / this.limit)
    }
  },
  methods: {
    handleCurrentChange () {
      this.$emit('handleChange', this.currentPage)
    },
    handleCurrentJump () {
      if (this.currentJump > this.pageLength) this.currentJump = this.pageLength
      if (this.currentJump < 1) this.currentJump = 1
      this.currentPage = +this.currentJump
      this.$emit('handleChange', this.currentPage)
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  width: 80px;
  height: 50px;
  display: flex;
  align-items: center;
}
// ::v-deep  .v-text-field--outlined.v-input--dense.v-text-field--outlined > .v-input__control > .v-input__slot {
//   min-height: 35px;
// }
</style>
