<template>
  <div>
    <div class="item"
      style="margin-bottom: 25px;">
      <span class="item_title">NTRIP 服务:</span>
      <el-switch class="item_content"
        v-model="config.conf.ntriptype"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-value="on"
        inactive-value="off">
      </el-switch>
    </div>

    <el-row>
      <el-col :span="12">
        <div class="item">
          <span class="item_title">NTRIP 地址:</span>
          <el-input placeholder="请输入 NTRIIP 地址"
            v-model="config.conf.ntripserver2"
            clearable
            class="item_content">
          </el-input>
          <span v-if="!isValidIP"
            style="color: red;"
            class="warn_text">NTRIP 地址格式不正确</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="item">
          <span class="item_title">NTRIP 端口号:</span>
          <el-input placeholder="请输入端口号"
            v-model="config.conf.ntripserver2port"
            clearable
            class="item_content">
          </el-input>
        </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.ntripuser"
            clearable
            class="item_content">
          </el-input>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="item">
          <span class="item_title">密码:</span>
          <el-input placeholder="请输入密码"
            v-model="config.conf.ntripuserpasswd"
            clearable
            class="item_content">
          </el-input>
        </div>
      </el-col>
    </el-row>

    <div class="item"
      style="margin: 25px 0;">
      <span class="item_title">RTK位置上传:</span>
      <el-switch class="item_content"
        v-model="config.conf.ntripggatimes"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-value="5"
        inactive-value="0">
      </el-switch>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    config: []
  },
  computed: {
    // 计算属性来检查 IP 地址格式是否正确
    isValidIP() {
      const ip = this.config.conf.ntripserver2;
      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);
    },
  }
}
</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>
