<template>
  <div class="page-turner" v-if="!showHideOnSinglePage">
    <div
      :class="['btn-prev', { disabled: current == 1 }]"
      @click="changePage(-1)"
    >
      <span> 上一页 </span>
    </div>
    <div class="page-info">
      <div>
        当前 <span>{{ current }} / {{ sizeTotal }}</span> 页
      </div>
      <div>
        共 <span>{{ total }}</span> 条信息
      </div>
    </div>
    <div
      :class="[
        'btn-next',
        { disabled: current == sizeTotal || this.total == 0 },
      ]"
      @click="changePage(1)"
    >
      <span> 下一页 </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    current: {
      type: Number,
      required: true,
      default: 0,
    },
    size: {
      type: Number,
      required: true,
      default: 0,
    },
    total: {
      type: Number,
      required: true,
      default: 0,
    },
    hideOnSinglePage: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {};
  },

  computed: {
    sizeTotal() {
      return Math.ceil(this.total / this.size);
    },
    showHideOnSinglePage() {
      return !!this.hideOnSinglePage && this.total / this.size <= 1;
    },
  },
  methods: {
    changePage(cur) {
      if (
        (this.current == 1 && cur == -1) ||
        (this.current == this.sizeTotal && cur == 1) ||
        this.total == 0
      ) {
        return;
      }
      this.$emit("change", this.current + cur);
    },
  },
};
</script>

<style lang="less" scoped>
.page-turner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.btn-prev,
.btn-next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 150px;
  height: 44px;
  border: 1px solid var(--main-theme-color);
  border-radius: 8px;
  color: var(--main-theme-color);
  cursor: pointer;
  span {
    font-size: 20px;
  }
}

.page-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  gap: 20px;
  color: #353535;
  font-size: 18px;
  span {
    color: var(--main-theme-color);
  }
}
.disabled {
  border-color: #c0c4cc;
  color: #353535;
  cursor: no-drop;
}
</style>
