<template>
  <div class="pagination flex-center">
    <!-- 첫 페이지로 이동 -->
    <button type="button" :disabled="currentPage <= 1" @click="changePage(1)">
      <DoubleLeftOutlined />
    </button>
    <!-- 이전 페이지로 이동 -->
    <button type="button" :disabled="currentPage <= 1" @click="changePage(currentPage - 1)">
      <LeftOutlined />
    </button>
    <!-- 페이지 번호 버튼 -->
    <template v-for="pageNum in displayedPageNumbers" :key="pageNum">
      <button type="button" :class="{ 'page-number': true, clicked: currentPage === pageNum }" :disabled="currentPage === pageNum" @click="changePage(pageNum)"> {{ pageNum }} </button>
    </template>
    <!-- 다음 페이지로 이동 -->
    <button type="button" :disabled="currentPage >= totalPages" @click="changePage(currentPage + 1)">
      <RightOutlined />
    </button>
    <!-- 마지막 페이지로 이동 -->
    <button type="button" :disabled="currentPage >= totalPages" @click="changePage(totalPages)">
      <DoubleRightOutlined />
    </button>
  </div>
</template>
<script>
import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';

export default {
  components: {
    DoubleLeftOutlined,
    LeftOutlined,
    RightOutlined,
    DoubleRightOutlined,
  },

  props: {
    search: {
      type: Object,
      required: true,
      default: () => ({}),
    }
  },

  computed: {
    // 현재 페이지
    currentPage() {
      return this.search.currentPage;
    },

    // 총 페이지 수
    totalPages() {
      return this.search.totalPageCount > 0 ? this.search.totalPageCount : 1;
    },

    // 표시할 페이지 번호 목록
    displayedPageNumbers() {
      const currentPage = this.currentPage;
      const totalPages = this.totalPages;

      const visiblePages = this.search.pageSize > 0 ? this.search.pageSize : 10;

      // 표시할 페이지 범위 계산
      let startPageNum = Math.max(1, currentPage - Math.floor(visiblePages / 2));
      let endPageNum = Math.min(totalPages, startPageNum + visiblePages - 1);

      // endPage가 최대 페이지 수보다 작을 경우, startPage를 조정
      if (endPageNum - startPageNum + 1 < visiblePages) {
        startPageNum = Math.max(1, endPageNum - visiblePages + 1);
      }

      // 페이지 번호 배열 생성
      const pageNumbers = [];
      for (let i = startPageNum; i <= endPageNum; i++) {
        pageNumbers.push(i);
      }

      return pageNumbers;
    }
  },

  methods: {
    // 페이지 변경 처리
    changePage(pageNum) {
      if (pageNum < 1) pageNum = 1;
      if (pageNum > this.totalPages) pageNum = this.totalPages;

      if (pageNum !== this.currentPage) {
        this.$emit('onChange', pageNum);
      }
    }
  }
}
</script>