<template>
  <div
    :class="[
      'el-pagination',
      {
        'is-background': this.background,
        'el-pagination--small': this.small,
      },
    ]"
  >
    <total></total> <sizes :pageSizes="this.pageSizes"></sizes>
    <jumper></jumper> <prev></prev>
    <pager
      :currentPage="this.internalCurrentPage"
      :pageCount="this.internalPageCount"
      :pagerCount="this.pagerCount"
      @change="this.handleCurrentChange"
      :disabled="this.disabled"
    ></pager>
    <next></next>
  </div>
</template>

<script>
import { Pagination } from 'element-ui';
import Pager from './pager.vue';
import Jumper from './jumper.js';

export default {
  extends: Pagination,
  components: {
    // MySlot: {
    //   render(h) {
    //     return this.$parent.$slots.default
    //       ? this.$parent.$slots.default[0]
    //       : '';
    //   },
    // },

    Total: {
      render(h) {
        return typeof this.$parent.total === 'number' ? (
          <span class='el-pagination__total'>
            总记录 {this.$parent.total} 条
            <i class='pagination__pageNum'>
              {this.$parent.internalCurrentPage}
            </i>
            /{this.$parent.internalPageCount} 页
          </span>
        ) : (
          ''
        );
      },
    },

    Jumper,

    Pager,
  },
};
</script>

<style lang="scss">
.md-pagination {
  color: #333;
  display: flex;
  align-items: center;
  .btn-next,
  .btn-prev {
    color: #477cfa;
  }
  span.el-pagination__total {
    margin-right: 0;
    .pagination__pageNum {
      margin-left: 17px;
      font-style: normal;
      color: #477cfa;
    }
  }
  span.el-pagination__sizes {
    margin-right: 0;
    margin-left: 12px;
  }
  span.el-pagination__jump {
    margin-left: 12px;
    margin-right: 17px;
    span,
    button {
      height: 23px;
      line-height: 23px;
    }
    button {
      margin-left: 9px;
      background-color: #1459fc;
      color: #fff;
      width: 38px;
      padding: 0;
      vertical-align: baseline;
    }
  }
}
</style>
