<template>
	<view class="cu-stepper flex align-center">
		<button :disabled="mindis" @click="handler(-1)" class="cu-btn text-xxl">
			<text style="transform: translateY(-5upx);">-</text>
		</button>
		<input @input="input" :value="vr" type="number" />
		<button :disabled="maxdis" @click="handler(1)" class="cu-btn text-xxl">+</button>
	</view>
</template>

<script>
export default {
	props: {
		value: { type: Number/String, value: 1 },
		max: { type: Number / String, value: 1000000 },
		min: { type: Number / String, value: 1}
	},
	computed:{
		mindis(){
			let min =this.min || 1;
			return this.vr==min
		},
		maxdis(){
			let max=this.max || 1000000;
			return this.vr==max
		}
	},
	data() {
		return {
			vr:this.value || 1
		};
	},
	methods: {
		input(e) {
			let value= e.detail.value * 1;
			if (this.max ) value = value > this.max * 1 ? this.max * 1 : value;
			if (this.min) value = value < this.min * 1 ? this.min * 1 : value;
			this.vr=value;
			this.$emit('change', value);
		},
		handler(val) {
			let value=  this.vr*1 || 1;
			value += val*1;
			if (this.max) value = value > this.max * 1 ? this.max * 1 : value;
			if (this.min) value = value < this.min * 1 ? this.min * 1 : value;
			this.vr=parseInt(value);
			this.$emit('change', parseInt(value));
		}
	}
};
</script>

<style lang="scss" scoped>
.cu-stepper {
	input {
		background-color: #f0f0f0;
		width: 100upx;
		margin: 0 5upx;
		padding-left: 10upx;
		padding-right: 10upx;
		text-align: center;
		height: 65upx !important;
		border-radius: 5upx;
	}
}
</style>
