<template>
  <div class="sysSetting">
    <h3 class="settings_title">系统重启</h3>
    <el-divider></el-divider>
    <el-button type="primary" plain @click="restart">
      点击重启<i class="el-icon-refresh el-icon--right"></i>
    </el-button>

    <h3 class="settings_title">设备配置</h3>
    <el-divider></el-divider>

    <div class="item" style="margin-bottom: 25px;">
      <span class="item_title">设备ID:</span>
      <el-input placeholder="请输入设备ID" v-model="configForm.conf.deviceid" clearable class="item_content">
      </el-input>
    </div>

    <div class="item" style="margin-bottom: 25px;">
      <span class="item_title">数据保存间隔(h):</span>
      <el-input placeholder="请输入时间间隔" v-model="configForm.conf.antenna" clearable class="item_content">
      </el-input>
    </div>

    <div class="item" style="margin-bottom: 25px;">
      <span class="item_title">断网重启间隔(h):</span>
      <el-input placeholder="请输入断网重启间隔" v-model="configForm.conf.autoresetint" clearable class="item_content">
      </el-input>
    </div>



    <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/sysSetting";
export default {
  name: "sysSetting",
  data() {
    return {
      configForm: {
        conf: {}
      },
    }
  },
  mounted() {
    this.getConfig()
  },
  computed: {

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

        }
      })
    },
    getConfig() {
      api.getConfig().then((res) => {
        console.log(res.conf);

        this.configForm = 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>
.sysSetting {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

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

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

.item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

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

.item_content {
  margin-left: 15px;
  width: 200px;
}
</style>
