<template>
	<view class="integral-modal" v-if="visible">
		<view class="modal-mask" @click="closeModal"></view>
		<view class="modal-content">
			<view class="input-wrapper" style="padding-bottom: 100px;">
				<input type="number" v-model="inputValue" :min="minValue" :max="maxValue" @input="handleInput"
					:placeholder="instructions" />
			</view>
			<!-- <view class="instructions">{{ instructions }}</view> -->
			<view class="u-flex gap-20" style="width: 100%; padding-bottom: 40px;">
				<view class="u-flex-1">
					<up-button style="margin-top: 20rpx;" @click="IntegralInputclose">取消</up-button>
				</view>
				<view class="u-flex-1">
					<up-button type="primary" @click="confirmIntegral" text="确定"></up-button>
					</view>
			</view>

		</view>
	</view>
</template>

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

	// 定义接收的属性
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		},
		minValue: {
			type: Number,
			default: 1
		},
		maxValue: {
			type: Number,
			default: 100
		},
		instructions: {
			type: String,
			default: '请输入有效积分值'
		}
	});

	// 定义事件发射器
	const emits = defineEmits(['confirm', 'close', 'IntegralInputclose']);

	// 定义响应式变量
	const inputValue = ref('');

	// 处理输入事件，确保输入为整数且在有效范围内
	const handleInput = (e) => {
		// 兼容不同平台获取输入值的方式
		let value = e.detail ? e.detail.value : (e.target ? e.target.value : '');
		// if (value > props.maxValue || value < props.minValue) {
		// 	inputValue.value = value > props.maxValue ? props.maxValue : props.minValue
		// 	return false;
		// }
		// 只允许输入数字，去除非数字字符
		value = value.replace(/\D/g, '');
		if (value) {
			value = parseInt(value, 10);
			// 限制输入值在最小和最大值之间
			// if (value < props.minValue) {
			// 	value = props.minValue;
			// } else if (value > props.maxValue) {
			// 	value = props.maxValue;
			// }
			inputValue.value = value.toString();
		} else {
			inputValue.value = '';
		}
	};

	// 确认积分并返回值给父组件
	const confirmIntegral = () => {
		if (inputValue.value < props.minValue || inputValue.value > props.maxValue) {
			uni.showToast({
				title: '输入的积分值不在有效范围内',
				icon: 'none'
			});
			return false;
		}
		if (inputValue.value) {
			const value = parseInt(inputValue.value, 10);
			if (value >= props.minValue && value <= props.maxValue) {
				emits('confirm', value);
				emits('close');
			} else {
				uni.showToast({
					title: '输入的积分值不在有效范围内',
					icon: 'none'
				});
			}
		} else {
			uni.showToast({
				title: '请输入有效的积分值',
				icon: 'none'
			});
		}
	};

	const IntegralInputclose = () => {
		emits('IntegralInputclose');
	}

	// 关闭模态框
	const closeModal = () => {
		emits('close');
	};
</script>

<style scoped>
	.integral-modal {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
	}
	.gap-20{
		gap: 20rpx;
	}
	.modal-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		text-align: center;
	}

	.input-wrapper {
		margin-bottom: 15px;
		width: 100%;
	}

	.instructions {
		margin-bottom: 20px;
		color: #666;
	}
</style>