<template>
  <div class="forElFormItem">
    <el-form class="add-form-box" :model="formData" ref="form" :rules="rules" label-width="200px" v-if="modelList[0]">
      <el-form-item v-for="(item,index) in modelList" :key="index"
                    :label="item.label+'：'" :prop="item.field">
        <!--文本框-->
        <el-input v-if="item.modelType == 'text'" style="width:500px;"
                  v-model="formData[item.field]" :placeholder="'请输入'+item.label"
                  maxLength="50">
        </el-input>
        <!--文本域-->
        <el-input v-if="item.modelType == 'textarea'" style="width:500px;"
                  v-model="formData[item.field]" :placeholder="'请输入'+item.label"
                  maxLength='200' type="textarea" resize="none" show-word-limit :autosize="{ minRows: 2, maxRows: 4}">
        </el-input>
        <!--密码框-->
        <el-input v-if="item.modelType == 'password'" style="width:500px;"
                  v-model="formData[item.field]" :placeholder="'请输入'+item.label"
                  maxLength='30' show-password>
        </el-input>
        <!--计数器-->
        <el-input-number v-if="item.modelType == 'number'" style="width:500px;"
                         v-model="formData[item.field]" :placeholder="'请输入'+item.label"
                         controls-position="right" :min="1" :max="9999">
        </el-input-number>
        <!--单选下拉框-->
        <el-select v-if="item.modelType == 'select'" style="width:500px;"
                   v-model="formData[item.field]" :placeholder="'请选择'+item.label">
          <el-option v-for="minItem in item.models" :key="minItem.dictValue" :label="minItem.dictKey" :value="minItem.dictValue"></el-option>
        </el-select>
        <!--多选下拉框-->
        <el-select v-if="item.modelType == 'selectMultiple'" style="width:500px;"
                   v-model="formData[item.field]" :placeholder="'请选择'+item.label"
                   multiple collapse-tags>
          <el-option v-for="minItem in item.models" :key="minItem.dictValue" :label="minItem.dictKey" :value="minItem.dictValue"></el-option>
        </el-select>
        <!--单选框-->
        <el-radio-group v-if="item.modelType == 'radio'" style="width:500px;"
                        v-model="formData[item.field]" :placeholder="'请选择'+item.label">
          <el-radio v-for="minItem in item.models" :label="minItem.dictValue" style="padding:10px 0;">{{minItem.dictKey}}</el-radio>
        </el-radio-group>
        <!--复选框-->
        <el-checkbox-group v-if="item.modelType == 'checkbox'" style="width:500px;"
                           v-model="formData[item.field]" :placeholder="'请选择'+item.label">
          <el-checkbox v-for="minItem in item.models" :label="minItem.dictValue">{{minItem.dictKey}}</el-checkbox>
        </el-checkbox-group>
        <!--滑块-->
        <el-slider v-if="item.modelType == 'slider'" style="width:500px;"
                   v-model="formData[item.field]" ></el-slider>
        <!--时间选择器-->
        <el-time-picker v-if="item.modelType == 'timePicker'" style="width:500px;"
                        v-model="formData[item.field]" :placeholder="'请选择'+item.label"
                        format="HH:mm">
        </el-time-picker>
        <!--时间范围选择器-->
        <el-time-picker v-if="item.modelType == 'timePickerRange'" style="width:500px;"
                        v-model="formData[item.field]" :placeholder="'请选择'+item.label"
                        is-range
                        format="HH:mm"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间">
        </el-time-picker>
        <!--日期选择器-->
        <el-date-picker v-if="item.modelType == 'datePicker'" style="width:500px;"
                        v-model="formData[item.field]" :placeholder="'请选择'+item.label"
                         type="date">
        </el-date-picker>
        <!--日期范围选择器-->
        <el-date-picker v-if="item.modelType == 'datePickerRange'" style="width:500px;"
                        v-model="formData[item.field]"
          type="daterange"

          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <!--颜色选择器-->
        <el-color-picker v-if="item.modelType == 'colorPicker'"
                         v-model="formData[item.field]">
        </el-color-picker>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    name: 'forElFormItem',
    props:{
      forPropsData:{},
    },
    data(){
      return{
        formData:{},
        modelList:[],
        rules:{},
      }
    },
    watch:{
      forPropsData:{
        immediate:true,
        handler:function(val,oldval){
          if(val.formData){
            this.$set(this,'formData',this.forPropsData.formData);
          }
          if(val.modelList){
            this.$set(this,'modelList',this.forPropsData.modelList);
          }
          if(val.rules){
            this.$set(this,'rules',this.forPropsData.rules);
          }
        }
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
    }
  }
</script>
<style scoped lang="scss">
  .forElFormItem{

  }
</style>
