<template lang="pug">
    el-dialog(:visible.sync='visible' append-to-body width='37%')
        div.title-bold(slot='title') {{dataForm.id ? '编辑阈值' :'新增阈值'}}
        el-form( :model='dataForm' :rules='dataRule' ref='dataForm'  label-width='100px')
            el-row( )
                el-col(:span='14' :offset='4')
                    el-form-item(label='类型:' prop='type')
                        el-select.mywidth(style='width:100%;' v-model='dataForm.type' placeholder="请选择类型" clearable)
                            el-option(v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id")
                el-col(:span='14' :offset='4')
                    el-form-item(label='编码:' prop='code')
                        el-input.mywidth(v-model='dataForm.code' placeholder='请填写编码' clearable)
                el-col(:span='14' :offset='4')
                    el-form-item(label='最小值:' prop='minValue')
                        el-input.mywidth(v-model='dataForm.minValue' placeholder='请填写最小值' clearable)
                el-col(:span='14' :offset='4')
                    el-form-item(label='最大值:' prop='maxValue')
                        el-input.mywidth(v-model='dataForm.maxValue' placeholder='请填写最大值' clearable)
                el-col(:span='14' :offset='4')
                    el-form-item(label='单位:' prop='unit')
                        el-select.mywidth(style='width:100%;' v-model='dataForm.unit' placeholder="请选择单位" clearable)
                            el-option(v-for="(item,index) in unitList" :key="index" :label="item.name" :value="item.id")
                el-col(:span='14' :offset='4')
                    el-form-item(label="阈值说明:" prop="remark")
                        el-input.mywidth(v-model="dataForm.remark"  type="textarea" :rows="5" resize="none" placeholder="请输入阈值说明" clearable)
        span.dialog-footer(slot='footer')
            el-button(size='medium' type='primary' @click='cancel') 取消
            el-button(size='medium' type='primary' @click='dataFormSubmit()' v-prevent-re-click) 保存
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      typeList: [],
      dataForm: {},
      unitList: [
        { id: 1, name: 'MPa' },
        { id: 2, name: '%RH' },
        { id: 3, name: '°C' },
        { id: 4, name: 'PPM' },
        { id: 5, name: 'm3/h' },
        { id: 6, name: 'cm' },
        { id: 7, name: 'm/s' },
        { id: 8, name: 'pa' }
      ],
      dataRule: {
        type: [
          {
            required: true,
            message: '类型不能为空',
            trigger: ['change', 'blur']
          }
        ],
        code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
        minValue: [
          { required: true, message: '最小值不能为空', trigger: 'blur' }
        ],
        maxValue: [
          { required: true, message: '最大值不能为空', trigger: 'blur' }
        ],
        unit: [
          {
            required: true,
            message: '单位不能为空',
            trigger: ['change', 'blur']
          }
        ],
        remark: [
          {
            min: 1,
            max: 500,
            message: '长度在 1 到 500 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val === false) {
          this.$refs.dataForm.resetFields()
        }
      },
      deep: true
    }
  },
  mounted() {
    this.getAllType()
  },
  methods: {
    init(row, typeId) {
      this.visible = true
      if (row.id) {
        this.dataForm = JSON.parse(JSON.stringify(row))
      } else {
        this.dataForm = {
          id: '',
          type: '',
          code: '',
          name: '',
          remark: '',
          dicId: typeId,
          stationId: localStorage.getItem('stationId')
        }
      }
    },
    //获取阈值类型字典信息
    getAllType() {
      this.$http({
        url: this.$http.adornUrl('/sysDictionary/getThresholdDicList'),
        method: 'get',
        params: this.$http.adornParams({
          stationId: localStorage.getItem('stationId')
        })
      }).then((data) => {
        if (data && data.code === 0) {
          this.typeList = data.list
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/sysThreshold/${!this.dataForm.id ? 'save' : 'update'}`
            ),
            method: 'post',
            data: this.dataForm
          }).then((data) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshdatalist')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    //取消
    cancel() {
      this.$confirm('确认取消?', this.dataForm.id ? '编辑阈值' : '新增阈值', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.visible = false
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    }
  }
}
</script>
<style>
.el-table__header {
  width: 100% !important;
}

.el-table__body {
  width: 100% !important;
}
</style>
