<template>
  <el-drawer
    :title="ruleForm.id?'修改':'添加'"
    :visible.sync="visible"
    direction="rtl"
    size="500px"
    :before-close="handleClose"
  >
    <div class="standard-form">
      <el-form ref="ruleForm" :model="ruleForm" size="small" label-width="100px">
        <el-form-item label="参数名称" prop="name" :rules="{
                    required: true, message: '参数名称不能为空', trigger: 'blur'
                  }">
          <el-input maxlength="20" clearable v-model="ruleForm.name" size="small" placeholder="请输入参数名称"/>
        </el-form-item>
        <el-form-item label="英文名称" prop="code" :rules="{
                    required: true, message: '英文名称不能为空', trigger: 'blur'
                  }">
          <el-input maxlength="20" clearable v-model="ruleForm.code" size="small" placeholder="请输入英文名称"/>
        </el-form-item>
        <el-form-item label="对比方式" prop="method" :rules="{
                    required: true, message: '对比方式不能为空', trigger: 'change'
                  }">
          <el-select
            clearable
            v-model="ruleForm.method"
            size="small"
            placeholder="-请选择-"
          >
            <el-option key="<=" label="<=" value="<="/>
            <el-option key=">=" label=">=" value=">="/>
          </el-select>
        </el-form-item>
        <el-form-item label="Ⅰ类" prop="categoryOne">
          <el-input @blur="numChange('categoryOne')"
                    oninput="value=value.replace(/[^\d.]/g,'')" clearable placeholder="mg/L"
                    size="small" v-model="ruleForm.categoryOne"></el-input>
        </el-form-item>
        <el-form-item label="Ⅱ类" prop="categoryTwo">
          <el-input @blur="numChange('categoryTwo')"
                    oninput="value=value.replace(/[^\d.]/g,'')" clearable placeholder="mg/L"
                    size="small" v-model="ruleForm.categoryTwo"></el-input>
        </el-form-item>
        <el-form-item label="Ⅲ类" prop="categoryThree">
          <el-input @blur="numChange('categoryThree')"
                    oninput="value=value.replace(/[^\d.]/g,'')" clearable placeholder="mg/L"
                    size="small" v-model="ruleForm.categoryThree"></el-input>
        </el-form-item>
        <el-form-item label="Ⅳ类" prop="categoryFour">
          <el-input @blur="numChange('categoryFour')"
                    oninput="value=value.replace(/[^\d.]/g,'')" clearable placeholder="mg/L"
                    size="small" v-model="ruleForm.categoryFour"></el-input>
        </el-form-item>
        <el-form-item label="Ⅴ类" prop="categoryFive">
          <el-input @blur="numChange('categoryFive')"
                    oninput="value=value.replace(/[^\d.]/g,'')" clearable placeholder="mg/L"
                    size="small" v-model="ruleForm.categoryFive"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button
          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/standard'

  export default {
    name: "standard-form",
    data() {
      return {
        ruleForm: {},
        uploadLoading: false,
        addBtnLoading: false
      };
    },
    props: {
      visible: {
        type: Boolean,
        default() {
          return false;
        }
      },
      data: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    components: {},
    created() {
      this.ruleForm = JSON.parse(JSON.stringify(this.data));
    },
    mounted() {
    },
    methods: {
      numChange(name) {
        let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
        ruleForm[name] = ruleForm[name] ? (ruleForm[name].indexOf('.') > -1 ? parseFloat(parseFloat(ruleForm[name]).toFixed(2)) : parseFloat(ruleForm[name])) : ''
        if(ruleForm[name]===0){
          ruleForm[name] ='0'
        }else{
          if (!ruleForm[name]) {
            ruleForm[name] = ''
          }
        }
        this.ruleForm = Object.assign({}, ruleForm)
      },
      handleClose() {
        this.$emit("handleClose");
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let ruleForm = JSON.parse(JSON.stringify(this.ruleForm));
            this.addBtnLoading = true;
            let method='add'
            if(this.ruleForm.id){
              method='edit'
            }
            api[method](ruleForm)
              .then(res => {
                this.addBtnLoading = false;
                this.$message({
                  type: "success",
                  message: "操作成功"
                });
                this.$emit('successSubmit')
              })
              .catch(e => {
                this.addBtnLoading = false;
              });
          }
        });
      }
    }
  };
</script>
