<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div class="item">
          <span class="item_title">网络模式:</span>
          <el-select class="item_content"
            v-model="config.conf.net">
            <el-option label="LAN网络模式"
              value="lan">
            </el-option>
            <el-option label="4G网络模式"
              value="4g">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="item">
          <span class="item_title">IP地址:</span>
          <el-input placeholder="请输入IP"
            v-model="config.conf.ip"
            clearable
            class="item_content">
          </el-input>
          <span v-if="!isValidIP"
            style="color: red;"
            class="warn_text">IP地址格式不正确</span>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="item">
          <span class="item_title">网关:</span>
          <el-input placeholder="请输入网关"
            v-model="config.conf.netmask"
            clearable
            class="item_content">
          </el-input>
          <span v-if="!isValidMask"
            style="color: red;"
            class="warn_text">网关格式不正确</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="item">
          <span class="item_title">子网掩码:</span>
          <el-input placeholder="请输入子网掩码"
            v-model="config.conf.gateway"
            clearable
            class="item_content">
          </el-input>
          <span v-if="!isValidGate"
            style="color: red;"
            class="warn_text">子网掩码格式不正确</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    config: []
  },
  computed: {
    // 计算属性来检查 IP 地址格式是否正确
    isValidIP() {
      const ip = this.config.conf.ip;
      if (!ip) {
        return true
      }

      const ipPattern = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
      return ipPattern.test(ip);
    },

    // 计算属性来检查网关格式是否正确
    isValidMask() {
      const mask = this.config.conf.netmask

      if (!mask || mask == 'auto') {
        return true
      }

      const reg = /^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(254|252|248|240|224|192|128|0)$/;

      return reg.test(mask);
    },

    // 计算属性来检查子网掩码格式是否正确
    isValidGate() {
      const gate = this.config.conf.gateway

      if (!gate || gate == 'auto') {
        return true
      }

      let reg = /^(192\.168(\.(\d|([1-9]\d)|(1\d{2})|(2[0-4]\d)|(25[0-5]))){2})$/;
      return reg.test(gate);

    }
  },

}
</script>
<style scoped>
.item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.item_title {
  width: 120px;
  text-align: right;
}

.item_content {
  margin-left: 15px;
  width: 200px;
}

.warn_text {
  color: red;
  font-size: 15px;
  margin-left: 15px;
}
</style>
