<template>
  <div class="pagination flex-center">
    <button type="button" :disabled="search.currentPage === search.startPage" @click="$emit('onChange', search.startPage)">
      <DoubleLeftOutlined />
    </button>
    <button type="button" :disabled="!search.existPrevPage" @click="$emit('onChange', (search.currentPage - 1))">
      <LeftOutlined />
    </button>
    <template v-for="idx in search.totalPageCount" :key="idx">
      <button type="button" :class="{ 'page-number': true, clicked: search.currentPage === idx }" :disabled="search.currentPage === idx" @click="$emit('onChange', idx)">{{ idx }}</button>
    </template>
    <button type="button" :disabled="!search.existNextPage" @click="$emit('onChange', (search.currentPage + 1))">
      <RightOutlined />
    </button>
    <button type="button" :disabled="search.currentPage === search.endPage" @click="$emit('onChange', search.endPage)">
      <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,
      default: {},
    }
  },

  methods: {},
}
</script>
<style scoped>
button:disabled {
  cursor: not-allowed;
}
</style>