<template lang="html">
  <div
    :class="{ 'component-pagination': true, [className]: className }"
    id="pagination"
    v-show="pagination.totalPageCount>0"
  >
    <div class="pagination-button-type">
      <a
        class="first-page"
        @click="excute(1)"
        title="첫 번째 페이지로 이동"
      ></a>
      <a
        class="prev"
        @click="excute(currentPage - 1)"
        title="이전 페이지로 이동"
      ></a>
      <a
        @click="excute(i)"
        v-for="i in createRange"
        :class="{ active: currentPage == i }"
      >
        {{ i }}
      </a>
      <a
        class="next"
        @click="excute(currentPage + 1)"
        title="다음 페이지로 이동"
      ></a>
      <a
        class="end-page"
        @click="excute(pagination.totalPageCount)"
        title="마지막 페이지로 이동"
      ></a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 0,
    },
    pagination: Object,
    click: Function,
  },
  emits: ["update:currentPage"],
  data: function () {
    return {};
  },
  methods: {
    excute: function (i) {
      if (i > 0 && i <= this.pagination.totalPageCount) {
        if (i != this.currentPage) {
          this.$emit("update:currentPage", i); //부모 currentPage에 선택한 page번호 할당
          this.click(i); //부모 function 실행
        } else {
          return;
        }
      } else {
        // alert("이동할 페이지가 없습니다.");
      }
    },
  },
  computed: {
    createRange: function () {
      var range = [];
      for (
        var i = this.pagination.startPage;
        i <= this.pagination.endPage;
        i++
      ) {
        range.push(i);
      }
      if (range.length == 0) {
        range.push(1);
      }
      return range;
    },
  },
  watch: {},
  //beforeCreate: function () {},
  //created: function () {},
  //beforeUpdate: function () {},
  //updated: function () {},
  mounted: function () {},
};
</script>
