<template>
  <div class="pagination">
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :pager-count="5"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
      />
  </div>
</template>

<script>
export default {
  props:{
    total: Number,
  },
  data() {
    return {
      pageSize: 6,
      currentPage: 1,
    }
  },
  mounted() {},
  methods: {
    handleCurrentChange(val) {
      console.log(val)
      this.currentPage = val
      this.$emit("onChangePage", val);
    },
  },
}
</script>

<style lang="scss" scoped>
.pagination {
  position: relative;
  ::v-deep .el-pagination {
    font-size: 12px;
    .btn-prev, .btn-next {
      background: none;
      height: 80px;
    }
    .el-icon-arrow-left {
      position: relative;
    }
    .el-icon-arrow-left:before {
      content: '';
      display: inline-block;
      background-image: url('./../assets/common/Previous.png');
      font-size: 12px;
      width: 80px;
      height: 80px;
      position: absolute;
      top: -65px;
      left: -200%;
      // transform: translate(-50%, 50%);
    }
    .el-icon-arrow-right {
      position: relative;
    }
    .el-icon-arrow-right:before {
      content:  '';
      display: inline-block;
      background-image: url('./../assets/common/Next.png');
      font-size: 12px;
      width: 80px;
      height: 80px;
      position: absolute;
      top: -65px;
      right: -200%;
    }
    button {
      height: 20px;
    }
    .el-pager {
      li {
        min-width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        margin: 0 5px;
        border-radius: 50%;
        border: 1px solid #2d2738;
        background: #2d2738;
        color: #fff;
        border-radius: 8px;
      }
      li.active {
        font-size: 12px;
        background: #5d5275;
        border: 1px solid #5d5275;
        color: #FFFFFF;
        font-size: 14px;
      }
      .more {
        &::before {
          line-height: 20px;
        }
      }
    }
    
  }
}

</style>
