<script lang="ts" setup>
import { ref, computed } from 'vue'
import CPager from '../CPager.vue'

const pageNrA = ref(1)
const ShowNrA = ref(10)
const pageNrB = ref(1)
const ShowNrB = ref(10)
const pageNrC = ref(1)
const ShowNrC = ref(10)
const p_TableLengthA = ref(1001)
const p_TableLengthB = ref(50)
const p_TableLengthC = ref(1000)
const compNumA = computed(() => Math.ceil(p_TableLengthA.value / ShowNrA.value))
const compNumB = computed(() => Math.ceil(p_TableLengthB.value / ShowNrB.value))
const compNumC = computed(() => Math.ceil(p_TableLengthC.value / ShowNrC.value))
</script>

<docs>
合計のページ数はCAdminTableに計算されて、パスされるので、こちらにて更新しても、ページ数は変わらない
</docs>

<template>
  <CPager
    v-model="pageNrA"
    v-model:showDataNum="ShowNrA"
    :p_TableLength="p_TableLengthA"
    :pageCount="compNumA"
  />
  <div style="padding: 1rem">
    modelValue: <code>{{ pageNrA }}</code>
  </div>

  <CPager
    v-model="pageNrB"
    v-model:showDataNum="ShowNrB"
    :p_TableLength="p_TableLengthB"
    :pageCount="compNumB"
  />
  <div style="padding: 1rem">
    modelValue: <code>{{ pageNrB }}</code>
  </div>

  <CPager
    v-model="pageNrC"
    v-model:showDataNum="ShowNrC"
    :p_TableLength="p_TableLengthC"
    :pageCount="compNumC"
  />
  <div style="padding: 1rem">
    modelValue: <code>{{ pageNrC }}</code>
  </div>
</template>
