<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-09-04 13:11:33
 * @LastEditors: JC9527
 * @LastEditTime: 2023-09-18 16:07:36
-->
<template>
  <div class="pagination">
    <!-- <span class="custom"
      >共{{ total }}条，显示{{
        total == 0
          ? "0"
          : pageNum == 1
          ? "1"
          : pageSize * (pageNum - 1) + 1
      }}-{{ numberMap() }}条</span
    > -->
    <el-pagination
      background
      :small="true"
      :page-sizes="[10, 15]"
      :total="total"
      layout=" prev, pager, next, sizes, jumper"
      @current-change="currentChange"
      @size-change="sizeChange"
      :current-page.sync="pageNum"
      :page-size.sync="pageSize"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageNum:1,
      pageSize:10,
    }
  },
  props:{
    total:{
      type:Number,
      required:true
    },
  },
  methods:{
    currentChange(e) {
      this.pageNum = e;
      this.$emit('pagesChange',{pageSize:this.pageSize,pageNum:e})
    },
    // 每页显示数改变
    sizeChange(e) {
      this.pageSize = e;
      this.pageNum = 1;
      this.$emit('pagesChange',{pageSize:e,pageNum:this.pageNum})
    },
    //算数
    numberMap() {
      // if (this.total == this.tableData.length) {
      //   return this.total;
      // } else 
      if (
        this.total >
        this.pageNum * this.pageSize
      ) {
        return this.pageNum * this.pageSize;
      } else if (
        this.total < this.pageNum * this.pageSize ||
        this.total == this.pageNum * this.pageSize
      ) {
        return this.total;
      }
    },
  },
  mounted() {
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳至";
  },
}
</script>
<style lang="scss" scoped>
.pagination {
  // margin-top: vh(20);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  // padding-bottom: vh(20);
  ::v-deep .el-pagination__jump {
    margin: 0;
  }
  ::v-deep .el-input--mini .el-input__inner {
    height: 23px;
    line-height: 23px;
  }
  ::v-deep .el-input--mini .el-input__icon {
    line-height: 23px;
  }
  .custom {
    font-size: 12px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #525966;
  }
}
</style>
