<template>
  <div class="AuHiViewBody">

    <span style="margin-right:50px;font-size:20px;font-family: '微软雅黑';font-weight:600;">预警级别设置</span>
    <el-button type="primary" @click="formOpen('add')">增加预警</el-button>

    <div class="AuHiBottom">
      <template>
        <el-table :data="warningData" height="700" border style="width: 100%">
          <el-table-column prop="type" label="类型" align="center"></el-table-column>
          <el-table-column prop="yellow" label="黄色预警" align="center"></el-table-column>
          <el-table-column prop="orange" label="橙色预警" align="center"></el-table-column>
          <el-table-column prop="red" label="红色预警" align="center"></el-table-column>
          <el-table-column label="操作" width="250" align="center">
            <template slot-scope="scope">
              <el-button @click="formOpen('change',scope.row)" type="text">更改设置</el-button>
              <el-button type="text" @click="deleteFormOpen(scope.row)">解除警报</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <el-dialog :title="formTitle" :visible.sync="formVisible" width="30%">
      <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="类型">
          <el-input v-model="formData.type" :disabled="inpDisable"></el-input>
        </el-form-item>
        <el-form-item label="黄色预警">
          <el-input v-model="formData.yellow"></el-input>
        </el-form-item>
        <el-form-item label="橙色预警">
          <el-input v-model="formData.orange"></el-input>
        </el-form-item>
        <el-form-item label="红色预警">
          <el-input v-model="formData.red"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="formSave()">确 定</el-button>
        <el-button @click="formcancel()">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="你确定解除预警吗？" :visible.sync="deleteVisible" width="30%">
      <el-button type="danger" @click="agreeDelete()">解除</el-button>
      <el-button @click="cancelDelete()">取消</el-button>
    </el-dialog>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      formTitle:"",
      formType:"",
      warningData:[{
        type: '雨量计',
        yellow: '20',
        orange: '20',
        red: '20',
      }],
      formVisible:false,
      formData: {
        type: '',
        yellow: '',
        orange: '',
        red: '',
      },
      inpDisable:false,
      deleteVisible:false,
    }
  },
  methods:{
    formOpen(type,row){
      this.formData = {type: '',yellow: '',orange: '',red: ''};
      this.formVisible = true;
      this.formType = type;
      if(this.formType === "add"){
        this.formTitle = "增加预警信息";
        this.inpDisable = false;
      }else if(this.formType === "change"){
        this.formTitle = "修改预警信息";
        this.inpDisable = true;
        this.formData = {...row};
      }
    },
    formSave(){
      if(this.formType === "add"){
        if(this.formData.type === ""){
          alert("类型不得为空！");
          return;
        }
        this.warningData.unshift(this.formData);
        this.formVisible = false;
        this.formData = {type: '',yellow: '',orange: '',red: ''};
      }else if(this.formType === "change"){
        const that = this;
        const newData = [];
        this.warningData.forEach(function(item){
          if(item.type === that.formData.type){
            newData.push(that.formData);
          }else{
            newData.push(item);
          }
        })
        this.warningData = newData;
        this.formVisible = false;
        this.formData = {type: '',yellow: '',orange: '',red: ''};
      }
    },
    formcancel(){
      this.formVisible = false;
      this.formData = {type: '',yellow: '',orange: '',red: ''};
    },
    deleteFormOpen(row){
      console.log(row);
      this.deleteVisible = true;
      this.formData = {...row};
    },
    agreeDelete(){
      const that = this;
      const newData = [];
      this.warningData = that.warningData.forEach(function(item){
        if(item.type === that.formData.type){
          return;
        }else{
          newData.push(item);
        }
      })
      this.warningData = newData;
      this.deleteVisible = false;
      this.formData = {type: '',yellow: '',orange: '',red: ''};
    },
    cancelDelete(){
      this.deleteVisible = false;
      this.formData = {type: '',yellow: '',orange: '',red: ''};
    }
  }
}
</script>

<style scoped>
.AuHiViewBody{
  width: 100%;
  height: 100%;
  background-color: rgb(245,246,251);
  padding: 30px;
  box-sizing: border-box;
}
.AuHiTop{
  background-color: white;
  border-radius: 10px;
  padding: 18px 20px;
  box-sizing: border-box;
}
.AuHiBottom{
  width: 100%;
  background-color: white;
  padding: 30px;
  box-sizing: border-box;
  height: 750px;
  margin-top: 20px;
}
.el-input{
  width: 80%;
}
</style>