<!--
 * @Author: your name
 * @Date: 2021-11-29 15:06:41
 * @LastEditTime: 2021-12-06 16:10:36
 * @LastEditors: Please set LastEditors
 * @Description: 报警阈值设置
 * @FilePath: \hyyfClient\src\views\Alarm\AlarmSet.vue
-->
<template>
  <div class="alarm-set">
    <div class="top-blank">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="regular-set">
      <div class="title">
        <set-title :title="titles[0]"></set-title>
      </div>
      <div class="regular-left"></div>
      <div class="right">
        <regular-form ref="regularRef"></regular-form>
      </div>
    </div>
    <div class="regular-set">
      <div class="title">
        <set-title :title="titles[1]"></set-title>
      </div>
      <div class="regular-left"></div>
      <div class="right">
        <alarm-form ref="alarmFormRef"></alarm-form>
        <alarm-table ref="alarmTableRef"></alarm-table>
        <div class="submit-btn">
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SetTitle from "./alarm-set/SetTitle.vue";
import RegularForm from "./alarm-set/RegularForm.vue";
import AlarmForm from "./alarm-set/AlarmForm.vue";
import AlarmTable from "./alarm-set/alarm-table.vue";

export default {
  components: {
    SetTitle,
    RegularForm,
    AlarmForm,
    AlarmTable,
  },
  data() {
    return {
      titles: ["常规设置", "报警设置"],
    };
  },
  methods: {
    async handleSubmit() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      try {
        await this.$refs["regularRef"].actionRegular();
        await this.$refs["alarmFormRef"].addPhonesAction();
        await this.$refs["alarmTableRef"].addAlarmSets();
        this.$message.success("设置成功");
      } catch (err) {
        this.$message.error("设置失败：" + err.message);
      } finally {
        loading.close();
      }
    },
  },
};
</script>
<style scoped>
.top-blank {
  height: 40px;
  /* background-color: red; */
  display: flex;
}
.left {
  width: 239px;
  height: 100%;
  border-right: 1px solid #ccc;
}
.right {
  width: calc(100% - 239px);
  height: 100%;
  background-color: #fff;
  padding: 60px 200px 60px 80px;
}
/** 常规设置 */
.regular-set {
  /* height: 400px; */
  display: flex;
  position: relative;
}
.title {
  width: 260px;
  position: absolute;
}
.regular-left {
  width: 239px;
  border-right: 1px solid #ccc;
}
.submit-btn {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
</style>
