<!-- ip设置页面 -->
<template>
  <div>
    <!-- <el-button @click="dialogVisible = true">ip配置</el-button> -->
    <el-dialog title="IP配置" :visible.sync="dialogVisible" width="30%">
      <p class="txt">本页面涉及排错，请检查修改默认值</p>
      <div class="ip_setting">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="140px"
          class="demo-ruleForm"
          :label-position="labelPosition"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="IP获取方式" prop="ippz_ip_hqfs">
                <el-select v-model="ruleForm.ippz_ip_hqfs" style="width: 200px">
                  <el-option label="Static IP" value="Static IP"></el-option>
                  <el-option label="DHCP" value="DHCP"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="DNS获取方式" prop="ippz_dns_hqfs">
                <el-select
                  v-model="ruleForm.ippz_dns_hqfs"
                  style="width: 200px"
                >
                  <el-option label="自动获取" value="自动获取"></el-option>
                  <el-option label="手动设定" value="手动设定"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="本机IP" prop="ippz_ip">
                <el-row>
                  <el-col :span="5">
                    <el-input v-model="ippz_ip1"></el-input>
                  </el-col>
                  <el-col :span="1">. </el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_ip2"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_ip3"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_ip4"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="子网掩码" prop="ippz_zwym">
                <el-row>
                  <el-col :span="5">
                    <el-input v-model="ippz_zwym1"></el-input>
                  </el-col>
                  <el-col :span="1">. </el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_zwym2"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_zwym3"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_zwym4"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="网关地址" prop="ippz_mrwg">
                <el-row>
                  <el-col :span="5">
                    <el-input v-model="ippz_mrwg1"></el-input>
                  </el-col>
                  <el-col :span="1">. </el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_mrwg2"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_mrwg3"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_mrwg4"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="主DNS服务器" prop="ippz_dns_zy">
                <el-row>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_zy1"></el-input>
                  </el-col>
                  <el-col :span="1">. </el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_zy2"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_zy3"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_zy4"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备用DNS服务器" prop="ippz_dns_by">
                <el-row>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_by1"></el-input>
                  </el-col>
                  <el-col :span="1">. </el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_by2"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_by3"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_by4"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >保存</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { isValidPrimaryDNS } from "../validate";
export default {
  data() {
    return {
      ippz_ip1: "192",
      ippz_ip2: "168",
      ippz_ip3: "1",
      ippz_ip4: "1",
      ippz_zwym1: "255",
      ippz_zwym2: "255",
      ippz_zwym3: "255",
      ippz_zwym4: "0",
      ippz_mrwg1: "",
      ippz_mrwg2: "",
      ippz_mrwg3: "",
      ippz_mrwg4: "",
      ippz_dns_zy1: "",
      ippz_dns_zy2: "",
      ippz_dns_zy3: "",
      ippz_dns_zy4: "",
      ippz_dns_by1: "",
      ippz_dns_by2: "",
      ippz_dns_by3: "",
      ippz_dns_by4: "",
      dialogVisible: true,
      labelPosition: "left",
      ruleForm: {
        ippz_ip_hqfs: "Static IP",
        ippz_dns_hqfs: "自动获取",
        ippz_ip: "",
        ippz_zwym: "",
        ippz_mrwg: "",
        ippz_dns_zy: "",
        ippz_dns_by: "",
      },
      rules: {
        ippz_ip_hqfs: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        ippz_dns_hqfs: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        ippz_ip: [
          {
            required: true,
            validator: this.validateIpAddress,
            trigger: "blur",
            message: "请输入有效的IP地址",
          },
        ],
        ippz_zwym: [
          {
            required: true,
            validator: this.validateSubnetMask,
            trigger: "blur",
            message: "请输入有效的子网掩码",
          },
        ],
        ippz_mrwg: [
          {
            required: true,
            validator: this.validateGateway,
            trigger: "blur",
            message: "请输入有效的网关地址",
          },
        ],
        ippz_dns_zy: [
          {
            required: true,
            validator: this.validatePrimaryDNS,
            trigger: "blur",
            message: "请输入有效的主DNS服务器地址",
          },
        ],
        ippz_dns_by: [
          {
            required: true,
            validator: this.validatePrimaryDNS,
            trigger: "blur",
            message: "请输入有效的备用DNS服务器地址",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //ip地址验证
    validateIpAddress(rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入IP地址"));
      } else if (
        !/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
          value
        )
      ) {
        callback(new Error("请输入有效的IP地址"));
      } else {
        callback();
      }
    },
    //子网掩码验证
    validateSubnetMask(rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入子网掩码"));
      } else if (
        !/^(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])$/.test(
          value
        )
      ) {
        callback(new Error("请输入有效的子网掩码"));
      } else {
        callback();
      }
    },
    //网关地址验证
    validateGateway(rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入网关地址"));
      } else if (!/^(\d{1,3}\.){3}\d{1,3}$/.test(value)) {
        callback(new Error("请输入有效的网关地址"));
      } else {
        callback();
      }
    },
    //dns服务验证
    validatePrimaryDNS(rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入主DNS服务器地址"));
      } else if (!isValidPrimaryDNS(value)) {
        callback(new Error("请输入有效的主DNS服务器地址"));
      } else {
        callback();
      }
    },
  },
};
</script>
<style scoped lang="less">
/deep/ .ip_setting {
  .el-input__inner {
    height: 30px;
    text-align: center;
    padding: 0;
  }

  .el-row {
    display: flex;
    align-items: flex-end;

    .el-col-1 {
      padding: 0px 2px;
      color: black;
      text-align: left;
      line-height: 32px;
      height: 20px;
    }

    .el-col-5 {
      width: 43px;
      height: 30px;
    }

    .el-col-24 {
      padding-right: 152px;
    }
  }
}
.el-dialog {
  position: relative;
}
.txt {
  position: absolute;
  top: 22px;
  left: 100px;
  color: red;
}
</style>
