<template>
  <div>
    <el-form ref="modelForm" :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="!model.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="!model.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="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="模型表" prop="mongodb_model_table" v-if="modelType ===4">
        <el-input v-model="form['mongodb_model_table']" size="mini"
                  :disabled="!model.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="!model.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="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>


      <el-form-item label="辐照度列" prop="col_radiance" v-if="modelType === 0">
        <el-input v-model="form['col_radiance']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="风速列" prop="col_speed" v-if="modelType === 1">
        <el-input v-model="form['col_speed']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="辐照度最大值" prop="radiance_max" v-if="modelType === 0">
        <el-input v-model="form['radiance_max']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="装机容量" prop="cap" v-if="modelType !== 2 && modelType !== 4">
        <el-input v-model="form['cap']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>

      <el-form-item label="归一化表" prop="scaler_table" v-if="modelType === 3">
        <el-input v-model="form['scaler_table']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>

      <el-form-item label="是否配置生产" prop="forecast_file" v-if="modelType !== 3">
        <el-select v-model="form['forecast_file']" clearable placeholder="请选择" size="small" style="width: 100%"
                   @change="forecastFileChange">
          <el-option
            v-for="item in forecastFileType" :disabled="!model.isEnable"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否配置生产" prop="algorithm_test" v-if="modelType ===3">
        <el-select v-model="form['algorithm_test']" clearable placeholder="请选择" size="small" style="width: 100%"
                   @change="columnChange">
          <el-option
            v-for="item in algorithmTestType" :disabled="!model.isEnable"
            :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="modelType ===3">
        <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="平滑参数" v-if="modelType ===1">
        <el-select v-model="form['sigmoid_param']" clearable placeholder="请选择" size="small" style="width: 100%">
          <el-option
            v-for="item in sigmoidParamType" :disabled="!model.isEnable"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="目标列" prop="target">
        <el-input v-model="form['target']" size="mini"
                  :disabled="!model.isEnable || (form['forecast_file'] !=='0' &&form['algorithm_test'] !=='1') " type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>

      <el-form-item label="预测长度" prop="pre_len" v-if="modelType === 2">
        <el-input v-model="form['pre_len']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="预测粒度" prop="freq" v-if="modelType ===2">
        <el-select v-model="form['freq']" clearable placeholder="请选择" size="small" style="width: 100%">
          <el-option
            v-for="item in sigmoidParamType" :disabled="!model.isEnable"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模型名称" prop="model_name" v-if="modelType ===3 || modelType ===4">
        <el-input v-model="form['model_name']" size="mini"
                  :disabled="!model.isEnable || (form['forecast_file'] !=='0'&& modelType===2) " type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="读取模型表名" prop="model_table" v-if="modelType ===3">
        <el-input v-model="form['model_table']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>


      <el-form-item label="周期" prop="seasonal_periods" v-if="modelType === 2">
        <el-input v-model="form['seasonal_periods']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="日出时间" v-if="modelType === 2">
        <el-input v-model="form['sunrise']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="日落时间" v-if="modelType === 2">
        <el-input v-model="form['sunset']" size="mini"
                  :disabled="!model.isEnable" 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() {
    this.$nextTick(() => {
      this.$refs.modelForm.clearValidate();
    });
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        console.log(newVal)
        this.$nextTick(() => {
          this.$refs.modelForm.clearValidate()
        });
        this.model = newVal
        this.modelType = this.modelName.find(w => w.label === newVal.componentType).value
        this.rules = {}
        if (this.modelType === 0) {
          this.rules = {...this.commonRules, ...this.solarRules}
        } else if (this.modelType === 1) {
          this.rules = {...this.commonRules, ...this.windRules}
        } else if (this.modelType === 2) {
          this.rules = {...this.commonRules, ...this.HoltwintersRules}
        } else if (this.modelType === 3) {
          this.rules = {...this.commonRules, ...this.LSTMRules}
        } else if (this.modelType === 4) {
          this.rules = {...this.commonRules, ...this.machineRules}
        }
        this.form = newVal.params

      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      forecastFileType: [
        {label: '测试', value: '0'},
        {label: '生产', value: '1'}
      ],
      algorithmTestType: [
        {label: '测试', value: '1'},
        {label: '生产', value: '0'},
        {label: '其他', value: 'ok'}
      ],
      stationType: [
        {label: '光', value: '1'},
        {label: '风', value: '2'}
      ],
      sigmoidParamType: [
        {label: 'L', value: '1'},
        {label: 'x0', value: '7'},
        {label: 'k', value: '0.9'}
      ],
      modelName: [
        {label: '光伏物理模型', value: 0},
        {label: '风电物理模型', value: 1},
        {label: 'Holtwinters模型', value: 2},
        {label: 'LSTM', value: 3},
        {label: '机器学习模型', value: 4}
      ],
      modelType: 0,
      model: {},
      form: {},
      rules: {},
      commonRules: {
        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'}
        ],
        farm_id: [
          {required: true, message: '请填写站点编码', trigger: 'blur'}
        ],
        target: [
          {required: true, message: '请填写目标列', trigger: 'blur'}
        ],
        model_name: [
          {required: true, message: '请填写模型名称', trigger: 'blur'}
        ],


      },
      solarRules: {
        radiance_max: [
          {required: true, message: '请填写辐照度最大值', trigger: 'blur'}
        ],
        col_radiance: [
          {required: true, message: '请填写辐照度列名', trigger: 'blur'}
        ],
        cap: [
          {required: true, message: '请填写装机容量', trigger: 'blur'}
        ],
      },
      windRules: {
        sigmoid_param: [
          {required: true, message: '请选择平滑参数', trigger: 'change'}
        ],
        col_speed: [
          {required: true, message: '请填写实测风速列', trigger: 'blur'}
        ],
        cap: [
          {required: true, message: '请填写装机容量', trigger: 'blur'}
        ],
      },
      HoltwintersRules: {
        freq: [
          {required: true, message: '请选择预测粒度', trigger: 'change'}
        ],
        pre_len: [
          {required: true, message: '请填写预测长度', trigger: 'blur'}
        ],
        seasonal_periods: [
          {required: true, message: '请填写周期', trigger: 'blur'}
        ],
      },
      LSTMRules: {
        scaler_table: [
          {required: true, message: '请填写归一化表', trigger: 'blur'}
        ],
        model_table: [
          {required: true, message: '请填写读取模型表名', trigger: 'blur'}
        ],
        cap: [
          {required: true, message: '请填写装机容量', trigger: 'blur'}
        ],
        algorithm_test: [
          {required: true, message: '请选择测试or生产', trigger: 'change'}
        ],
        station_type: [
          {required: true, message: '请选择类型', trigger: 'change'}
        ],
      },
      machineRules: {

        cap: [
          {required: true, message: '请填写装机容量', trigger: 'blur'}
        ],
        mongodb_model_table: [
          {required: true, message: '请填写模型表', trigger: 'blur'}
        ],
      },
      columnDisabled: false,
      stationTypeDisabled: false,
    }
  },
  mounted() {
  },
  methods: {
    saveTask() {
      this.$refs.modelForm.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.model.componentType + '模块校验未通过')
          console.log('error submit!!');
          return false;
        }
      });

      // this.dialogVisible = false
    },
    forecastFileChange() {
      if (this.form['forecast_file'] === '0') {
        this.form['howLongAgo'] = '1'
        this.rules.target[0].required = true
        this.rules.model_name[0].required = true
      } else {
        this.rules.target[0].required = false
        this.rules.model_name[0].required = false
        this.form['howLongAgo'] = ''
      }
    },
    columnChange() {
      if(this.form['algorithm_test'] === 'ok'){
        this.stationTypeDisabled = true
        this.rules.station_type[0].required = false
        this.form['station_type'] = null
      }else{
        this.stationTypeDisabled = false
        this.rules.station_type[0].required = true
      }
      if (this.form['algorithm_test'] === '1') {
        this.columnDisabled = false
        this.rules.target[0].required = true
      } else {
        this.columnDisabled = true
        this.rules.target[0].required = false
      }
    }
  },

}
</script>

<style scoped lang="scss">

</style>
