<template>
    <ElTable
      :data="props.data"
      v-bind="$attrs"
      v-on="$attrs"
    >
      <slot name="table"></slot>
    </ElTable>

      <slot name="sum"></slot>
    <div class="pagination-container">
      <ElPagination
      hide-on-single-page
      :current-page="props.pagination.pageNo"
      :page-size="props.pagination.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="props.pagination.total"
      :layout="props.layout"
      @current-change="handlePageChange"
      @size-change="handlePageSizeChange"
      background
    />
    </div>

</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import { ElTable, ElPagination } from 'element-plus';

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  layout: {
    type: String,
    default: 'total, prev, pager, next, sizes, jumper'
  },
  pagination: {
    type: Object,
    default: () => ({
      pageNo: 1,
      pageSize: 10,
      total: 0
    })
  }
});
const emit = defineEmits();
const handlePageChange = (newPage) => {
  emit('changePage', newPage);
};
const handlePageSizeChange = (newSize) => {
  emit('changePageSize', newSize);
};

</script>
<style lang="scss" scoped>
  .el-pagination {
    margin-top: 10px;
  }
  .pagination-container {
    display: flex;
    justify-content: flex-end;
}
</style>
