<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'PaginationControl',
  props: {
    currentPage: {
      type: Number,
      required: true
    },
    totalPages: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      pageNum: this.currentPage
    };
  },
  watch: {
    currentPage(newVal: number) {
      this.pageNum = newVal;
    }
  },
  methods: {
    goToPage(): void {
      // 验证页码范围
      if (this.pageNum < 1) this.pageNum = 1;
      if (this.pageNum > this.totalPages) this.pageNum = this.totalPages;
      this.$emit('page-change', this.pageNum);
    },
    prevPage(): void {
      if (this.currentPage > 1) {
        this.$emit('page-change', this.currentPage - 1);
      }
    },
    nextPage(): void {
      if (this.currentPage < this.totalPages) {
        this.$emit('page-change', this.currentPage + 1);
      }
    }
  }
});
</script>

<template>
  <div class="pagination-control">
    <button class="page-btn" :disabled="currentPage <= 1" @click="prevPage">◀</button>
    <div class="page-input-container">
      <input v-model.number="pageNum" type="number" min="1" :max="totalPages" class="page-input" @change="goToPage" />
      <span class="page-separator">/</span>
      <span class="total-pages">{{ totalPages }}</span>
    </div>
    <button class="page-btn" :disabled="currentPage >= totalPages" @click="nextPage">▶</button>
  </div>
</template>

<style lang="scss" scoped>
.pagination-control {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8f9fa;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;

  .page-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: white;
    color: #666;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    &:hover:not(:disabled) {
      border-color: #1890ff;
      color: #1890ff;
      background: #f0f8ff;
    }
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: #d9d9d9;
    }
  }

  .page-input-container {
    display: flex;
    align-items: center;
    gap: 4px;
    background: white;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #d9d9d9;

    .page-input {
      width: 30px;
      border: none;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #262626;
      -moz-appearance: textfield;
      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }

    .page-separator {
      color: #d9d9d9;
    }

    .total-pages {
      width: 30px;
      font-size: 14px;
      font-weight: 500;
      color: #8c8c8c;
    }
  }
}
</style>
