<template>
  <div class="content_body" :style="{ color }">
    <div class="flex-sb">
      <div class="left border" :style="{ background }">Totals：{{ total }}</div>
      <div class="right">
        <van-icon
          class="border"
          :style="{ background }"
          size="14px"
          name="arrow-left"
          @click.stop="previousPage"
        />
        <div class="border num" :style="{ background }">{{ page }}</div>
        <van-icon
          :style="{ background }"
          class="border"
          size="14px"
          name="arrow"
          @click.stop="nextPage"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
const props = defineProps({
  total: {
    type: Number,
    default: 0,
    required: true,
  },
  pageSize: {
    type: Number,
    default: 10,
    required: false,
  },
  color: {
    type: String,
    default: "#fff",
    required: false,
  },
  background: {
    type: String,
    default: "#21212a",
    required: false,
  },
});
const page = ref<umber>(1);
const num = computed(() => {
  if (props.total === 0) {
    return 1;
  } else {
    return Math.ceil(props.total / props.pageSize);
  }
});
const emit = defineEmits(["on-previous", "on-nextPage"]);
function previousPage() {
  // 上一页
  if (page.value === 1) return;
  page.value--;
  emit("on-previous", page.value);
}
function nextPage() {
  if (page.value === num.value) return;
  page.value++;
  // 下一页
  emit("on-nextPage", page.value);
}
onMounted(async () => {});
</script>
<style lang="scss" scoped>
.content_body {
  justify-content: space-between;
  width: 100%;
  margin-top: 0.2rem;
  .border {
    font-size: 0.3rem;
    background-color: #21212a;
    height: 0.8rem;
    line-height: 0.8rem;
    padding: 0 0.3rem;
    border-radius: $border-radius;
  }
  .right {
    display: flex;
    .num {
      margin: 0 0.3rem;
    }
  }
}
</style>
