import { Component, Vue, Prop, Emit } from 'vue-property-decorator';

@Component
export default class Field extends Vue {
  @Prop() value: any;
  @Prop() currentValue: any;
  @Prop() config: any;

  /**
   * 更新值
   * @author tanxj
   * @param value
   */
  @Emit('on-change')
  onValueChange(value: any) {
    return {
      key: this.config.key,
      value: value
    };
  }

  @Emit('on-change')
  onSearchInputChange(value: any, key?: string) {
    return {
      key: key || this.config.selectKey,
      value: value
    };
  }

  protected render() {
    this.config.onChange = this.config.onChange || function () {
    };
    this.config.onBlur = this.config.onBlur || function () {
    };
    this.config.onFocus = this.config.onFocus || function () {
    };
    this.config.onSelectChange = this.config.onSelectChange || function () {
    };
    switch (this.config.type) {
      case 'text': {
        return (
          <mu-input value={this.value} config={this.config} on-on-change={this.config.onChange}
                    on-on-focus={this.config.onFocus} on-on-blur={this.config.onBlur} extension={this.config.extension}
                    on-input={this.onValueChange}/>);
      }
      case 'select': {
        return (
          <mu-select value={this.value} config={this.config} on-input={this.onValueChange}
                     extension={this.config.extension} on-on-blur={this.config.onBlur}
                     on-on-focus={this.config.onFocus} on-on-change={this.config.onChange}/>);
      }
      case 'selectInput': {
        return (
          <mu-select-input value={this.value} select={this.currentValue[this.config.selectKey]} config={this.config}
                           on-on-select-change={this.config.onSelectChange}
                           on-on-focus={this.config.onFocus}
                           on-input={this.onValueChange} on-on-blur={this.config.onBlur}
                           on-select={this.onSearchInputChange}
                           on-on-change={this.config.onChange}/>);
      }
      case 'password': {
        return (
          <mu-input-password value={this.value} config={this.config} on-on-change={this.config.onChange}
                             on-on-focus={this.config.onFocus} on-on-blur={this.config.onBlur}
                             on-input={this.onValueChange}/>);
      }
      case 'inputNumber': {
        return (
          <mu-input-number value={this.value} config={this.config} on-on-change={this.config.onChange}
                           on-on-focus={this.config.onFocus} on-on-blur={this.config.onBlur}
                           on-input={this.onValueChange}/>);
      }
      case 'textarea': {
        return (
          <mu-textarea value={this.value} config={this.config} on-on-change={this.config.onChange}
                       on-on-focus={this.config.onFocus} on-on-blur={this.config.onBlur}
                       on-input={this.onValueChange}/>);
      }
      case 'checkbox': {
        return (
          <mu-checkbox value={this.value} config={this.config} on-on-change={this.config.onChange}
                       extension={this.config.extension} on-input={this.onValueChange}/>);
      }
      case 'radio': {
        return (
          <mu-radio value={this.value} config={this.config} on-on-change={this.config.onChange}
                    extension={this.config.extension} on-input={this.onValueChange}/>);
      }
      case 'datePicker': {
        return (
          <mu-datepicker value={this.value} config={this.config} on-on-change={this.config.onChange}
                         on-on-focus={this.config.onFocus} on-on-blur={this.config.onBlur}
                         on-input={this.onValueChange}/>);
      }
      case 'timePicker': {
        return (
          <mu-timepicker value={this.value} config={this.config} on-on-change={this.config.onChange}
                         on-on-focus={this.config.onFocus} on-on-blur={this.config.onBlur}
                         on-input={this.onValueChange}/>);
      }
      case 'switch': {
        return (
          <mu-switch value={this.value} config={this.config} on-on-change={this.config.onChange}
                     on-input={this.onValueChange}/>);
      }
      case 'cascader': {
        return (
          <mu-cascader value={this.value} config={this.config} on-on-change={this.config.onChange}
                       on-on-focus={this.config.onFocus} extension={this.config.extension}
                       on-on-blur={this.config.onBlur} on-input={this.onValueChange}/>);
      }
      case 'selectTree': {
        return (
          <mu-select-tree value={this.value} config={this.config} on-on-change={this.config.onChange}
                          extension={this.config.extension} on-on-focus={this.config.onFocus}
                          on-input={this.onValueChange} on-on-blur={this.config.onBlur}/>);
      }
      case 'selectTable': {
        return (
          <mu-select-table value={this.value} config={this.config} on-on-change={this.config.onChange}
                           extension={this.config.extension} on-input={this.onValueChange}
                           on-on-focus={this.config.onFocus} on-on-blur={this.config.onBlur}/>);
      }
      case 'selectAdd': {
        return (
          <mu-select-add value={this.value} config={this.config} on-on-change={this.config.onChange}
                         extension={this.config.extension} on-input={this.onValueChange}
                         on-on-focus={this.config.onFocus} on-on-blur={this.config.onBlur}/>);
      }
      case 'searchInput': {
        return (
          <mu-search-input value={this.value} config={this.config} on-on-change={this.config.onChange}
                           on-on-focus={this.config.onFocus} on-input={this.onValueChange}
                           on-on-blur={this.config.onBlur}/>);
      }
      case 'radioGroup': {
        return (
          <mu-radio-group value={this.value} config={this.config} on-on-change={this.config.onChange}
                          extension={this.config.extension} on-input={this.onValueChange}/>);
      }
      case 'searchHigh': {
        return (
          <mu-search-high value={this.value} config={this.config} on-on-change={this.config.onChange}
                          extension={this.config.extension} on-input={this.onValueChange}/>);
      }
      default: {
        return (<span><br/>无当前表单类型{this.config.type}</span>);
      }
    }
  }
}