<script setup lang="ts">
const props = defineProps<{
  page: number
  pageSize: number
  total: number
  loading?: boolean
}>()

const emit = defineEmits<{
  (event: 'change', page: number): void
}>()

function goPrev() {
  if (props.page <= 1 || props.loading) {
    return
  }

  emit('change', props.page - 1)
}

function goNext() {
  if (props.loading || props.page * props.pageSize >= props.total) {
    return
  }

  emit('change', props.page + 1)
}
</script>

<template>
  <footer class="pagination-bar">
    <span>第 {{ page }} 页，共 {{ Math.max(1, Math.ceil(total / pageSize)) }} 页，合计 {{ total }} 条</span>
    <div class="actions">
      <el-button :disabled="page <= 1 || loading" round @click="goPrev">上一页</el-button>
      <el-button :disabled="page * pageSize >= total || loading" round @click="goNext">下一页</el-button>
    </div>
  </footer>
</template>

<style scoped>
.pagination-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  color: #64748b;
  font-size: 13px;
}

.actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 780px) {
  .pagination-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
