<template>
  <div>
    <van-pagination class="page-com" v-model="pageNumber" :total-items="total" :items-per-page="per" force-ellipses
      @change="checkPage">
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
    </van-pagination>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  page: Number,
  total: Number,
  per: Number
})

const pageNumber = computed({
  get() {
    return props.page
  },
  set(val) {
    // console.log('val', val)
    // emit('changePage', val)
  }
})

const emit = defineEmits(['changePage'])

const checkPage = (data) => {
  emit('changePage', data)
}
</script>

<style lang="scss" scoped>
::v-deep .van-pagination {
  justify-content: center;
  font-size: 13px;

  .van-pagination__item {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    color: #000000;
    height: 24px;
    min-width: 24px;
    max-width: 40px;
    margin: 0 4.5px 0 0;
    border-radius: 2px;
    border: 1px solid #FFFFFF;

    @media screen and (min-width:1440Px) and (max-width: 100vw) {
      height: 28px;
      min-width: 28px;
      max-width: 49px;
      font-size: 16px;
      line-height: 16px;
    }

    button[disabled]:hover {
      cursor: default !important;
    }
  }

  .van-pagination__item:hover {
    color: #ff6d00;
    border-color: #ff6d00;
  }


  .van-pagination__item--active,
  .van-pagination__item--active:hover,
  .van-pagination__item:active {
    border: 1px solid #ff6d00;
    color: #FFFFFF;
    background-color: #ff6d00;
  }

  .van-pagination__item--disabled:hover,
  .van-pagination__item--disabled:active {
    border: 1px solid #fff;
    color: #323233;
    background-color: transparent;
    cursor: default !important;
  }
}
</style>
