<template>
  <div>
    <div v-for="index in 5"
      :key="index">
      <el-row>
        <el-col :span="12">
          <div class="item"
            style="margin-bottom: 25px;">
            <span class="item_title">TCP LINK {{ index }}:</span>
            <el-switch class="item_content"
              v-model="config[`conf`][`tcp${index}en`]"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="on"
              inactive-value="off">
            </el-switch>
          </div>
        </el-col>
        <el-col :span="12">
          <el-col :span="12">
            <div class="item">
              <span class="item_title">LINK{{ index }} 类型:</span>
              <el-input placeholder="请输入 NTRIIP 类型"
                v-model="config[`conf`][`tcp${index}type`]"
                clearable
                class="item_content">
              </el-input>
            </div>
          </el-col>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="item">
            <span class="item_title">LINK{{ index }} 地址:</span>
            <el-input placeholder="请输入 NTRIIP 地址"
              v-model="config[`conf`][`tcp${index}ip`]"
              clearable
              class="item_content">
            </el-input>
            <span v-if="!isValidIP(index)"
              style="color: red;"
              class="warn_text">NTRIP 地址格式不正确</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="item">
            <span class="item_title">LINK{{ index }} 端口号:</span>
            <el-input placeholder="请输入端口号"
              v-model="config[`conf`][`tcp${index}port`]"
              clearable
              class="item_content">
            </el-input>
          </div>
        </el-col>
      </el-row>
      <div class="dashed-line"
        v-if="index != 5"></div>
    </div>


  </div>
</template>
<script>
export default {
  props: {
    config: []
  },
  methods: {
    // 动态检查每个 link 的 IP 地址格式
    isValidIP(index) {
      const ip = this.config.conf[`tcp${index}ip`]; // 动态访问 tcp1ip, tcp2ip, ...
      if (!ip) return true; // 如果 IP 地址为空，认为是有效的
      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); // 检查是否符合 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;
}

.dashed-line {
  border-top: 2px dashed #DCDFE6;
  /* 设置虚线 */
  width: 100%;
  /* 设置宽度 */
  height: 0;
  /* 高度为0，因为只有上边框有虚线 */
  margin: 20px 0;
  /* 可选，给虚线添加上下间距 */
}
</style>
