<!--硫化氢告警等级设置-->
<template>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
    <el-form v-loading="loading" ref="dataForm" :rules="rules" :model="form" label-position="right" label-width="120px">
      <el-row type="flex" justify="center">
        <el-col :span="8">
          <el-form-item label="开启报警" >
            <el-switch
              v-model="form.openAlarm"
              :disabled="disableEdit"
              active-value="1"
              inactive-value="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开启工单" >
            <el-switch
              v-model="form.openJob"
              :disabled="disableEdit"
              active-value="1"
              inactive-value="0"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="16">
          <el-form-item label="一级告警上限" prop="firstHighValue">
            <el-input v-model="form.firstHighValue" :disabled="disableEdit" type="text" placeholder="未知">
              <template slot="append">ppm</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="16">
          <el-form-item label="二级告警上限" prop="secondHighValue">
            <el-input v-model="form.secondHighValue" :disabled="disableEdit" type="text" placeholder="未知">
              <template slot="append">ppm</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="16">
          <el-form-item label="三级告警上限" prop="thirdHighValue">
            <el-input v-model="form.thirdHighValue" :disabled="disableEdit" type="text" placeholder="未知">
              <template slot="append">ppm</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-row type="flex" justify="center">
        <el-col :span="16">
          <p style="text-align: center">提示：硫化氢告警的国家标准上限为10ppm,请根据此值设置等级</p>
        </el-col>
      </el-row>
    </div>
    <div v-show="!disableEdit" slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveData">保存</el-button>
      <el-button @click="dialogFormVisible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateAlarmLevel, getAlarmLevelByType } from '@/api/alarmRule'
import { formatDate } from '@/utils/dateutils'
export default {
  name: 'EditH2sLevel',
  data() {
    const validateHighValue = (rule, value, callback) => {
      if (value !== '') {
        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
          callback(new Error('请填写0~100以内的数字'))
        } else {
          const float = parseFloat(value)
          if (float > 100) {
            callback(new Error('请填写0~100以内的数字'))
          }
          callback()
        }
      }
      callback()
    }
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：show,update
      disableEdit: true, // 不允许编辑
      loading: true, // 是否开启加载效果
      form: {
        name: '', // 指标名称
        deviceType: '', // 报警规则id
        openAlarm: '1', // 开启报警
        openJob: '1', // 开启工单
        firstHighValue: '', // 一级告警上限
        secondHighValue: '', // 二级告警上限
        thirdHighValue: '' // 三级告警上限
      }, // 表单
      list: [],
      textMap: {
        update: '配置硫化氢告警等级',
        show: '查看硫化氢告警等级'
      }, // 表头显示标题
      unit: '',
      rules: {
        firstHighValue: [{ required: false, trigger: ['blur', 'change'], validator: validateHighValue }],
        secondHighValue: [{ required: false, trigger: ['blur', 'change'], validator: validateHighValue }],
        thirdHighValue: [{ required: false, trigger: ['blur', 'change'], validator: validateHighValue }]
      } // 前端校验规则
    }
  },
  watch: {
    'form.openAlarm': function(val) {
      if (val === '0') {
        this.form.openJob = '0'
      }
    },
    'form.openJob': function(val) {
      if (val === '1') {
        this.form.openAlarm = '1'
      }
    }
  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogStatus, dialogFormVisible, tenantId, row = null) {
      this.dialogStatus = dialogStatus
      this.dialogFormVisible = dialogFormVisible
      this.fetchData(tenantId, row.name)
      if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
        this.disableEdit = false
      } else {
        this.disableEdit = true
      }
    },
    fetchData(tenantId, name) {
      const params = {
        tenantId: tenantId,
        name: name
      }
      getAlarmLevelByType(params).then(response => {
        this.list = response.data
        this.parseListToForm()
        this.loading = false
      })
    },
    // 重置表单
    resetForm() {
      this.form = {
        name: '硫化氢',
        deviceType: '',
        openAlarm: '1',
        openJob: '1',
        firstHighValue: '',
        secondHighValue: '',
        thirdHighValue: ''
      }
    },
    // 解析列表数据为单表格
    parseListToForm() {
      for (const item of this.list) {
        if (item.level === 1) {
          this.form.firstHighValue = item.highValue.toString()
          this.form.deviceType = item.deviceType
          this.form.name = item.name
          this.form.openAlarm = item.openAlarm
          this.form.openJob = item.openJob
        } else if (item.level === 2) {
          this.form.secondHighValue = item.highValue.toString()
        } else if (item.level === 3) {
          this.form.thirdHighValue = item.highValue.toString()
        }
      }
    },
    // 解析form数据为List
    parseFormToList() {
      for (const item of this.list) {
        if (item.level === 1) {
          item.highValue = parseFloat(this.form.firstHighValue)
        } else if (item.level === 2) {
          item.highValue = parseFloat(this.form.secondHighValue)
        } else if (item.level === 3) {
          item.highValue = parseFloat(this.form.thirdHighValue)
        }
        item.openAlarm = this.form.openAlarm
        item.openJob = this.form.openJob
        item.ts = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      }
    },
    checkValue() {
      const firstHighValue = parseFloat(this.form.firstHighValue)
      const secondHighValue = parseFloat(this.form.secondHighValue)
      const thirdHighValue = parseFloat(this.form.thirdHighValue)
      if (firstHighValue <= secondHighValue) {
        this.$message.warning('一级告警上限必须大于二级告警上限')
        return false
      } else if (secondHighValue <= thirdHighValue) {
        this.$message.warning('二级告警上限必须大于三级告警上限')
        return false
      }
      return true
    },
    // 保存数据
    saveData: function() {
      if (this.checkValue()) {
        this.parseFormToList()
        this.updateData()
      }
    },
    // 修改数据
    updateData: function() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          updateAlarmLevel(this.list).then(response => {
            if (response.code === 200) {
              this.$message.success('修改成功')
              this.$emit('watchChild')
              this.dialogFormVisible = false
            }
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
</style>