<template>
  <div class="ws-pagenate-type-a">
    <WsIconBtn
      v-if="lastPage>1&&currentPage!=1"
      @click="$_onClick(1)"
    >mdi-page-first</WsIconBtn>
    <WsIconBtn
      v-if="lastPage>1&&currentPage!=1"
      @click="$_onClick(currentPage-1)"
    >mdi-chevron-left</WsIconBtn>
    <WsBlockBtn
      v-if="currentPage-2>=1"
      @click="$_onClick(currentPage-2)"
    >{{currentPage-2}}</WsBlockBtn>
    <WsBlockBtn
      v-if="currentPage-1>=1"
      @click="$_onClick(currentPage-1)"
    >{{currentPage-1}}</WsBlockBtn>
    <WsBlockBtn active>{{currentPage}}</WsBlockBtn>
    <WsBlockBtn
      v-if="currentPage+1<=lastPage"
      @click="$_onClick(currentPage+1)"
    >{{currentPage+1}}</WsBlockBtn>
    <WsBlockBtn
      v-if="currentPage+2<=lastPage"
      @click="$_onClick(currentPage+2)"
    >{{currentPage+2}}</WsBlockBtn>
    <WsBlockBtn
      v-if="currentPage+2<lastPage"
      disabled
    >...</WsBlockBtn>
    <WsIconBtn
      v-if="lastPage>1&&currentPage!=lastPage"
      @click="$_onClick(currentPage+1)"
    >mdi-chevron-right</WsIconBtn>
    <WsIconBtn
      v-if="lastPage>1&&currentPage!=lastPage"
      @click="$_onClick(lastPage)"
    >mdi-page-last</WsIconBtn>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: [Number, String],
      default: 1
    },
    lastPage: {
      type: Number,
      default: 1
    }
  },
  methods: {
    $_onClick(page) {
      this.$emit("pageto", page);
    }
  }
};
</script>

<style lang="scss">
@import "../assets/scss/ws-pagenate-type-a.scss";
</style>