<!--
 * @Author: your name
 * @Date: 2021-11-29 16:41:38
 * @LastEditTime: 2021-12-06 16:00:29
 * @LastEditors: Please set LastEditors
 * @Description: 报警设置的 各个报警号码
 * @FilePath: \hyyfClient\src\views\Alarm\alarm-set\AlarmForm.vue
-->
<template>
  <div class="alarm-form">
    <el-form
      :model="alarmForm"
      ref="alarmForm"
      label-width="140px"
      class="demo-dynamic"
    >
      <!-- 一级报警 -->
      <el-form-item prop="first" label="一级报警：">
        <el-input
          v-model="alarmForm.first"
          style="width: 200px"
          disabled
        ></el-input>
      </el-form-item>

      <!-- 二级报警 -->
      <el-form-item prop="second" label="二级报警：">
        <el-input v-model="alarmForm.second" style="width: 200px" disabled>
        </el-input>
      </el-form-item>
      <div class="rows">
        <el-form-item
          v-for="(domain, index) in alarmForm.secondPhones"
          label="接收号码："
          :prop="'secondPhones.' + index + '.phone'"
          :key="domain.key"
        >
          <el-input
            v-model="alarmForm.secondPhones[index].phone"
            style="width: 200px"
          >
          </el-input>
        </el-form-item>
        <div class="add-btn">
          <el-button @click.prevent="addPhones('secondPhones')">新增</el-button>
        </div>
      </div>

      <!-- 三级报警 -->
      <el-form-item prop="third" label="三级报警：">
        <el-input v-model="alarmForm.third" style="width: 200px" disabled>
        </el-input>
      </el-form-item>
      <div class="rows">
        <el-form-item
          v-for="(domain, index) in alarmForm.thirdPhones"
          label="接收号码："
          :prop="'thirdPhones.' + index + '.phone'"
          :key="domain.key"
          :rules="{
            pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur',
          }"
        >
          <el-input
            v-model="alarmForm.thirdPhones[index].phone"
            style="width: 200px"
          >
          </el-input>
        </el-form-item>
        <div class="add-btn">
          <el-button @click.prevent="addPhones('thirdPhones')">新增</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getAlarmPhones, postAlarmPhones } from "utils/chenApi";
export default {
  data() {
    return {
      alarmForm: {
        secondPhones: [
          {
            phone: "",
            key: 0,
          },
        ],
        thirdPhones: [
          {
            phone: "",
            key: 0,
          },
        ],
        first: "平台消息",
        second: "短信通知",
        third: "电话通知",
      },
      secondId: "",
      thirdId: "",
    };
  },
  mounted() {
    this.initGetPhones();
  },
  methods: {
    addPhones(value) {
      this.alarmForm[value].push({
        phone: "",
        key: this.alarmForm[value].length,
      });
    },
    initGetPhones() {
      getAlarmPhones({}).then(({ code, data }) => {
        if (code === 10000) {
          const secondPhones = data.two.phone.split(",");
          this.alarmForm.secondPhones = [];
          secondPhones.forEach((item) => {
            if (item) {
              this.alarmForm.secondPhones.push({
                phone: item,
                key: this.alarmForm.secondPhones.length,
              });
            }
          });
          this.secondId = data.two.id;
          const thirdPhones = data.three.phone.split(",");
          this.alarmForm.thirdPhones = [];
          thirdPhones.forEach((item) => {
            if (item) {
              this.alarmForm.thirdPhones.push({
                phone: item,
                key: this.alarmForm.thirdPhones.length,
              });
            }
          });
          this.thirdId = data.three.id;
        }
      });
    },
    addPhonesAction() {
      this.$refs["alarmForm"].validate((valid) => {
        if (valid) {
          const secondPhones = this.alarmForm.secondPhones.reduce(
            (prev, item) => {
              return prev + item.phone + ",";
            },
            ""
          );
          const thirdPhones = this.alarmForm.thirdPhones.reduce(
            (prev, item) => {
              return prev + item.phone + ",";
            },
            ""
          );
          postAlarmPhones([
            {
              id: this.secondId || undefined,
              farmId: Number(localStorage.getItem("lastFarmId")),
              wraningName: "二级报警",
              phone: secondPhones,
              level: 2,
            },
            {
              id: this.thirdId || undefined,
              farmId: Number(localStorage.getItem("lastFarmId")),
              wraningName: "三级报警",
              phone: thirdPhones,
              level: 3,
            },
          ]).then((res) => {
            console.log(res);
            if (res.code === 10000) {
              this.initGetPhones();
            }
          });
        } else {
          throw new Error("手机号有误");
        }
      });
    },
  },
};
</script>
<style scoped>
.rows {
  display: flex;
  flex-wrap: wrap;
  margin-left: 90px;
}
.add-btn {
  padding-left: 20px;
}
</style>
