<template>
  <div class="page-container">
    <svg-icon name="left" size="20" @click="emit('changePage', 'pre')" />
    <input
      :value="page_no"
      class="page-input"
      type="number"
      @change="handleInput"
      @blur="handleInput" />
    /
    <div>{{ maxNum }}</div>
    <svg-icon name="right" size="20" @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;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  .page-input {
    height: 31px;
    width: 66px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    text-align: center;
    text-indent: 0;
  }
}
</style>
