<template>
  <el-pagination
    :current-page="pageResult.page"
    :page-size="pageResult.pageSize"
    :page-sizes="[10, 20, 50, 100, 200]"
    :total="pageResult.total"
    align="right"
    background
    class="super-pagination"
    :layout="layout"
    :pager-count="pagerCount"
    @size-change="val => $emit('size-change', val)"
    @current-change="val => $emit('current-change', val)"
  >
  </el-pagination>
</template>

<script>
export default {
  name: 'SuperPagination',
  props: {
    pageResult: {
      typeof: Object,
      default: _ => ({
        page: 1,
        pageSize: 20,
        total: 0
      })
    },
    pagerCount:{
      type: Number,
      default: 7
    },
    layout:{
      type: String,
      default: 'total, prev, pager, next, sizes, jumper'
    }
  }
}
</script>

<style lang="scss">
@import "~@/assets/css/element-variables";

.super-pagination {

  .el-pagination__total, .el-pagination__jump {
    color: $--color-white !important;
  }

  .el-pagination__jump {
    display: inline-flex !important;
    align-items: center;
    column-gap: 3px;
    margin-left: 10px;

    .el-pagination__editor {
      width: 45px;

      .el-input__inner {
        font-size: 14px;
      }
    }
  }

  .el-pager {
    transition: all 0.15s;

    .number, .more {
      color: $--color-white !important;
      background-color: $--system-box-color1 !important;

      &::before {
        color: $--color-white !important;
      }

      &:hover {
        color: $--system-hover-active-text !important;

        &::before {
          color: $--system-hover-active-text !important;
        }
      }

      &.active {
        background-color: $--system-hover-active-text !important;
        color: $--color-white !important;
      }
    }
  }

  button {
    background-color: $--system-box-color1 !important;

    &[disabled] {
      background-color: $--system-disabled-bgColor !important;

      i {
        color: $--color-text-placeholder !important;
      }

      &:hover {
        i {
          color: $--color-text-placeholder !important;
        }
      }
    }

    &:hover {
      i {
        color: $--system-hover-active-text !important;
      }
    }
  }
}
</style>
