<template>
  <div class="d-flex justify-center align-center pa-5">
    <v-pagination
      v-model="currentPage"
      :length="pageLength"
      @update:modelValue="handleCurrentChange"
      v-bind="$attrs"
      :total-visible="props.totalVisible"
    ></v-pagination>
    <span style="color: #666;">共{{ props.total }}条数据</span>
    <div class="search px-3">
      <v-text-field
        v-model="currentJump"
        type="number"
        hide-details
        variant="outlined"
        density="compact"
        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 setup>
import { computed, watch, ref, defineEmits } from 'vue'
defineOptions({ name: 'components-ct-pagnation' })
const props = defineProps({
  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
  }
})
const emit = defineEmits(['handleChange'])

const currentPage = ref(1)
const currentJump = ref(null)
currentPage.value = props.page

watch(() => props.page, (newVal) => {
  currentPage.value = newVal
})
const pageLength = computed(() => {
  return Math.ceil(props.total / props.limit)
})

const handleCurrentChange = () => {
  emit('handleChange', currentPage.value)
}
const handleCurrentJump = () => {
  if (currentJump.value > pageLength.value) currentJump.value = pageLength.value
  if (currentJump.value < 1) currentJump.value = 1
  currentPage.value = +currentJump.value
  emit('handleChange', currentPage.value)
}
</script>

<style lang="scss" scoped>
.search {
width: 80px;
height: 50px;
display: flex;
align-items: center;
}
</style>
