<template>
	<view class="password-input-modal" v-if="isShow">
		<view class="modal-mask" @click="closeModal"></view>
		<view class="modal-content">
			<view class="title">请输入支付密码</view>
			<view class="input-container">
				<view v-for="(item, index) in 6" :key="index" class="input-box">
					{{ password[index] ? '*' : '' }}
				</view>
			</view>
			<view class="keyboard">
				<view v-for="(num, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0, 'delete']" :key="index" class="key"
					@click="handleKeyClick(num)">
					{{ num === 'delete' ? '删除' : num }}
				</view>
			</view>
		</view>
	</view>
</template>

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

	// 接收父组件传递的显示状态
	const props = defineProps({
		isShow: {
			type: Boolean,
			default: false
		}
	});

	// 定义向父组件发送事件
	const emits = defineEmits(['inputComplete', 'close', 'closeModal']);

	// 存储输入的密码
	const password = ref('');

	// 处理键盘点击事件
	const handleKeyClick = (num) => {
		if (num === 'delete') {
			password.value = password.value.slice(0, -1);
		} else if (password.value.length < 6) {
			password.value += num;
		}
		if (password.value.length === 6) {
			emits('inputComplete', password.value);
			password.value = ''
		}
	};

	// 关闭模态框
	const closeModal = () => {
		emits('close');
		password.value = '';
	};
	// 将方法暴露给父组件
	defineExpose({
		closeModal
	});
</script>

<style scoped>
	.password-input-modal {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999;
	}

	.modal-mask {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 30rpx 30rpx 0 0;
	}

	.title {
		text-align: center;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.input-container {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	.input-box {
		width: 90rpx;
		height: 90rpx;
		border: 1px solid #ccc;
		margin: 0 10rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 24rpx;
		border-radius: 10rpx;
	}

	.keyboard {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.key {
		text-align: center;
		padding: 30rpx;
		border: 1rpx solid #ccc;
		font-size: 26rpx;
		border-radius: 8rpx;
	}
</style>