<template>
  <div class="page-container">
    <svg-icon class="page-icon" name="left" size="25" @click="emit('changePage', 'pre')" />
    <input
      :value="page_no"
      class="page-input"
      type="number"
      @change="handleInput"
      @blur="handleInput" />
      <span class="page-split-lint">/</span>
    {{ maxNum }}
    <svg-icon class="page-icon" name="right" size="25" @click="emit('changePage', 'next')" />
  </div>
</template>

<script setup>
const props = defineProps({
  maxNum: {
    type: Number,
    default: () => 1
  },
  page_no: {
    type: Number || String,
    default: () => 1
  }
});
const emit = defineEmits(['changePage']);
const handleInput = (e) => {
  let value = e.target.value;
  if (value > props.maxNum || value < 1) {
    e.target.value = 1;
    value = 1;
  }
  emit('changePage', value);
};
</script>
<style lang="less" scoped>
.page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  .page-icon {
    margin: 0 25px;
  }
  .page-input {
    height: 31px;
    width: 42px;
    border: 0;
    text-align: center;
  }
  .page-split-lint {
    margin: 0 10px;
  }
}
</style>
