<template>
	<div class="padding-sm">
		<el-form label-position="right" label-width="120px">
			<el-form-item label="IP地址(I)：">
				<IpInput :data="ipAddress"></IpInput>
			</el-form-item>
			<el-form-item label="子网掩码(U)：">
				<IpInput :data="netMask"></IpInput>
			</el-form-item>
			<el-form-item label="默认网关(D)：">
				<IpInput :data="gateWay"></IpInput>
			</el-form-item>
			<el-form-item label="DNS服务器(P)：">
				<IpInput :data="dnsServers"></IpInput>
			</el-form-item>
			<el-form-item label="">
				<el-button type="primary" @click="conFirm">确定</el-button>
				<!-- <el-button style="margin-left: 20px;" type="danger">清空</el-button> -->
			</el-form-item>
		</el-form>
		
	</div>
</template>

<script setup>
	import IpInput from "@/views/components/IpInput/index";
	import { setNetWork, getNetWork } from "@/api/settConfiguration"
	const { proxy } = getCurrentInstance();
	const baseUrl = location.protocol+"//"+window.location.host+"/";
	// const baseUrl = import.meta.env.VITE_APP_BASE_API;
	const data = reactive({
		ipAddress: {
			oneInp: "",
			twoInp: "",
			thrInp: "",
			fouInp: "",
			type: "ip"
		},
		netMask: {
			oneInp: "255",
			twoInp: "255",
			thrInp: "255",
			fouInp: "0",
			type: "netMask"
		},
		gateWay: {
			oneInp: "",
			twoInp: "",
			thrInp: "",
			fouInp: "",
			type: "gateWay"
		},
		dnsServers: {
			oneInp: "",
			twoInp: "",
			thrInp: "",
			fouInp: "",
			type: "dns"
		},
	});
	const { ipAddress, netMask, gateWay, dnsServers } = toRefs(data);
	const conFirm = function(){
		proxy.$modal.confirm('确认是否修改设备的网络配置？')
		.then(function () {
			let _ibj = {
				"address": getIp(ipAddress.value), 
				"netmask": getIp(netMask.value),
				"gateway": getIp(gateWay.value),
				"dns_nameservers": getIp(dnsServers.value),
			};
			setNetWork(_ibj).then((response) => {
				if(response.code == 200){
					getNetWorkInfo();
					proxy.$modal.msgSuccess("操作成功！");
				}
			})
		}).catch(() => { 
			
		});
	}
	const getIp = function(_obj){
		return _obj.oneInp + "." + _obj.twoInp + "." + _obj.thrInp + "." + _obj.fouInp;
	}
	const splitIp = function(obj, type){
		let _ski = obj.split(".");
		if(_ski.length != 4){
			_ski = ["", "", "", ""];
		}
		return {
			oneInp: _ski[0],
			twoInp: _ski[1],
			thrInp: _ski[2],
			fouInp: _ski[3],
			type: type
		};
	}
	const getNetWorkInfo = function(){
		getNetWork().then((response) => {
			if(response.code == 200){
				let _obj = response.data[1];
				ipAddress.value = splitIp(_obj["address"], "ip");
				netMask.value = splitIp(_obj["netmask"], "netMask");
				gateWay.value = splitIp(_obj["gateway"], "gateWay");
				dnsServers.value = splitIp(_obj["dns_nameservers"], "dns");
			}
		})
	}
	getNetWorkInfo()
	
</script>

<style>  
</style>