<template>
  <div class="btn-pagination flex items-center">
    <div v-if="showPrev" class="page-toggle-btn prev-100" @click="toPrev">
      <span>上：</span>
      <p>100</p>
    </div>
    <div v-if="showNext" class="page-toggle-btn next-100 m-l-base" @click="toNext">
      <span>下：</span>
      <p>100</p>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import useVModel from '@/hooks/useVModel'
const props = defineProps<{ modelValue: any; pagination: any }>()

const currentPage = useVModel(props)
const showNext = computed(() => {
  return props.pagination.pageCount > currentPage.value
})
const showPrev = computed(() => {
  return currentPage.value > 1
})
const toPrev = () => {
  currentPage.value = currentPage.value - 1
}
const toNext = () => {
  currentPage.value = currentPage.value + 1
}
</script>
<style lang="scss" scoped>
.btn-pagination {
  .page-toggle-btn {
    height: 32px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 12px;
    background-color: #00ba97;
    border-radius: 4px;
    cursor: pointer;
    span {
      padding-left: 4px;
    }
    p {
      background-color: #00987b;
      border-radius: 4px;
      width: 40px;
      height: 24px;
      line-height: 24px;
      text-align: center;
    }
  }
}
</style>
