<template>
	<div class="padding-sm">
		<el-form label-position="right" label-width="160px">
			<el-row>
				<el-col :span="12" :xs="24" class="grid padding-xs">
					<el-card shadow="never" class="flex-sub">
						<template #header>
						  服务器配置
						</template>
						<el-form-item label="服务器IP：" prop="server_addr">
							<el-input v-model="frpsInfo.common.server_addr"/>
						</el-form-item>
						<el-form-item label="端口：" prop="server_port">
							<el-input v-model="frpsInfo.common.server_port"/>
						</el-form-item>
						<el-form-item label="终端序号：" prop="id">
							<el-input v-model="frpsInfo.common.id"/>
						</el-form-item>
						<el-form-item label="状态：" prop="status">
							<span :style="'color:'+(frpsInfo.common.status == 0?'#ff4949':'#13ce66')">{{frpsInfo.common.status == 0?'未连接':'已连接'}}</span>
						</el-form-item>
					</el-card>
				</el-col>
				<el-col :span="12" :xs="24" class="grid padding-xs">
					<el-card shadow="never" class="flex-sub">
						<template #header>
						  运维服务
						</template>
						<el-form-item label="终端IP：" prop="local_ip">
							<el-input v-model="frpsInfo.ssh.local_ip"/>
						</el-form-item>
						<el-form-item label="远端代理端口：" prop="remote_port">
							<el-input v-model="frpsInfo.ssh.remote_port"/>
						</el-form-item>
						<el-form-item label="状态：" prop="status">
							<span :style="'color:'+(frpsInfo.ssh.status == 0?'#ff4949':'#13ce66')">{{frpsInfo.ssh.status == 0?'未连接':'已连接'}}</span>
						</el-form-item>
					</el-card>
				</el-col>
				<el-col :span="12" :xs="24" class="grid padding-xs">
					<el-card shadow="never" class="flex-sub">
						<template #header>
						  web服务
						</template>
						<el-form-item label="终端IP：" prop="local_ip">
							<el-input v-model="frpsInfo.web.local_ip"/>
						</el-form-item>
						<el-form-item label="远端代理端口：" prop="remote_port">
							<el-input v-model="frpsInfo.web.remote_port"/>
						</el-form-item>
						<el-form-item label="状态：" prop="status">
							<span :style="'color:'+(frpsInfo.web.status == 0?'#ff4949':'#13ce66')">{{frpsInfo.web.status == 0?'未连接':'已连接'}}</span>
						</el-form-item>
					</el-card>
				</el-col>
				<el-col :span="12" :xs="24" class="grid padding-xs">
					<el-card shadow="never" class="flex-sub">
						<template #header>
						  web视屏端口设置
						</template>
						<el-form-item label="终端IP：" prop="local_ip">
							<el-input v-model="frpsInfo.video.local_ip"/>
						</el-form-item>
						<el-form-item label="远端代理端口：" prop="remote_port">
							<el-input v-model="frpsInfo.video.remote_port"/>
						</el-form-item>
						<el-form-item label="状态：" prop="status">
							<span :style="'color:'+(frpsInfo.video.status == 0?'#ff4949':'#13ce66')">{{frpsInfo.video.status == 0?'未连接':'已连接'}}</span>
						</el-form-item>
					</el-card>
				</el-col>	
				<el-col :span="12" :xs="24" class="grid padding-xs">
					<el-card shadow="never" class="flex-sub">
						<template #header>
						  设备运维开启状态
						</template>
						<el-form-item label="是否开启：">
							<el-switch
								v-model="frpsState"
								@click="changeClose"
								active-color="#13ce66"
								inactive-color="#ff4949"/>
						</el-form-item>
					</el-card>
				</el-col>	
				<el-col :span="12" :xs="24" class="grid padding-xs">
					<el-form-item>
						<el-button type="primary" @click="submitForm">保存配置</el-button>
						<el-button type="success" @click="getFrpsInfo"><elIcon><Refresh/></elIcon>重置</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script setup>
	import IpInput from "@/views/components/IpInput/index";
	import { setFrps, getFrps } 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({
		frpsState: true,
		frpsInfo: {
			"common":{
				"server_addr": "127.0.0.5",
				"server_port": 9001,
				"status": 0,
				"id": 4009
			}, 
			"ssh": { 
				"local_ip": "127.0.0.6",
				"remote_port": 6005,
				"status": 0 ,
			},
			"web": {
				"local_ip": "127.0.0.5",
				"remote_port": 6006,
				"status": 0,
			},
			"video":{
				"local_ip": "127.0.0.1",
				"remote_port": 10013,
				"status": 0
			}
		}
	});
	const { frpsInfo, frpsState } = toRefs(data);
	const changeClose = function(val){
		proxy.$modal.confirm(`确认是否${frpsState.value?'开启':'关闭'}设备的运维配置？`)
		.then(function () {
			setFrps({enable: frpsState.value}).then((response) => {
				if(response.code == 200){
					getFrpsInfo();
					proxy.$modal.msgSuccess("操作成功！");
				}
			})
		}).catch(() => { 
			frpsState.value = !frpsState.value;
		});
	}
	function submitForm(){
		let _obj = frpsInfo.value;
		if(checkK(_obj.common) || checkK(_obj.ssh) || checkK(_obj.web)){
			proxy.$modal.alert("请先填写完必填项！", {
				confirmButtonText: '确定',
				callback: action => {
				}
			});
			return;
		}
		if((_obj.common.server_port == _obj.ssh.remote_port)||(_obj.common.server_port == _obj.web.remote_port)||(_obj.common.server_port == _obj.video.remote_port)||(_obj.ssh.remote_port == _obj.web.remote_port)||(_obj.ssh.remote_port == _obj.video.remote_port)||(_obj.video.remote_port == _obj.web.remote_port)){
			proxy.$modal.alert("端口号不能一样，请注意修改", {
				confirmButtonText: '确定',
				callback: action => {
				}
			});
			return;
		}
		let regs = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/;
		if(!regs.test((_obj.common.server_addr).replace(/\s*/g,""))){
			proxy.$modal.alert("服务器配置的服务器IP地址不是正确的格式", {
				confirmButtonText: '确定',
				callback: action => {
				}
			});
			return;
		}
		if(!regs.test((_obj.ssh.local_ip).replace(/\s*/g,""))){
			proxy.$modal.alert("运维服务的终端IP地址不是正确的格式", {
				confirmButtonText: '确定',
				callback: action => {
				}
			});
			return;
		}
		if(!regs.test((_obj.web.local_ip).replace(/\s*/g,""))){
			proxy.$modal.alert("web服务的终端IP地址不是正确的格式", {
				confirmButtonText: '确定',
				callback: action => {
				}
			});
			return;
		}
		delete _obj["enable"]
		proxy.$modal.confirm('确认是否修改设备的运维服务配置？')
		.then(function () {
			setFrps(_obj).then((response) => {
				if(response.code == 200){
					getFrpsInfo();
					proxy.$modal.msgSuccess("操作成功！");
				}
			})
		}).catch(() => { 
			
		});
	}
	const checkK = function(_hj){
		let _sta = false;
		for(let key in _hj){
			if((_hj[key]+'').length<1){
				_sta = true;
				break;
			}
		}
		return _sta;
	}
	const getFrpsInfo = function(){
		getFrps().then((response) => {
			if(response.code == 200){
				frpsInfo.value = response.data[1];
				frpsState.value = frpsInfo.value.enable;
			}
		})
	}
	getFrpsInfo()
	
</script>

<style>  
</style>