<template>
  <div class='adminbank-search-form'>
    <form class='form'>
      <div v-for='(val, key) in C_inputList' class='formlist'>
        <label v-if='val.label'>{{val.label}}</label>
        <component v-bind='val'></component>
      </div>
    </form>
  </div>
</template>

<script>
  import './style.less';
  
  export default {
    name: 'SearchForm',
    data () {
      return {
        Data_formList: this.search,
        Data_form: {
        }
      }
    },
    props: ['search', 'submit'],
    components: {
    },
    computed: {
      C_inputList () {
        return this.Data_formList.map(val => {
          val.component = val.component || 'input';
          switch (val.component) {
            case 'input':
              val.is = this.$COMP.InputHUI;
              val.size = val.size || 'small';
              val.enter = val.enter || this._submit;
              val.input = val.input || this._input;
              break;
            case 'button':
              val.is = this.$COMP.ButtonHUI;
              val.type = val.type || 'primary';
              val.size = val.size || 'small';
              val.onClick = val.onClick || this._submit;
              break;
            case 'select':
              val.is = this.$COMP.SelectHUI;
              val.list = val.options;
              val.afterSelected = (value, key) => {
                this.Data_form[val.name] = value.value;
              }
              break;
            default:
              break;
          }
          
          return val;
        })
      }
    },
    created () {
      this._initData();
    },
    methods: {
      _initData () {
        this.search.forEach(val => {
          if (val.component != 'button') {
            let value = '';
            if (val.component === 'select') {
              value = val.defaultData ? val.defaultData.value : '';
            }
            this.Data_form[val.name] = value;
          }
        })        
      },
      _input (e) {
        this.Data_form[e.name] = e.value;
      },
      _submit () {
        this.submit(this.Data_form)
      },
    }
  }
</script>