<template>
  <div class="netSetting">

    <h3 class="settings_title">IP 服务设置</h3>
    <el-divider></el-divider>
    <ip-box :config="configForm" />

    <h3 class="settings_title">NTRIP 服务设置</h3>
    <el-divider></el-divider>
    <ntrip-box :config="configForm" />

    <h3 class="settings_title">NTRIP SERVER 服务设置</h3>
    <el-divider></el-divider>
    <ntrip-server-box :config="configForm" />

    <h3 class="settings_title">FTP 服务设置</h3>
    <el-divider></el-divider>
    <ftp-box :config="configForm" />

    <h3 class="settings_title">MQTT 服务设置</h3>
    <el-divider></el-divider>
    <mqtt-box :config="configForm" />

    <h3 class="settings_title">TCP 服务设置</h3>
    <el-divider></el-divider>
    <tcp-box :config="configForm" />

    <h3 class="settings_title">TCP SERVER 服务设置</h3>
    <el-divider></el-divider>
    <tcp-server-box :config="configForm" />


    <el-row class="button-row">
      <el-button @click="setConfig" type="primary">保存设置 </el-button>

      <el-button @click="getConfig">重置设置</el-button>
    </el-row>


  </div>
</template>
<script>
import api from "@/api/settings/netSetting";
import ftpBox from "./components/ftp.vue";
import ipBox from "./components/ip.vue";
import mqttBox from "./components/mqtt.vue";
import ntripBox from "./components/ntrip.vue";
import ntripServerBox from "./components/ntripserver.vue";
import tcpBox from "./components/tcp.vue";
import tcpServerBox from "./components/tcpserver.vue";
export default {
  data() {
    return {
      configForm: {
        conf: {}
      },
    }
  },
  mounted() {
    this.getConfig()
  },
  components: {
    ipBox, ntripBox, ntripServerBox, ftpBox, mqttBox, tcpBox, tcpServerBox
  },
  methods: {
    getConfig() {
      api.getConfig().then((res) => {
        this.configForm = res
        console.log(res);

      })
    },
    setConfig() {
      console.log(this.configForm);

      api.setConfig(this.configForm).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: 'success'
          });
        } else {
          this.$message.error(res.message);

        }
      })
    }
  },
}
</script>
<style scoped>
.netSetting {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.netSetting::-webkit-scrollbar {
  display: none;
}

.button-row {
  display: flex;
  justify-content: flex-end;
  /* 将按钮排布到右侧 */
  align-items: flex-end;
  /* 将按钮放到容器底部 */
  position: relative;
  margin-top: 50px;
  /* 保证按钮排在最底部 */
  margin-bottom: 30vh;
  /* 按钮距离底部有一定间距 */
}
</style>
