<template>
  <div v-if="visible" class="pagination-container">
    <a-pagination
      :total="total"
      :current="current"
      :page-size="pageSize"
      :show-total="true"
      :show-page-size="true"
      :page-size-options="[10, 20, 50, 100]"
      :show-jumper="true"
      :hide-on-single-page="false"
      size="default"
      @change="handlePageChange"
      @page-size-change="handlePageSizeChange"
    />
  </div>
</template>

<script setup>
// 定义props
const props = defineProps({
  total: {
    type: Number,
    default: 0
  },
  current: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  visible: {
    type: Boolean,
    default: true
  }
});

// 定义emit事件
const emit = defineEmits(['page-change', 'page-size-change']);

// 处理页码变化
const handlePageChange = (page) => {
  emit('page-change', page);
};

// 处理每页条数变化
const handlePageSizeChange = (pageSize) => {
  emit('page-size-change', pageSize);
};
</script>

<style scoped>
.pagination-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-bg-1);
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 10;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  margin-top: 0;
}

.pagination-container :deep(.arco-pagination) {
  margin: 0;
}

.pagination-container :deep(.arco-pagination-item) {
  border-radius: 6px;
  margin: 0 4px;
  transition: all 0.2s ease;
}

.pagination-container :deep(.arco-pagination-item:hover) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination-container :deep(.arco-pagination-item-active) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.pagination-container :deep(.arco-pagination-prev),
.pagination-container :deep(.arco-pagination-next) {
  border-radius: 6px;
  transition: all 0.2s ease;
}

.pagination-container :deep(.arco-pagination-prev:hover),
.pagination-container :deep(.arco-pagination-next:hover) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination-container :deep(.arco-pagination-size-changer) {
  margin-left: 16px;
}

.pagination-container :deep(.arco-pagination-jumper) {
  margin-left: 16px;
}

.pagination-container :deep(.arco-pagination-total) {
  color: var(--color-text-2);
  font-size: 14px;
}
</style>
