<template>
	<div class="ipAddress">
		<el-input v-model="data.oneInp" @input="nextFocus($event, 'one')" @blur="nextFocus($event, 'one')" maxlength="3"></el-input>
		<div>•</div>
		<el-input v-model="data.twoInp" @input="nextFocus($event, 'two')" @blur="nextFocus($event, 'two')" maxlength="3"></el-input>
		<div>•</div>
		<el-input v-model="data.thrInp" @input="nextFocus($event, 'thr')" @blur="nextFocus($event, 'thr')" maxlength="3"></el-input>
		<div>•</div>
		<el-input v-model="data.fouInp" @input="nextFocus($event, 'for')" @blur="nextFocus($event, 'fou')" maxlength="3"></el-input>
	</div>
</template>
<script setup>
	const emit = defineEmits();		
	const { proxy } = getCurrentInstance();
	const props = defineProps({
	  // 高度
	  data: {
	    type: Object,
	    default: {
			oneInp: "",
			twoInp: "",
			thrInp: "",
			fouInp: "",
			type: ""
		}
	  }
	});
	const { data } = toRefs(props);
	watch(data, (newValue) => {
	   
	  },
	  { deep: true }
	);
	const nextFocus = function(e,key){
		if(e.length>2){
			if(key == "one"&&(data.value.type == "ip" || data.value.type == "dns")){
				if(parseFloat(e)>223){
					data.value.oneInp = 223;
					proxy.$modal.alert(e+"不是有效项。请指定一个介于1和223间的值。", {
						confirmButtonText: '确定',
						callback: action => {
						}
					});
				}else{
					
				}
			}else{
				if(parseFloat(e)>255){
					if(key == "one"){
						data.value.oneInp = 255;
					}else if(key == "two"){
						data.value.twoInp = 255;
					}else if(key == "thr"){
						data.value.thrInp = 255;
					}else{
						data.value.fouInp = 255;
					}
					proxy.$modal.alert(e+"不是有效项。请指定一个介于1和255间的值。", {
						confirmButtonText: '确定',
						callback: action => {
							
						}
					});
				}else{
					
				}
			}
		}
	}
</script>
<style lang="scss">
	.ipAddress{
		display: flex;
		border: 1px solid #ccc;
		border-radius: 4px;
		.el-input{
			width: 45px;
		}
		.el-input__wrapper{
			box-shadow: none;
		}
	}
</style>
