<script>
import NSelectFilter from '@uif/next/lib/components/select-filter'
import NSelectCascaderFilter from '@uif/next/lib/components/select-cascader-filter'
import NSelectChildrenFilter from '@uif/next/lib/components/select-children-filter'
import NSelectTreeFilter from '@uif/next/lib/components/select-tree-filter'
import NDateFilter from '@uif/next/lib/components/date-filter'
import NSwitchFilter from '@uif/next/lib/components/switch-filter'
// import NInput from '@uif/next/lib/components/input'
// import NFilePicker from '@uif/next/lib/components/file-picker'
// import NChanger from '@uif/next/lib/components/changer'
// import NRadioGroup from '@uif/next/lib/components/radio-group'
// import NCheckboxGroup from '@uif/next/lib/components/checkbox-group'
import {normalizeValue, prop} from '@uif/next/lib/utils/tools'
import {fireInputEvent} from '_common/formUtils'

function getComponent (input) {
  switch (input.type.toLowerCase()) {
    // case 'text':
    // case 'textarea':
    // case 'password':
    //   return NInput
    case 'select':
      return NSelectFilter
    case 'select-cascader':
      return NSelectCascaderFilter
    case 'select-children':
      return NSelectChildrenFilter
    case 'select-tree':
      return NSelectTreeFilter
    case 'date':
    case 'minute':
    case 'time':
    case 'dates':
    case 'month':
    case 'months':
      return NDateFilter
    // case 'file':
    //   return NFilePicker
    case 'switch':
      return NSwitchFilter
    // case 'checkbox':
    //   return NCheckboxGroup
    // case 'radio':
    //   return NRadioGroup
    // case 'changer':
    //   return NChanger
  }
}

export default {
  name: 'n-filter-item',
  props: {
    input: prop.object(),
    // 完整 inputs
    _inputs: prop.array(null)
  },
  render (h) {
    //  || getNext('nextFilterComponent')
    const component = getComponent(this.input) || normalizeValue(this.input.getComponent, this.input)
    return h(component, {
      staticClass: 'n-filter-item',
      attrs: {
        input: this.input,
        ...this.input
      },
      on: {
        ...this.$listeners,
        // 双向绑定
        input: (value) => this.$set(this.input, 'value', value),
        // change 事件
        'u-change': (value) => this.onInputEvent('u-change', 'onUChange', value),
        // focus 事件
        'u-focus': (value) => this.onInputEvent('u-focus', 'onUFocus', value),
        // blur 事件
        'u-blur': (value) => this.onInputEvent('u-blur', 'onUBlur', value)
      }
    })
  },
  methods: {
    onInputEvent (eventName, inputEventName, value) {
      fireInputEvent(inputEventName, value, this.input, this._inputs || [this.input])
      this.$emit(eventName, this.input.name, value)
    }
  }
}
</script>
