<template>

  <div class="flex justify-center">
    <el-button :disabled="current === 1 || total === 0" @click="changePage('prev')">上一页</el-button>
    <el-pagination
      :current-page="current"
      @current-change="onChangePage"
      background
      :page-size="limit"
      layout="pager"
      :total="total">
    </el-pagination>
    <el-button :disabled="current === pages || total === 0" @click="changePage('next')">下一页</el-button>
    <el-pagination
    class="ml-2"
    :current-page="current"
    @current-change="onChangePage"
    background
    :page-size="limit"
    layout="jumper"
    :total="total">
  </el-pagination>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['total', 'current', 'pages', 'limit'])
const emits = defineEmits(['change'])

function onChangePage(val:number) {
  console.log('val>>>>>>>>>>>>>>', val)
  emits('change', val)
}
function changePage(flag: 'next'|'prev'):void {
  if(flag === 'next') {
    if (props.current >= props.pages) return;
    else {
      onChangePage(props.current + 1)
    }
  }else if(flag === 'prev') {
    if (props.current <= 1) return;
    else {
      onChangePage(props.current - 1)
    }
  }
}
// emit

</script>

<style scoped lang="scss">
:deep(.el-pagination) {
  .el-pager {
    .number {
      margin: 0 5px;
    }
    .number.is-active {
      background-color: #022950;
      @apply text-base;
    }
  }
}
</style>
