<!--
 * @Author: your name
 * @Date: 2021-11-29 15:55:20
 * @LastEditTime: 2021-12-05 13:24:25
 * @LastEditors: Please set LastEditors
 * @Description: 常规设置的每一项
 * @FilePath: \hyyfClient\src\views\Alarm\alarm-set\RegularForm.vue
-->
<template>
  <div class="regular-form">
    <el-form :model="regularForm" label-width="140px">
      <div class="row">
        <el-form-item label="高温报警阈值：" prop="maxTem">
          <el-input style="width: 200px" v-model="regularForm.maxTem">
          </el-input>
          <span class="margin-left">℃</span>
        </el-form-item>
        <el-form-item label="化学需氧量阈值：" prop="cod">
          <el-input style="width: 200px" v-model="regularForm.cod"> </el-input>
          <span class="margin-left">mg/L</span>
        </el-form-item>
      </div>

      <div class="row">
        <el-form-item label="低温报警阈值：" prop="minTem">
          <el-input style="width: 200px" v-model="regularForm.minTem">
          </el-input>
          <span class="margin-left">℃</span>
        </el-form-item>
        <el-form-item label="氨氮量阈值：" prop="ammonia">
          <el-input style="width: 200px" v-model="regularForm.ammonia">
          </el-input>
          <span class="margin-left">mg/L</span>
        </el-form-item>
      </div>

      <div class="row">
        <el-form-item label="高湿度报警阈值：" prop="maxHum">
          <el-input style="width: 200px" v-model="regularForm.maxHum">
          </el-input>
          <span class="margin-left">%</span>
        </el-form-item>
        <el-form-item label="总磷量阈值：" prop="phosphorus">
          <el-input style="width: 200px" v-model="regularForm.phosphorus">
          </el-input>
          <span class="margin-left">mg/L</span>
        </el-form-item>
      </div>

      <div class="row">
        <el-form-item label="低湿度报警阈值：" prop="minHum">
          <el-input style="width: 200px" v-model="regularForm.minHum">
          </el-input>
          <span class="margin-left">%</span>
        </el-form-item>
        <el-form-item label="总氮量阈值：" prop="nitrogen">
          <el-input style="width: 200px" v-model="regularForm.nitrogen">
          </el-input>
          <span class="margin-left">mg/L</span>
        </el-form-item>
      </div>

      <div class="row">
        <el-form-item label="累计流量阈值：" prop="totalFlow">
          <el-input style="width: 200px" v-model="regularForm.totalFlow">
          </el-input>
          <span class="margin-left">T/HT</span>
        </el-form-item>
        <el-form-item label="ph值：" prop="totalFlow">
          <el-input style="width: 200px" v-model="regularForm.ph"> </el-input>
          <div class="margin-left block"></div>
        </el-form-item>
      </div>

      <div class="row">
        <el-form-item label="瞬时流量：" prop="totalFlow">
          <el-input style="width: 200px" v-model="regularForm.flow"> </el-input>
          <span class="margin-left">T/HT</span>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getRegularList, getRegularSet } from "utils/chenApi.js";
export default {
  data() {
    return {
      regularForm: {
        maxTem: 30,
        minTem: 15,
        maxHum: 100,
        minHum: 15,
        totalFlow: 15,
        cod: 15,
        ammonia: 15,
        phosphorus: 15,
        nitrogen: 15,
      },
    };
  },
  mounted() {
    this.initRegular();
  },
  methods: {
    initRegular() {
      getRegularList({}).then(({ code, data }) => {
        if (code === 10000) {
          if (!data) {
            this.regularForm = {
              maxTem: "未设定",
              minTem: "未设定",
              maxHum: "未设定",
              minHum: "未设定",
              totalFlow: "未设定",
              COD: "未设定",
              ammonia: "未设定",
              phosphorus: "未设定",
              nitrogen: "未设定",
              ph: "未设定",
              flow: "未设定",
            };
          }
          this.regularForm = { ...data };
        }
      });
    },
    actionRegular() {
      getRegularSet({ ...this.regularForm }).then((res) => {
        console.log(res);
        this.initRegular();
      });
    },
  },
};
</script>
<style scoped>
.row {
  display: flex;
  justify-content: space-between;
}
.margin-left {
  padding-left: 20px;
}
.block {
  display: inline-block;
  height: 10px;
  width: 55px;
}
</style>
