<template>
  <div>
    <el-form ref="processingForm" :rules="rules" :model="form" class="demo-form-inline"
             label-width="130px">
      <el-form-item label="mongo库" prop="mongodb_database">
        <el-input v-model="form['mongodb_database']" size="mini"
                  :disabled="!processing.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="读取的mongo表" prop="mongodb_read_table">
        <el-input v-model="form['mongodb_read_table']" size="mini"
                  :disabled="!processing.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="写入的mongo表" prop="mongodb_write_table">
        <el-input v-model="form['mongodb_write_table']" size="mini"
                  :disabled="!processing.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="时间列名称" prop="col_time">
        <el-input v-model="form['col_time']" size="mini"
                  :disabled="!processing.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="plant_type">
        <el-select v-model="form['plant_type']" clearable placeholder="请选择" size="small" style="width: 100%">
          <el-option
            v-for="item in plantType" :disabled="!processing.isEnable"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据清洗流程">
        <el-input v-model="form['mongodb_nwp_table']" size="mini"
                  :disabled="!processing.isEnable || form['plant_type'] ==='wind'" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="平滑参数" prop="process_param">
        <el-input v-model="form['process_param']" size="mini"
                  :disabled="!processing.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    formData: {
      type: Object,
      default: {}
    }
  },
  destroyed() {
    this.$nextTick(() => {
      this.$refs.processingForm.clearValidate();
    });
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        console.log(newVal)
        this.processing = newVal
        this.form = newVal.params
      },
      immediate: true
    }
  },
  data() {
    return {
      processing: {},
      form: {},
      rules: {
        mongodb_database: [
          {required: true, message: '请填写mongo库', trigger: 'blur'}
        ],
        mongodb_write_table: [
          {required: true, message: '请填写写入的mongo表', trigger: 'blur'}
        ],
        mongodb_read_table: [
          {required: true, message: '请填写读取的mongo表', trigger: 'blur'}
        ],
        col_time: [
          {required: true, message: '请填写时间列名称', trigger: 'blur'}
        ],
        plant_type: [
          {required: true, message: '请选择场站类型', trigger: 'change'}
        ],
        process_param: [
          {required: true, message: '请填写平滑参数', trigger: 'blur'}
        ],
      },
      plantType: [
        {label: 'solar', value: 'solar'},
        {label: 'wind', value: 'wind'}
      ],
    }
  },
  mounted() {
  },
  methods: {
    saveTask() {
      this.$refs.processingForm.validate((valid) => {
        if (valid) {
          // console.log('child submit!');
          this.$emit('child-event', this.form)
          return true
        } else {
          this.$emit('child-event', {})
          this.$message.warning(this.processing.componentType+'模块校验未通过')
          return false;
        }
      });
      // this.dialogVisible = false
    },
  }
}
</script>

<style scoped lang="scss">

</style>
