<template>
  <view class="stepper-wrapper">
    <uni-icons type="minus" size="24" color="#999" @click="decrease" />
    <text class="stepper-text">{{ value }}</text>
    <uni-icons type="plus" size="24" color="#999" @click="increase" />
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from "vue";

// Props
const props = defineProps({
  modelValue: {
    type: Number,
    default: 1,
  },
  min: {
    type: Number,
    default: 1,
  },
  max: {
    type: Number,
    default: 100,
  },
});

// Emit
const emit = defineEmits(["update:modelValue"]);

// Local state
const value = ref(props.modelValue);

// 监听外部值变化，同步更新本地状态
watch(
  () => props.modelValue,
  (newValue) => {
    value.value = newValue;
  },
  { immediate: true }
);

// Methods
const decrease = () => {
  if (value.value === 1) return;

  if (value.value > props.min) {
    value.value--;
    emit("update:modelValue", value.value);
  }
};

const increase = () => {
  if (value.value < props.max) {
    value.value++;
    emit("update:modelValue", value.value);
  }
};
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
