<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  },
  minValue: {
    type: Number,
    default: 0
  },
  maxValue: {
    type: Number,
    default: 100
  }
});

const emit = defineEmits(['update:modelValue']);

const currentValue = ref(props.modelValue);

// 加法操作
const increment = () => {
  if (currentValue.value < props.maxValue) {
    currentValue.value++;
    emit('update:modelValue', currentValue.value);
  }
};

// 减法操作
const decrement = () => {
  if (currentValue.value > props.minValue) {
    currentValue.value--;
    emit('update:modelValue', currentValue.value);
  }
};
const change = () => {
  emit('update:modelValue', currentValue.value);
};
</script>


<template>
  <div class="number-input">
    <button @click="decrement" :disabled="currentValue <= minValue">-</button>
    <el-input style="width: 100px" v-model.number="currentValue" :min="minValue" :max="maxValue" @input="change"/>
    <button @click="increment" :disabled="currentValue >= maxValue">+</button>
  </div>
</template>

<style scoped lang="scss">
.number-input {
  display: flex;
  align-items: center;
}

button {
  width: 30px;
  height: 30px;
  font-size: 18px;
  cursor: pointer;
}

input {
  width: 60px;
  text-align: center;
  margin: 0 5px;
}
</style>