<template>
  <div class="pagination-container">
    <div class="page-button" :class="{ 'disabled-button': currentPage === 1 }" @click="goToPreviousPage"> < </div>
    <div class="page-info">
      <span class="current-page">{{ currentPage }}</span>
      <span>/</span>
      <span class="total-pages">{{ totalPages }}</span>
    </div>
    <div class="page-button" :class="{ 'disabled-button': currentPage === totalPages }" @click="goToNextPage"> > </div>
  </div>
</template>

<script lang="ts" setup>
  import { defineProps, defineEmits, ref, watch } from 'vue';

  const props = defineProps<{
    totalPages: number | undefined;
    initialPage?: number;
  }>();

  const emit = defineEmits<{
    (e: 'update:currentPage', page: number): void;
  }>();

  const currentPage = ref<number>(props.initialPage ?? 1);

  watch(
    () => props.totalPages,
    (newTotal) => {
      if (newTotal && currentPage.value > newTotal) {
        currentPage.value = newTotal;
      }
    },
  );

  // 点击上一页
  function goToPreviousPage() {
    if (currentPage.value > 1) {
      currentPage.value--;
      emit('update:currentPage', currentPage.value);
    }
  }

  // 点击下一页
  function goToNextPage() {
    if (props.totalPages && currentPage.value < props.totalPages) {
      currentPage.value++;
      emit('update:currentPage', currentPage.value);
    }
  }
</script>

<style scoped lang="scss">
  .pagination-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .page-button {
    color: #000;
    font-size: 16px;
    cursor: pointer;
  }
  .page-button:hover {
    color: #1777ff;
  }

  .disabled-button {
    color: #aaa;
    cursor: not-allowed;
  }

  .page-info {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);

    .current-page {
      color: rgba(0, 0, 0, 0.88);
      margin: 0 12px 0 32px;
    }

    .total-pages {
      color: rgba(0, 0, 0, 0.88);
      margin: 0 32px 0 12px;
    }
  }
</style>
