<!-- components/IDCardInput.vue -->
<template>
	<view class="idcard-input-wrapper">
		<input v-model="inputValue" class="idcard-input" placeholder="请输入18位身份证号码" type="text" maxlength="18"
			@input="handleInput" @blur="handleBlur" />
		<text v-if="showClear && inputValue" class="clear-btn" @click="clearInput">×</text>
	</view>
</template>

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

	const props = defineProps({
		modelValue: String,
		showClear: {
			type: Boolean,
			default: true
		}
	});

	const emit = defineEmits(['update:modelValue', 'change']);

	const inputValue = ref(props.modelValue || '');

	// 处理输入
	const handleInput = (e) => {
		const value = e.detail.value.toUpperCase();
		inputValue.value = value;
		emit('update:modelValue', value);

		// 验证身份证格式
		const isValid = validateIDCard(value);
		emit('change', value, isValid);
	};

	// 失焦验证
	const handleBlur = () => {
		const isValid = validateIDCard(inputValue.value);
		emit('change', inputValue.value, isValid);
	};

	// 清空输入
	const clearInput = () => {
		inputValue.value = '';
		emit('update:modelValue', '');
		emit('change', '', false);
	};

	// 身份证验证函数
	const validateIDCard = (idCard) => {
		if (!idCard) return false;

		// 基本格式验证
		const reg = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
		if (!reg.test(idCard)) return false;

		// 校验码验证
		const idCardArray = idCard.split('');
		const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
		const parity = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];

		let sum = 0;
		for (let i = 0; i < 17; i++) {
			sum += parseInt(idCardArray[i]) * factor[i];
		}

		const mod = sum % 11;
		return parity[mod] === idCardArray[17].toUpperCase();
	};

	// 监听外部值变化
	watch(() => props.modelValue, (newVal) => {
		if (newVal !== inputValue.value) {
			inputValue.value = newVal || '';
		}
	});
</script>

<style scoped>
	.idcard-input-wrapper {
		position: relative;
	}

	.idcard-input {
		width: 100%;
		height: 88rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 12rpx;
		padding: 0 60rpx 0 24rpx;
		font-size: 28rpx;
		background: #fafafa;
		box-sizing: border-box;
		font-family: monospace;
	}

	.idcard-input:focus {
		border-color: #007AFF;
		background: white;
	}

	.clear-btn {
		position: absolute;
		right: 24rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 36rpx;
		color: #999;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.1);
	}
</style>