<template>
  <div class="page-wrap">
    <text class="btn prev" @click="prev">上一页</text>
    <text class="btn">{{current + '/' + total}}</text>
    <text class="btn next" @click="next">下一页</text>
  </div>
</template>

<script>
export default {
  props: {
    current: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 1
    }
  },
  prev() {
    if (this.current === 1) return;
    this.$emit("prev");
  },
  next() {
    if (this.current === this.total) return;
    this.$emit("next");
  }
}
</script>

<style lang="less" scoped>
.page-wrap {
  margin: 40px 30px;
  justify-content: space-between;
  align-items: center;

  text {
    width: 165px;
    height: 55px;
    background-color: #f7f7f7;
    color: #3284ff;
    font-size: 30px;
    text-align: center;
    border-radius: 6px;
  }
}
</style>
