<template>
  <div id="body">
    <el-card class="box-card">
      <div slot="header"
        class="clearfix">
        <span>网络状态</span>
      </div>

      <div class="main">
        <el-descriptions border
          :column="1">
          <el-descriptions-item label="NTRIP 服务"
            content-class-name="my-content">
            <div class="statu_bc_green"
              v-if="config.ntriptype === 'on'"></div>
            <div v-else
              class="statu_bc_red"></div>
          </el-descriptions-item>
          <el-descriptions-item label="NTRIPSer 服务">
            <div class="statu_bc_green"
              v-if="config.ntripserveron === 'on'"></div>
            <div v-else
              class="statu_bc_red"></div>
          </el-descriptions-item>
          <el-descriptions-item label="FTP 服务">
            <div class="statu_bc_green"
              v-if="config.ftptype === 'on'"></div>
            <div v-else
              class="statu_bc_red"></div>
          </el-descriptions-item>
          <el-descriptions-item label="MQTT 服务">
            <div class="statu_bc_green"
              v-if="config.mqttswitch === 'on'"></div>
            <div v-else
              class="statu_bc_red"></div>
          </el-descriptions-item>
          <el-descriptions-item label="TCP LINK1 服务">
            <div class="statu_bc_green"
              v-if="config.tcp1en === 'on'"></div>
            <div v-else
              class="statu_bc_red"></div>
          </el-descriptions-item>
          <el-descriptions-item label="TCP LINK2 服务">
            <div class="statu_bc_green"
              v-if="config.tcp2en === 'on'"></div>
            <div v-else
              class="statu_bc_red"></div>
          </el-descriptions-item>
          <el-descriptions-item label="TCP LINK3 服务">
            <div class="statu_bc_green"
              v-if="config.tcp3en === 'on'"></div>
            <div v-else
              class="statu_bc_red"></div>
          </el-descriptions-item>
          <el-descriptions-item label="TCP LINK4 服务">
            <div class="statu_bc_green"
              v-if="config.tcp4en === 'on'"></div>
            <div v-else
              class="statu_bc_red"></div>
          </el-descriptions-item>
          <el-descriptions-item label="TCP LINK5 服务">
            <div class="statu_bc_green"
              v-if="config.tcp5en === 'on'"></div>
            <div v-else
              class="statu_bc_red"></div>
          </el-descriptions-item>
          <el-descriptions-item label="TCPSer 服务">
            <div class="statu_bc_green"
              v-if="config.tcpserveren === 'on'"></div>
            <div v-else
              class="statu_bc_red"></div>
          </el-descriptions-item>

        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>

<script>
import api from "@/api/settings/netSetting";

export default {
  data() {
    return {
      config: {}
    }
  },
  mounted() {
    this.getConfig()
  },
  methods: {
    getConfig() {
      api.getConfig().then((res) => {
        this.config = res.conf
        console.log(this.config);

      })
    },
  }
};
</script>

<style scoped>
#body {
  width: 96%;
  height: 98%;
  /* 设置为 100vh */
  overflow: hidden;
  display: flex;
  margin: 8px 5px;
  flex-direction: column;
  align-items: stretch;
}

.box-card {
  display: flex;
  /* 设置为 flex 容器 */
  flex-direction: column;
  /* 确保内容在纵向排列 */
  height: 100%;
  /* 填充父容器的高度 */
}

.statu_bc_green {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: green;
  margin-left: 50%;
}

.statu_bc_red {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: red;
  margin-left: 50%;
}
</style>
<style>
.my-content {
  width: 50%;
}
</style>