<template>
  <el-form label-position="top" :model="data" ref="networkForm">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="上报IP1地址" prop="ip1">
          <el-input v-model="data.ip1"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="上报端口号1" prop="port1">
          <el-input v-model="data.port1"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="上报IP2地址" prop="ip2">
          <el-input v-model="data.ip2"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="上报端口号2" prop="port2">
          <el-input v-model="data.port2"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="上报IP3地址" prop="ip3">
          <el-input v-model="data.ip3"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="上报端口号3" prop="port3">
          <el-input v-model="data.port3"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="备用ip地址" prop="ipBackup">
          <el-input v-model="data.ipBackup"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="备用端口号" prop="portBackup">
          <el-input v-model="data.portBackup"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="用户名" prop="account">
          <el-input v-model="data.account"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="密码" prop="password">
          <el-input v-model="data.password"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="APN" prop="apn">
          <el-input v-model="data.apn"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-5 pl-2">
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue';

const data = reactive({
  ip1: '',
  port1: '',
  ip2: '',
  port2: '',
  ip3: '',
  port3: '',
  ipBackup: '',
  portBackup: '',
  account: '',
  password: '',
  apn: '',
});

const networkForm = ref(null); // form

// 提交表单
const onSubmit = () => {
  networkForm.value.validate(valid => {
    console.log(valid, { ...data });
  });
};

// 重置表单
const onReset = () => {
  networkForm.value.resetFields();
};
</script>
