<template>
  <view class="input-box">
    <up-icon
      name="minus"
      @click="decrease"
      :size="14"
      color="rgba(0,0,0,0.25)"
    ></up-icon>
    <input
      class="uni-input"
      type="number"
      placeholder="1"
      v-model="num"
      @input="handleInput"
      disabled
    />
    <up-icon
      name="plus"
      @click="increase"
      :size="14"
      color="rgba(0,0,0,0.25)"
    ></up-icon>
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  min: number;
  max: number;
  value: number;
}>();
const emit = defineEmits(["changeValue"]);
const num = ref(props.value);
const handleInput = (event) => {
  const value = parseInt(event.target.value);
  if (!isNaN(value) && value >= 1) {
    num.value = value;
  } else {
    num.value = 1;
  }
};
const increase = () => {
  if (num.value < props.max) {
    num.value++;
    emit("changeValue", num.value)
    
  }
};
const decrease = () => {
  if (num.value > props.min) {
    num.value--;
    emit("changeValue", num.value)
  }
};
</script>
<style lang="scss" scoped>
.input-box {
  display: flex;
  align-items: center;
  justify-items: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0rpx 8rpx;
  border-radius: 5px;
  margin: 0rpx 16rpx;
  .uni-input {
    text-align: center;
    max-width: 100rpx;
    color: rgba(0, 0, 0, 0.75);
  }
}
</style>
