<template>
  <el-pagination class="sa-pagination" :small="small" v-model:currentPage="pageData.page"
    v-model:page-size="pageData.size" :page-sizes="[20, 50, 100]" :layout="layout" :pager-count="5"
    :total="pageData.total" @size-change="changeSize" @current-change="changeCurrent" />
</template>
<script>
export default {
  name: 'SaPagination',
};
</script>
<script setup>
const emit = defineEmits(['updateFn']);
const props = defineProps({
  pageData: {
    type: Object,
  },
  small: {
    type: Boolean,
    default: false,
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper',
  },
});

function changeSize(size) {
  props.pageData.size = size;
  emit('updateFn');
}
function changeCurrent(page) {
  props.pageData.page = page;
  emit('updateFn');
}
</script>

<style lang="scss" scoped>
.sa-pagination {
  padding: 0;

  @media only screen and (max-width: 768px) {
    &.el-pagination {
      :deep() {
        .el-pagination__jump {
          display: none !important;
        }

        .el-pagination__sizes {
          display: none !important;
        }

        .el-pager {
          li {
            display: none;

            &.is-active {
              display: flex;
            }
          }
        }
      }
    }
  }
}
</style>
