<template>
  <div>
    <el-form ref="modelTestForm" :rules="rulesModelTest" :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="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="读取的mongo表" prop="mongodb_read_table" v-if="modelTestType !== 3">
        <el-input v-model="form['mongodb_read_table']" size="mini"
                  :disabled="!modelTest.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="!modelTest.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="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="站点编码" prop="farm_id">
        <el-input v-model="form['farm_id']" size="mini"
                  :disabled="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>

      <el-form-item label="归一化表" prop="scaler_table" v-if="modelTestType === 0">
        <el-input v-model="form['scaler_table']" size="mini"
                  :disabled="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="模型名称" prop="model_name">
        <el-input v-model="form['model_name']" size="mini"
                  :disabled="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="存储的模型表" prop="model_table" v-if="modelTestType ===0">
        <el-input v-model="form['model_table']" size="mini"
                  :disabled="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>

      <el-form-item label="测试or生产" prop="algorithm_test" v-if="modelTestType ===0">
        <el-select v-model="form['algorithm_test']" clearable placeholder="请选择" size="small" style="width: 100%"
                   @change="columnChange">
          <el-option
            v-for="item in algorithmTestType"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否配置生产" prop="forecast_file" v-if="modelTestType === 1">
        <el-select v-model="form['forecast_file']" clearable placeholder="请选择" size="small" style="width: 100%"
                   @change="columnChange">
          <el-option
            v-for="item in forecastFileType"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="station_type" v-if="modelTestType ===0">
        <el-select v-model="form['station_type']" clearable placeholder="请选择" size="small" style="width: 100%" :disabled="stationTypeDisabled">
          <el-option
            v-for="item in stationType"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="装机容量" prop="cap" v-if="modelTestType === 0">
        <el-input v-model="form['cap']" size="mini"
                  :disabled="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>

      <el-form-item label="模型表" prop="mongodb_model_table" v-if="modelTestType === 1">
        <el-input v-model="form['mongodb_model_table']" size="mini"
                  :disabled="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>

      <el-form-item label="数据开始时间">
        <el-input v-model="form['timeBegin']" size="mini"
                  :disabled="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="数据结束时间">
        <el-input v-model="form['timeEnd']" size="mini"
                  :disabled="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="测试第N天">
        <el-input v-model="form['howLongAgo']" size="mini"
                  :disabled="!modelTest.isEnable || columnDisabled" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="目标列" prop="target">
        <el-input v-model="form['target']" size="mini"
                  :disabled="!modelTest.isEnable || columnDisabled" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>


    </el-form>
  </div>
</template>
<script>
import fa from "element-ui/src/locale/lang/fa";

export default {
  props: {
    formData: {
      type: Object,
      default: {}
    }
  },
  destroyed() {
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        console.log(newVal.params,new Date())
        this.modelTest = newVal
        this.modelTestType = newVal.componentType.includes('LSTM') ? 0 : 1
        this.rulesModelTest = {}
        if (this.modelTestType === 0) {
          this.rulesModelTest = {...this.commonRules, ...this.LSTMRules}
        } else if (this.modelTestType === 1) {
          this.rulesModelTest = {...this.commonRules, ...this.machineRules}
        }
        if(JSON.stringify(newVal.params) !== '{}'){
          this.form = JSON.parse(JSON.stringify(newVal.params))
        }else{
          this.form = {}
        }
        this.columnChange()
        this.$nextTick(() => {
          // alert()
          this.$refs.modelTestForm.clearValidate();
          this.$refs.modelTestForm.resetFields();
        });
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      stationType: [
        {label: '光', value: '1'},
        {label: '风', value: '2'}
      ],
      forecastFileType: [
        {label: '测试', value: '0'},
        {label: '生产', value: '1'}
      ],
      algorithmTestType: [
        {label: '测试', value: '1'},
        {label: '生产', value: '0'},
        {label: '其他', value: 'ok'}
      ],
      modelTestType: 0,
      modelTest: {},
      form: {},
      rulesModelTest: {},
      commonRules: {
        mongodb_database: [
          {required: true, message: '请填写mongo库', trigger: ['blur', 'change']}
        ],
        mongodb_write_table: [
          {required: true, message: '请填写写入的mongo表', trigger: ['blur', 'change']}
        ],
        mongodb_read_table: [
          {required: true, message: '请填写读取的mongo表', trigger: ['blur', 'change']}
        ],
        col_time: [
          {required: true, message: '请填写时间列名', trigger: ['blur', 'change']}
        ],
        farm_id: [
          {required: true, message: '请填写站点编码', trigger: ['blur', 'change']}
        ],
        target: [
          {required: true, message: '请填写目标列', trigger: ['blur', 'change']}
        ],
        model_name: [
          {required: true, message: '请填写模型名称', trigger: ['blur', 'change']}
        ],
      },
      LSTMRules: {
        scaler_table: [
          {required: true, message: '请填写归一化表', trigger: ['blur', 'change']}
        ],
        model_table: [
          {required: true, message: '请填写存储的模型表', trigger: ['blur', 'change']}
        ],
        algorithm_test: [
          {required: true, message: '请选择测试or生产', trigger: 'change'}
        ],
        cap: [
          {required: true, message: '请填写预测上限', trigger: ['blur', 'change']}
        ],
        station_type: [
          {required: true, message: '请选择类型', trigger: 'change'}
        ],
      },
      machineRules: {
        forecast_file: [
          {required: true, message: '请选择测试or生产', trigger: 'change'}
        ],
        mongodb_model_table: [
          {required: true, message: '请填写模型表', trigger: ['blur', 'change']}
        ],
        howLongAgo: [
          {required: true, message: '请填写预测第N天', trigger: ['blur', 'change']}
        ],
      },
      columnDisabled: false,
      stationTypeDisabled: false,
    }
  },
  mounted() {
  },
  methods: {
    saveTask() {
      this.$refs.modelTestForm.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.modelTest.componentType + '模块校验未通过')
          return false;
        }
      });

      // this.dialogVisible = false
    },
    columnChange() {
      if(this.modelTestType === 0){
        if(this.form['algorithm_test'] === 'ok'){
          this.stationTypeDisabled = true
          this.rulesModelTest.station_type[0].required = false
          this.form['station_type'] = null
        }else{
          this.stationTypeDisabled = false
          this.rulesModelTest.station_type[0].required = true
        }
      }
      if (this.form['forecast_file'] === '0' || this.form['algorithm_test'] === '1') {
        this.columnDisabled = false
        this.rulesModelTest.target[0].required = true
      } else {
        this.columnDisabled = true
        this.rulesModelTest.target[0].required = false
        if(this.rulesModelTest.howLongAgo !==undefined){
          this.rulesModelTest.howLongAgo[0].required = false
        }
      }
    },
  },

}
</script>

<style scoped lang="scss">

</style>
