<template>
  <el-dialog :title="isClearAll?'消除所有报警':'手动消警'" :visible.sync="dialogFormVisible" width="30%" append-to-body @close="cancel">
    <el-form v-loading="loading" ref="dataForm" :rules="rules" :model="alarmForm" label-well-code="right" label-width="160px">
      <el-form-item v-if="!isClearAll" label="监控点位" prop="monitorName">
        <el-input v-model.trim="alarmForm.monitorName" disabled/>
      </el-form-item>
      <el-form-item v-if="!isClearAll" label="报警方位" prop="alarmDirection">
        <el-input v-model.trim="alarmForm.alarmDirection" disabled/>
      </el-form-item>
      <el-form-item v-if="!isClearAll" label="报警浓度值" prop="alarmValue">
        <el-input v-model.trim="alarmForm.alarmValue" disabled/>
      </el-form-item>
      <el-form-item label="消警持续时间(分钟)" prop="resumeTime">
        <el-input v-model.trim="alarmForm.resumeTime" type="number" :min="0"/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="clear">提交</el-button>
      <el-button @click="cancel">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { clearAll } from "@/api/alarm"

export default {
  name: 'ClearAlarm',
  data() {
    const validateResumeTime = (rule, value, callback) => {
      if (value !== '') {
        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
          callback(new Error('请填写大于0的数字'))
        } else {
          callback()
        }
      } else {
        callback(new Error('消警持续时间不能为空'))
      }
    }
    return {
      isClearAll: false,
      dialogFormVisible: false, // 对话框是否显示
      alarmForm: {
        alarmId: '', // id
        alarmDirection: '', // 报警方位
        monitorName: '', // 报警点位
        alarmValue: '', // 报警值
        resumeTime: '' // 消警持续时间
      }, // 表单
      loading: false, // 加载
      rules: {
        resumeTime: [{required: true, trigger: ['blur', 'change'], validator: validateResumeTime}]
      }
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    // 初始化对话框
    initDialog: function(row = null, isClearAll) {
      this.isClearAll = isClearAll
      this.dialogFormVisible = true
      this.alarmForm = {
        alarmId: row.id, // id
        monitorName: row.monitorName, // 报警点位
        alarmValue: row.alarmValue, // 报警值
        alarmDirection: row.alarmDirection // 报警阈值
      }
      // 清除验证
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    clear() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          clearAll(this.alarmForm).then(response => {
            if (response.code === 200) {
              this.$message.success('操作成功!')
              this.$emit('watchChild')
              this.dialogFormVisible = false
            }
            // 清除验证
            this.$nextTick(() => {
              this.$refs['dataForm'].clearValidate()
            })
          })
        }
      })
    },
    // 重置表单
    resetForm() {
      this.alarmForm = {
        alarmId: '', // id
        alarmDirection: '', // 报警方位
        monitorName: '', // 报警点位
        alarmValue: '', // 报警值
        resumeTime: '' // 消警持续时间
      }
    },
    cancel: function() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
  .dialog-footer{
    text-align: right;
    margin-top: 10px;
  }
</style>