<template>
  <div class="content_body flex-sb">
    <div class="pageNum" @click.stop="lookAllGame">
      Todos
      <span style="color: #E77928;">
        {{ total }}
      </span>
    </div>
    <div class="pageNum num" @click.stop="previousPage">
      <van-icon size="14px" name="arrow-left" />
    </div>
    <div class="pageNum num" @click.stop="nextPage">
      <van-icon size="14px" name="arrow" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
onMounted(async () => {});
const props = defineProps({
  total: {
    type: Number,
    default: 0,
    required: true,
  },
});
const emit = defineEmits(["on-previous", "on-nextPage", "on-look"]);
function previousPage() {
  // 上一页
  emit("on-previous");
}
function lookAllGame() {
  emit("on-look");
}
function nextPage() {
  // 下一页
  emit("on-nextPage");
}
</script>
<style lang="scss" scoped>
.content_body {
  justify-content: flex-end;
  padding: 0.2rem 0 0.2rem 20px !important;
  .pageNum {
    background-color: #292D36 !important;
    padding: 0.2rem .1rem;
    height: .4rem;
    font-size: 0.3rem;
    border-radius: .1rem;
    cursor: pointer;
    margin: 0 2px;
    text-align: center;
  }
  .num{
    padding: .2rem !important;
  }
}
</style>
