<template>
	<view class="numberValue">
		<view class="fuHao" @click="calculate(-1)">-</view>
		<view class="numberValue-card">
			<input type="number" :value="value" @input="changeInput" class="numberValue-input" placeholder="请输入比例" />
			<text class="percentage">%</text>
		</view>
		<view class="fuHao" @click="calculate(1)">+</view>
	</view>
</template>

<script>
	export default {
		name: "NumberBox",
		props: {
			value: {
				type: [Number, String],
			},
			maxValue:{
				type: Number,
				default: 30,
			}
		},
		watch: {

		},
		data() {
			return {};
		},
		methods: {
			calculate(value) {
				let num = Number(this.value) + value;
				if (num > this.maxValue) {
					if(num<this.maxValue +1){
						this.$nextTick(() => {
							this.$emit('input', this.maxValue);
						});
						return
					}
					uni.showToast({
						title: `不能大于${this.maxValue}%`,
						icon: "none",
					});
				} else if (num < 0) {
					if(num>-1){
						this.$nextTick(() => {
							this.$emit('input', 0);
						});
						return
					}
					uni.showToast({
						title: `不能小于0%`,
						icon: "none",
					});
				}else{
					this.$nextTick(() => {
						this.$emit('input', num);
					});
				}
			},
			changeInput(event) {
				let value = event.detail.value;
				this.$emit('input', value);
				// 将输入值转为数字（处理可能的字符串输入）
				let num = Number(value);
				// 处理非数字的情况（如输入非数字字符时，默认设为0）
				if (isNaN(num)) {
					num = 0;
				}
				// 边界值处理
				if (num > this.maxValue) {
					num = this.maxValue;
					this.$nextTick(() => {
						this.$emit('input', num);
					});
				} else if (num < 0) {
					num = 0;
					this.$nextTick(() => {
						this.$emit('input', num);
					});
				}

			}
		}
	};
</script>

<style scoped lang="less">
	.numberValue {
		display: flex;
		gap: 12rpx;

		.numberValue-card {
			position: relative;
			width: 140rpx;
			padding-right: 40rpx;
			height: 46rpx;
			background: #F6F6F6;

			.numberValue-input {
				width: 140rpx;
				height: 46rpx;
				background: #F6F6F6;
				border-radius: 6rpx;
				text-align: center !important;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.percentage {
				position: absolute;
				right: 9rpx;
				top: 50%;
				transform: translateY(-50%);
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
				line-height: 37rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.fuHao {
			font-weight: 500;
			font-size: 34rpx;
			color: #333333;
			line-height: 48rpx;
			text-align: left;
			font-style: normal;
		}

	}
	.uni-input-placeholder{
		font-weight: 400;
		font-size: 24rpx;
		color: #D1CCCC;
		line-height: 33rpx;
		text-align: center;
		font-style: normal;
	}
</style>