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) => <ElOption key={index} disabled={opt[optionProps.value.disabled]} label={opt[optionProps.value.label] ?? opt} value={opt[optionProps.value.value] ?? opt}></ElOption>)
    // const ElGroup = (optionGroup) => optionGroup.map((group, index) => <ElOptionGroup key={index} label={group.label}>
    //   {
    //     ElOptions(group.options ?? [])
    //   }
    // </ElOptionGroup>)
    // const renderOption = () => securityConfig.value.isGroupOption ? ElGroup(options.value) : ElOptions(options.value)
    return () => <ElSelect v-model={proxyOptionsValue.value}
        clearable={formInput.clearable.value}
        placeholder={placeholder.value}
        filterable={filterable.value || allowCreate.value || securityConfig.value.remote}
        allow-create={allowCreate.value}
        disabled={securityConfig.value.disabled}
        multiple={multiple.value}
        remote={securityConfig.value.remote}
        remoteMethod={securityConfig.value.remoteMethod && remoteMethod}
        collapse-tags={securityConfig.value.collapseTags}
        loading={remoteSearchLoading.value}
        style={{ width: width.value }}
        popper-class="cip-popper-class"
        no-match-text={formInput.noMatchText.value}>
      {ElOptions(options.value)}
  </ElSelect>
  }
}