<!-- src/components/Pagination.vue -->
<template>
  <div>
    <div v-if="total === 0" >
      <el-empty :image-size="200" />
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="sizes, prev, pager, next, total"
        :total="total"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
defineProps({
  total: {
    type: Number,
    default: 0
  },
  pageSize: {
    type: Number,
    default: 10
  },
  currentPage: {
    type: Number,
    default: 1
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 50]
  }
})

const emit = defineEmits(['update:currentPage', 'pageChange','update:pageSize'])

const handleCurrentChange = (page) => {
  emit('update:currentPage', page)
  emit('pageChange', page)
};
const handleSizeChange = (size) => {
  console.log('Size changed to:', size);
  emit('update:pageSize', size)
  emit('pageChange', 1, size) // Reset to first page on size change
};
</script>

<style lang="scss">
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  .el-pager{
    .number{
      &.is-active {
        background: linear-gradient(90deg, #0055FE 0%, #C832FA 100%);
      }
    }
  }
}
.el-pagination.is-background .el-pager li,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next
{
  background-color: #ffffff;
}
</style>