<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='120px')
            el-row( )
                el-col(:span='14' :offset='4')
                    el-form-item(label='报警类型编码:' prop='eventCode')
                        el-input(v-model='dataForm.eventCode' placeholder='请填写报警类型编码')
                el-col(:span='14' :offset='4')
                    el-form-item(label='报警类型名称:' prop='eventName')
                        el-input(v-model='dataForm.eventName' placeholder='请填写报警类型名称' clearable)
                el-col(:span='14' :offset='4')
                    el-form-item(label='报警类型等级:' prop='eventLevel')
                        el-select(style='width:100%;' v-model='dataForm.eventLevel' placeholder="请选择报警类型等级" clearable)
                            el-option(v-for="(item,index) in levelList" :key="index" :label="item.name" :value="item.id")
        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,
      dataForm: {},
      levelList: [
        { id: 1, name: '特别重大' },
        { id: 2, name: '重大' },
        { id: 3, name: '一般' },
      ],
      dataRule: {
        eventName: [
          { required: true, message: '报警类型名称不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            message: '长度在 1 到 50 个字符',
            trigger: 'blur',
          },
        ],
        eventCode: [
          { required: true, message: '报警类型编码不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'blur',
          },
        ],
        eventLevel: [
          { required: true, message: '报警类型等级不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val === false) {
          this.$refs.dataForm.resetFields()
        }
      },
      deep: true,
    },
  },
  methods: {
    init(row, resourceType) {
      this.visible = true
      if (row.id) {
        this.dataForm = JSON.parse(JSON.stringify(row))
      } else {
        this.dataForm = {
          id: '',
          eventName: '',
          eventCode: '',
          eventLevel: '',
          resourceType: resourceType,
          stationId: localStorage.getItem('stationId'),
        }
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.clickFlag = true
          this.$http({
            url: this.$http.adornUrl(
              `/linkEvent/${!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.clickFlag = false
              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>
