<template>
  <el-drawer
    :title="ruleForm.dataType==1?'预警':'详情'"
    :visible.sync="visible"
    direction="rtl"
    size="500px"
    :before-close="handleClose"
  >
    <div class="info-form">
      <el-form ref="ruleForm" :model="ruleForm" size="small" label-width="80px">
        <el-form-item label="预警类型" prop="warnType"  :rules="{
                    required: true, message: '预警类型不能为空', trigger: 'blur'
                  }">
          <el-select
            :disabled="ruleForm.dataType==2?true:false"
            clearable
            v-model="ruleForm.warnType"
            size="small"
            placeholder="-请选择-"
          >
            <el-option key="1" label="水质富营养化" :value="1"/>
            <el-option key="2" label="水生藻类植物" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="预警级别" prop="warnLevel"  :rules="{
                    required: true, message: '预警级别不能为空', trigger: 'blur'
                  }">
          <el-select
            :disabled="ruleForm.dataType==2?true:false"
            clearable
            v-model="ruleForm.warnLevel"
            size="small"
            placeholder="-请选择-"
          >
            <el-option key="1" label="一级" :value="1"/>
            <el-option key="2" label="二级" :value="2"/>
            <el-option key="3" label="三级" :value="3"/>
            <el-option key="4" label="四级" :value="4"/>
            <el-option key="5" label="五级" :value="5"/>
          </el-select>
        </el-form-item>
        <el-form-item label="预警内容" prop="warnContent"  :rules="{
                    required: true, message: '参数名称不能为空', trigger: 'blur'
                  }">
          <el-input
            :disabled="ruleForm.dataType==2?true:false"
            type="textarea"
            placeholder="请输入内容"
            v-model="ruleForm.warnContent"
            rows="4"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button
          v-if="ruleForm.dataType==1"
          icon="el-icon-document-add"
          :loading="addBtnLoading"
          type="primary"
          size="medium"
          @click="submitForm('ruleForm')"
        >提交
        </el-button>
        <el-button
          icon="el-icon-back"
          style="margin-left: 15px"
          size="medium"
          @click="handleClose"
        >返回
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
  import api from '@/api/water/warn'

  export default {
    name: "info-form",
    data() {
      return {
        addBtnLoading:false,
        drawerWidth: document.body.clientWidth - 190 + "px",
        ruleForm: {},
      };
    },
    props: {
      visible: {
        type: Boolean,
        default() {
          return false;
        }
      },
      data: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    components: {},
    created() {
      this.ruleForm = JSON.parse(JSON.stringify(this.data));
    },
    mounted() {
    },
    methods: {
      handleClose() {
        this.$emit("handleClose");
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let ruleForm = JSON.parse(JSON.stringify(this.ruleForm));
            this.addBtnLoading = true;
            api.edit(ruleForm)
              .then(res => {
                this.addBtnLoading = false;
                this.$message({
                  type: "success",
                  message: "操作成功"
                });
                this.$emit('successSubmit')
              })
              .catch(e => {
                this.addBtnLoading = false;
              });
          }
        });
      }
    }
  };
</script>
