<!-- 分页组件 -->
<template>
  <div class>
    <el-empty v-if="!total&&emptyShow" description="暂无数据"></el-empty>
    <div class="page" :style="{'padding':`${padding} 0` }">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="sizeChange"
        @current-change="currentChange"
        @prev-click="prevClick"
        @next-click="nextClick"
        :hide-on-single-page="total?false:true"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    padding: {
      type: Number,
      default: () => 40
    },
    // 总条数
    total: {
      type: Number,
      default: () => 0
    },
    // 每页多少条
    pageSize: {
      type: Number,
      default: () => 9
    },
    // 当前在第几页
    currentPage: {
      type: Number,
      default: () => 1
    },
    // 是否显示无数据图标
    emptyShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    //这里存放数据
    return {};
  },
  watch: {
    total(val, vala) {
      console.log(val, vala, "----");
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //方法集合
  methods: {
    // 每页条数发生变化
    sizeChange(e) {
      console.log(e, "每页条数发生变化");
    },
    // 页数改变时
    currentChange(e) {
      this.$emit("currentChange", e);
      console.log(e, "页数发生变化");
    },
    // 点击上一页
    prevClick(e) {
      console.log(e, "点击上一页");
      this.$emit("prevClick", e);
    },
    // 点击下一页
    nextClick(e) {
      console.log(e, "点击下一页");
      this.$emit("nextClick", e);
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style>
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: var(--themeColor);
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #fff;
  color: var(--themeColor);

  border: 1px solid #dddddd;

  border-radius: 6px;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  border: 1px solid #dddddd;

  border-radius: 6px;
}
</style>
<style lang="scss" scoped>
.el-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page {
  padding: 50px 0;
}
</style>
