<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px"
				 label-position="left">
			<el-form-item label="规则名称" prop="name">
				<el-input v-model="form.name" clearable></el-input>
			</el-form-item>
			<el-form-item label="规则协议" prop="proto">
				<el-select v-model="form.proto" placeholder="Select"  style="width: 100%">
					<el-option
						v-for="item in protoOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="起始端口" prop="fport">
				<el-input v-model="form.fport" clearable></el-input>
			</el-form-item>
			<el-form-item label="结束端口" prop="tport">
				<el-input v-model="form.tport" clearable></el-input>
			</el-form-item>
			<el-form-item label="内部IP地址" prop="ip">
				<template #default>
					<div class="input-wrapper">
						<span class="prefix">{{ipPrefix}}</span>
						<el-input v-model="form.ip" clearable></el-input>
					</div>
				</template>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveIng" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	data() {
		return {
			titleMap: {
				add: '新增',
				edit: '编辑',
				show: '查看'
			},
			mode: "add",
			visible: false,
			isSaveIng: false,
			form: {
				name: '',
				proto: 1,
				fport: '',
				tport: '',
				ip: ''
			},
			ipPrefix: '',
			rules: {
				name: [
					{required: true, message: '请输入规则名称'}
				],
				proto: [
					{required: true, message: '请选择规则协议', trigger: 'change'}
				],
				fport:[
					{required: true, message: '请输入起始端口'}
				],
				ip:[
					{required: true, message: '请输入内部IP地址'}
				],
				tport:[
					{required: true, message: '请输入结束端口'}
				]
			},
			protoOptions: [
				{
					value: 1,
					label: 'TCP',
				},
				{
					value: 2,
					label: 'UDP',
				},
				{
					value: 3,
					label: 'TCP/UDP',
				},
			]
		}
	},
	created() {
		this.ipPrefix = this.$TOOL.data.get("gateway_prefix")
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
		submit(){
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					let res = await this.$API.system.network.nat.rangeRedirect.post(
						{
							"name": this.form.name,
							"proto": this.form.proto,
							"fport": this.form.fport,
							"tport": this.form.tport,
							"ip": this.ipPrefix + this.form.ip
						}
					);
					if(res.code == 200){
						this.$message.success("操作成功")
						this.$emit('success', this.form, this.mode)
						this.$refs.dialogForm.resetFields();
					}else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
					this.visible = false;
				}
			})
		}
	}
}
</script>

<style scoped>
.input-wrapper {
	display: flex;
}

.prefix {
	margin-right: 10px;
}
</style>
