import { ElSelect, ElOption } from 'element-plus'
import { computed, ref } from 'vue'
import { useFormInput, useOptions } from '@cip/components/hooks/form-input'
import { formInputProps, fromInputEmits } from '../../form-input-props'
export default {
components: { ElSelect, ElOption },
props: formInputProps,
emits: [...fromInputEmits],
setup (props, context) {
const remoteSearchLoading = ref(false)
const { width, securityConfig, proxyOtherValue, updateStream, ...formInput } = useFormInput(props, context, { maxOtherKey: 2 })
// 是否多选
const multiple = computed(() => {
return securityConfig.value.multiple ?? false
})
const { optionProps, options, proxyOptionsValue } = useOptions(props, multiple, updateStream, context)
// 是否可搜索
const filterable = computed(() => {
return securityConfig.value.filterable ?? false
})
// 是否允许创建
const allowCreate = computed(() => {
return securityConfig.value.allowCreate ?? false
})
// placeholder
const placeholder = computed(() => {
return formInput.placeholder.value ?? '请选择'
})
// 关闭远程搜索loading
const closeRemoteLoading = () => {
remoteSearchLoading.value = false
}
const remoteMethod = async (query) => {
remoteSearchLoading.value = true
try {
options.value = await securityConfig.value.remoteMethod(query, props.dependOnValues)
} finally {
closeRemoteLoading()
}
}
if (securityConfig.value.remoteMethod) {
const query = proxyOtherValue[0] ? proxyOtherValue[0].value : ''
remoteSearchLoading.value = true
remoteMethod(query).finally(closeRemoteLoading)
}
const ElOptions = (optionsData) => optionsData.map((opt, index) => )
// const ElGroup = (optionGroup) => optionGroup.map((group, index) =>
// {
// ElOptions(group.options ?? [])
// }
// )
// const renderOption = () => securityConfig.value.isGroupOption ? ElGroup(options.value) : ElOptions(options.value)
return () =>
{ElOptions(options.value)}
}
}