<template>
  <div class="uif-filter" :class="classes">
    <div class="uif-filter-inner">
      <template v-for="input in inputs">
        <base-render :key="getInputKey(input)" :params="input" :render="inputRender"></base-render>
      </template>
      <div v-if="hasMore">
        <u-icon class="uif-filter-more" scene="action" title="更多筛选条件"
                type="more-horizontal" @click="$emit('click')"></u-icon>
      </div>
    </div>
  </div>
</template>

<script>
import UIcon from '@uif/hq/lib/components/icon'
import BaseRender from '@uif/hq/lib/components/base-render'
import FilterSelect from './filter-select'
import FilterCheckbox from './filter-checkbox'
import {getInputKey, getFormData, setFormData, resetInputs} from '@uif/admin/lib/utils/form'

function getComponentByInput (input) {
  switch (input.type.toLowerCase()) {
    case 'select':
      return FilterSelect
    case 'checkbox':
      return FilterCheckbox
    default:
      return input.component
  }
}
export default {
  inheritAttrs: false,
  name: 'u-filter',
  components: {
    UIcon,
    BaseRender
  },
  props: {
    // FormItem props 集合
    inputs: {
      type: Array,
      default () {
        return []
      }
    },
    hasMore: {
      type: Boolean,
      default: false
    },
    split: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      getInputKey
    }
  },
  computed: {
    classes () {
      return {
        'uif-filter-group': !this.split,
        'uif-filter-split': this.split
      }
    }
  },
  methods: {
    // 获取formData
    getValue () {
      return getFormData(this.inputs)
    },
    // 设置表单值
    set (name, value) {
      setFormData(this.inputs, name, value)
    },
    // 清空表单
    empty () {
      resetInputs(this.inputs)
    },
    inputRender (h, {params}) {
      const input = params
      return h(getComponentByInput(input), {
        props: {input},
        on: this.$listeners
      })
    }
  }
}
</script>
