import { computed, h } from 'vue'
import { formInputViewProps } from '../../form-input-props'
import { isNotEmpty, isArray, isObject } from '@cip/utils/util'
import { useOptions } from '@cip/components/hooks/form-input'
export default {
  props: formInputViewProps,
  setup (props) {
    const multiple = computed(() => {
      return props.config?.multiple ?? false
    })
    const { getValue, getOtherValue, optionProps } = useOptions(props, multiple)

    const viewValue = computed(() => {
      if (isNotEmpty(props.otherValue)) return props.otherValue
      const value = getValue(props.modelValue)
      const otherValue = getOtherValue(props.modelValue, value) // || props.modelValue
      if (isArray(otherValue)) {
        if (isObject(otherValue[0])) {
          return otherValue.map(i => i[optionProps.value.label]).join(', ')
        }
        return otherValue.join(', ')
      }
      return otherValue
    })
    return () => h('span', {}, [viewValue.value])
  }
}