<template>
  <el-drawer
    title="修改"
    :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="inspectNo">
          <el-input :disabled="true" clearable v-model="ruleForm.inspectNo" size="small"/>
        </el-form-item>
        <el-form-item label="区划" prop="areaName">
          <el-input :disabled="true" clearable v-model="ruleForm.areaName" size="small"/>
        </el-form-item>
        <el-form-item label="河湖名称" prop="driverName">
          <el-input :disabled="true" clearable v-model="ruleForm.driverName" size="small"/>
        </el-form-item>
        <el-form-item label="巡检时间" prop="executionTime">
          <el-input :disabled="true" clearable v-model="ruleForm.executionTime" size="small"/>
        </el-form-item>
        <el-form-item label="化学需氧量" prop="waterCod">
          <el-input @blur="numChange('waterCod')"
                    oninput="value=value.replace(/[^\d.]/g,'')" clearable placeholder="mg/L"
                    size="small" v-model="ruleForm.waterCod"></el-input>
        </el-form-item>
        <el-form-item label="氨氮" prop="waterNh3n">
          <el-input @blur="numChange('waterNh3n')"
                    oninput="value=value.replace(/[^\d.]/g,'')" clearable placeholder="mg/L"
                    size="small" v-model="ruleForm.waterNh3n"></el-input>
        </el-form-item>
        <el-form-item label="总磷" prop="waterTp">
          <el-input @blur="numChange('waterTp')"
                    oninput="value=value.replace(/[^\d.]/g,'')" clearable placeholder="mg/L"
                    size="small" v-model="ruleForm.waterTp"></el-input>
        </el-form-item>
        <el-form-item label="总氮" prop="waterTn">
          <el-input @blur="numChange('waterTn')"
                    oninput="value=value.replace(/[^\d.]/g,'')" clearable placeholder="mg/L"
                    size="small" v-model="ruleForm.waterTn"></el-input>
        </el-form-item>
        <el-form-item label="溶解氧" prop="waterDo">
          <el-input @blur="numChange('waterDo')"
                    oninput="value=value.replace(/[^\d.]/g,'')" clearable placeholder="mg/L"
                    size="small" v-model="ruleForm.waterDo"></el-input>
        </el-form-item>
        <el-form-item label="浊度" prop="waterTub">
          <el-input @blur="numChange('waterTub')"
                    oninput="value=value.replace(/[^\d.]/g,'')" clearable placeholder="mg/L"
                    size="small" v-model="ruleForm.waterTub"></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/waterData'

  export default {
    name: "edit-form",
    data() {
      return {
        ruleForm: {},
        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;
            api.edit(ruleForm)
              .then(res => {
                this.addBtnLoading = false;
                this.$message({
                  type: "success",
                  message: "操作成功"
                });
                this.$emit('successSubmit')
              })
              .catch(e => {
                this.addBtnLoading = false;
              });
          }
        });
      }
    }
  };
</script>
