<template>
  <div>
    <!-- 在父组件中使用分页组件 -->
    <el-pagination
      class="pagi-default"
      background
      :total="total"
      :page-size="pageSize"
      :page-sizes="[5, 10, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :currentPage="currentPage"
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
export default {
  name: "PaginationComponent",
  props: {
    total: {
      type: Number,
      default: -1,
    },
    showTotal: {
      type: Boolean,
      default: false,
    },
    pageSize: {
      type: Number,
      default: 5,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
  },

  watch: {
    currentPage(newVal) {
      this.currentPage = newVal;
    },
  },
  methods: {
    handlePageChange (page) {
      this.$emit("pageChange", page);
    },
    handleSizeChange(size) {
      this.$emit("sizeChange", size);
    },
  },
};
</script>
<style lang="scss" scoped>
.pagi-default {
  height: 60px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #fff;
  .pagi-total {
    margin-right: auto;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #404040;
    .pagi-num {
      font-family: DIN;
      font-weight: 500;
      font-size: 18px;
      color: #016bff;
    }
  }
}
</style>
