import { computed, h } from 'vue'
import { formInputViewProps, fromInputEmits } from '../../form-input-props'
import { isNotEmpty, isArray, isObject, getUsingConfig } from '@cip/utils/util'
import { useOptions, useFormView } from '@cip/components/hooks/form-input'
export default {
  props: { ...formInputViewProps, multiple: Boolean },
  emits: [...fromInputEmits],
  setup (props) {
    const { securityConfig, proxyOtherValue } = useFormView(props)
    const multiple = computed(() => {
      return getUsingConfig(securityConfig.value.multiple, props.multiple)
    })
    const { getValue, getOtherValue, optionProps } = useOptions(props, multiple)

    const viewValue = computed(() => {
      if (isNotEmpty(proxyOtherValue[0]?.value)) return proxyOtherValue[0]?.value
      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(`${securityConfig.value.splitKey} `)
        }
        return otherValue.join(`${securityConfig.value.splitKey} `)
      }
      if (isObject(otherValue)) {
        return otherValue[optionProps.value.value]
      }
      return otherValue
    })
    return () => h('span', {}, [viewValue.value])
  }
}