<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>系统配置</span>
      </div>
    </template>
    <el-form label-width="140px">
      <el-form-item label="实时报警弹窗开关:">
        <el-switch v-model="state.warnSwitch" active-color="#13ce66" inactive-color="#ff4949" />
      </el-form-item>
      <el-form-item label="实时报警声音开关:">
        <el-switch v-model="state.speakSwitch" active-color="#13ce66" inactive-color="#ff4949" />
      </el-form-item>
      <el-form-item label="报警弹窗时间:">
        <el-input v-model="state.inputVal" placeholder="请输入" style="width: 140px">
          <template #append>秒</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="storeF">保存</el-button>
        <el-button type="primary" @click="restart">清理预警服务缓存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script setup>
import { ref, onMounted, reactive, nextTick, watch, computed, h } from "vue";
import { registerRequest, getRestart, getRestart2, getRestart3 } from "/@/api/api.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { initWebSocket } from "/@/websocket/indextest";
import { common } from "/@/composables/common";
import { useStore } from "vuex";
const store = useStore();
const { setenableWarn, getenableWarn, system } = common();
const warnTime = computed(() => store.state.warnTime);
const state = reactive({
  warnSwitch: false,
  speakSwitch: false,
  inputVal: warnTime.value,
});
onMounted(async () => {
  await getenableWarn()
  await init()
});
const init = async () => {
  const { enableWarn, enableSpeak } = system.value
  state.warnSwitch = enableWarn
  state.speakSwitch = enableSpeak
}
const storeF = () => {
  // store.commit("setEnableWarn", state.warnSwitch);
  setenableWarn(state.warnSwitch, state.speakSwitch)
  store.commit("setWarnTime", state.inputVal);
};
const restart = () => {
  const res = getRestart()
  const res2 = getRestart2()
  const res3 = getRestart3()
  ElMessage.success("清理成功!");
}
</script>
<style lang="less" scoped>
.systemBox {
  display: flex;
}
</style>
