<template>
  <!--短信查询-->
  <el-dialog :close-on-click-modal="false" draggable v-model="machineVisible" :title="title" width="500">
    <div>
      <div  class="smsConfig">
        <el-form :model="form" inline label-width="auto" class=" ml30 mt10">
          <el-form-item label="屏幕通知">
            <el-radio-group v-model="form.screenNotic" size="small">
              <el-radio-button label="关闭" :value="0" />
              <el-radio-button label="开启" :value="1" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="严重事件语音通知">
            <el-radio-group v-model="form.seriousNotice" size="small">
              <el-radio-button label="关闭" :value="0" />
              <el-radio-button label="开启" :value="1" />
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="重要事件语音通知">
            <el-radio-group v-model="form.normalNotic" size="small">
              <el-radio-button label="关闭" :value="0" />
              <el-radio-button label="开启" :value="1" />
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="语音类型">
            <el-radio-group v-model="form.voiceType" size="small">
              <el-radio-button label="人声" :value="1" />
              <el-radio-button label="音频" :value="2" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="触发类型">
            <el-checkbox-group v-model="form.eventTypeList" size="small">
              <el-checkbox-button value="0" :key="0">扰动</el-checkbox-button>
              <el-checkbox-button value="1">暂降</el-checkbox-button>
              <el-checkbox-button value="2">暂升</el-checkbox-button>
              <el-checkbox-button value="3">中断</el-checkbox-button>
              <el-checkbox-button value="4">其他</el-checkbox-button>
              <el-checkbox-button value="5">录波</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="残余电压告警阈值">
            <el-input-number v-model="form.eventValue" :min="0" :max="0.9" :precision="1" :step="0.1"
              @change="(e) => (e == null ? (form.eventValue = 0.1) : null)" style="width: 200px" />
          </el-form-item>
          <el-form-item label="持续时间告警阈值">
            <el-input-number v-model="form.eventDuration" :min="0" :max="1000000" :precision="1" :step="1"
              @change="(e) => (e == null ? (form.eventDuration = 1) : null)" style="width: 200px">
              <template #suffix>
                <span>ms</span>
              </template></el-input-number>
          </el-form-item>
        </el-form>

        <!-- <el-divider />
        <div style="text-align: center">

          <el-button :icon="Close" @click="setUp" class="mt10" size="small">取消</el-button>
          <el-button type="primary" :icon="Tools" @click="setUp" class="mt10" size="small">设置</el-button>
        </div> -->
      </div>
    </div>
    <template #footer>
      <el-button :icon="Close" @click="setUp"  size="small">取消</el-button>
      <el-button type="primary" :icon="Tools" @click="setUp"  size="small">设置</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, inject } from "vue";
import { ElMessage } from "element-plus";
import { Tools, Close } from "@element-plus/icons-vue";
import { queryConfig, eventConfig } from "@/api/statistics/index";
import { useStore } from "vuex";
import { stopSpeak } from "@/utils/index";
const store = useStore();
const machineVisible = ref(false);
const title = ref("系统配置");
//form表单校验规则
const emit = defineEmits(["flushed"]);
const open = (text: string, data?: any) => {
  //   queryConfig().then((res) => {
  //     form.value = res.data;
  //   });
  form.value.seriousNotice = store.state.seriousNotice;
  form.value.normalNotic = store.state.normalNotic;
  form.value.voiceType = store.state.voiceType;
  form.value.screenNotic = store.state.screenNotic;
  form.value.eventTypeList = store.state.eventTypeList;
  form.value.eventValue = store.state.eventValue;
  form.value.eventDuration = store.state.eventDuration;
  machineVisible.value = true;
};

const form = ref({
  seriousNotice: 1,
  normalNotic: 1,
  voiceType: 1,
  screenNotic: 1,
  eventTypeList: ["0", "1"],
  eventValue: 0.7,
  eventDuration: 5,
});
// 设置
const setUp = () => {
  eventConfig(form.value).then((res) => {
    ElMessage.success("设置成功");
    store.dispatch("setConfig");
    if (
      form.value.normalNotic != store.state.normalNotic ||
      form.value.seriousNotice != store.state.seriousNotice ||
      form.value.voiceType != store.state.voiceType
    ) {
      stopSpeak();
    }
    if (form.value.eventTypeList != store.state.eventTypeList) {
      emit("flushed");
    }

    machineVisible.value = false;
  });
};

defineExpose({ open });
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";

.smsConfig {
  color: #fff;
}

.title {
  background-color: #0a73ff40;
  height: 30px;
  line-height: 30px;
  font-weight: 600;
  padding-left: 10px;
  margin-bottom: 10px;
  border-left: 10px solid var(--el-color-primary);
}

:deep(.el-card__body) {
  padding: 10px !important;
}

:deep(.el-select) {
  min-width: 80px !important;
}

.checkbox {
  display: flex;
  justify-content: space-between;
}

:deep(.el-form-item__label, ) {
  color: #fff;
}

:deep(.el-checkbox__label) {
  color: #fff;
}

:deep(.el-form-item__label, ) {
  color: #fff;
}
</style>
