<template>
	<div class="padding-sm">
		<div v-loading="loading">
			<el-form label-position="right" label-width="120px">
				<el-form-item label="IP地址(I)：">
					<IpInput :data="ipAddress"></IpInput>
					<el-button class="margin-left" type="primary" @click="conFirm">确定</el-button>
				</el-form-item>
				<el-form-item label="诊断结果：">
					<div>
						<span class="text-green" v-if="netWork.success == 'true'">成功</span>
						<span class="text-red"  v-if="netWork.success == 'false'">失败</span>
					</div>
					<div>
						<el-input
						  type="textarea"
						  placeholder="请输入内容"
						  v-model="netWork.desc"
						  style="width: 400px;"
						  autosize
						>
						</el-input>
					</div>
				</el-form-item>
			</el-form>
			<el-form label-position="right" label-width="120px" style="margin-top:50px;">
				<el-form-item label="Rtsp地址：">
					<el-input
					  type="text"
					  placeholder="请输入视频rtsp"
					  v-model="rtspUrl"
					  style="width: 400px;"
					>
					</el-input>
					<el-button class="margin-left" type="primary" @click="conFirmRtsp">确定</el-button>
				</el-form-item>
				<el-form-item label="诊断结果：">
					<div>
						<span class="text-green" v-if="rtspResult.success == 'true'">连接成功</span>
						<span class="text-red"  v-if="rtspResult.success == 'false'">连接失败</span>
					</div>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup>
	import IpInput from "@/views/components/IpInput/index";
	import { pingNetWork, pingRTSP } from "@/api/settConfiguration"
	const { proxy } = getCurrentInstance();
	const baseUrl = location.protocol+"//"+window.location.host+"/";
	// const baseUrl = import.meta.env.VITE_APP_BASE_API;
	const netWork = ref({});
	const loading = ref(false);
	const rtspUrl = ref("");
	const rtspResult = ref({});
	const data = reactive({
		ipAddress: {
			oneInp: "",
			twoInp: "",
			thrInp: "",
			fouInp: "",
			type: "ip"
		}
	});
	const { ipAddress } = toRefs(data);
	const conFirm = function(){
		if(ipAddress.value.oneInp != ""&&ipAddress.value.twoInp != ""&&ipAddress.value.thrInp != ""&&ipAddress.value.fouInp != ""){
			loading.value = true;
			let _ipAddress = getIp(ipAddress.value);
			pingNetWork(_ipAddress).then((response) => {
				if(response.code == 200){
					netWork.value = response.data[1];
					netWork.value.desc.replace(/\*/g,'<br/>');
					loading.value = false;
					proxy.$modal.msgSuccess("操作成功！");
				}
			})
		}else{
			proxy.$modal.alert("请先填写正确的ip地址", {
				confirmButtonText: '确定',
				callback: action => {
				}
			});
		}
	}
	const getIp = function(_obj){
		return _obj.oneInp + "." + _obj.twoInp + "." + _obj.thrInp + "." + _obj.fouInp;
	}
	const conFirmRtsp = function(){
		if(rtspUrl.value.oneInp != ""){
			loading.value = true;
			pingRTSP(rtspUrl.value).then((response) => {
				if(response.code == 200){
					rtspResult.value = response.data[1];
					loading.value = false;
					proxy.$modal.msgSuccess("操作成功！");
				}
			})
		}else{
			proxy.$modal.alert("请先填写正确的视频rtsp地址", {
				confirmButtonText: '确定',
				callback: action => {
				}
			});
		}
	}
	
</script>

<style>  
</style>