<template>
	<div class="ip-address">
		<el-input v-model="oneIp" class="ip-address__input" ref="one" @input="nextFocus('one')"
			maxlength="3"></el-input>
		<div style="position: absolute;left: 74px;font-size: 20px;">
			.
		</div>
		<el-input class="ip-address__input" @input="nextFocus('two')" v-model="twoIp" ref="two"
			maxlength="3"></el-input>
		<div style="position: absolute;left: 148px;font-size: 20px;">
			.
		</div>
		<el-input class="ip-address__input" @input="nextFocus('three')" v-model="thrIp" ref="three"
			maxlength="3"></el-input>
		<div style="position: absolute;left: 222px;font-size: 20px;">
			.
		</div>
		<el-input class="ip-address__input" v-model="fouIp" @input="nextFocus('three')" ref="four"
			maxlength="3"></el-input>
	</div>
</template>
<script setup>
	const { proxy } = getCurrentInstance();
	const oneIp = ref("");
	const twoIp = ref("");
	const thrIp = ref("");
	const fouIp = ref("");
	const ipArr = ref(['one', 'two', 'three', 'four']);
	// 输入框跳转逻辑
	const nextFocus = function(loc) {
		let index = ipArr.value.indexOf(loc) + 1;
		console.log(index === -1 , index >= ipArr.value.length)
		if (index === -1 || index >= ipArr.value.length) return;
		proxy.$refs[ipArr.value[index]].focus();
	}
</script>
<style lang="scss">
	.ip-address {
		display: flex;
		margin-left: 10px;
		width: 294px;
		height: 36px;

		.ip-address__input {
			.el-input__inner {
				height: 34px;
			}

			.el-input__inner:focus {
				border: 1px solid #DCDFE6;
			}
		}

		.ip-address__input:nth-child(1) {
			.el-input__inner {
				border-right: 0px !important;
				border-radius: 4px 0 0 4px;
			}
		}

		.ip-address__input:nth-child(3),
		.ip-address__input:nth-child(5) {
			.el-input__inner {
				border-right: 0px !important;
				border-left: 0px !important;
				border-radius: 0;
			}
		}

		.ip-address__input:nth-child(7) {
			.el-input__inner {
				border-radius: 0 4px 4px 0;
				border-left: 0px !important;
			}
		}
	}
</style>
