<template>
  <div class="pagination">
    <ul>
      <li class="arrow" :class="{ disabled: currentPage <= 1 }" @click="changePage(currentPage - 1)">&lt;</li>
      <template v-for="pageNum in displayedPageNumbers" :key="pageNum">
        <li :class="{ active: currentPage === pageNum, disabled: currentPage === pageNum }" @click="changePage(pageNum)">{{ pageNum }}</li>
      </template>
      <li class="arrow" :class="{ disabled: currentPage >= totalPages }" @click="changePage(currentPage + 1)">&gt;</li>
    </ul>
  </div>
</template>
<script>
export default {
  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>