import { ElAutocomplete } from 'element-plus'
import { generateProps, generateEmits } from '../helper/component-util'
import { componentScheme } from './component.scheme'
import { computed, ref } from 'vue'
import { getUsingConfig } from '@cip/utils/util'
export default {
  name: 'CipAutocomplete',
  props: generateProps(componentScheme),
  emits: generateEmits(componentScheme),
  setup (props, { slots, attrs, expose }) {
    const autocompleteRef = ref()
    const suffixIcon = () => <span class="el-icon-search"></span>
    const placeholder = computed(() => {
      return getUsingConfig(attrs.placeholder, '搜索')
    })
    const width = computed(() => typeof props.width === 'string' ? props.width : `${props.width}px`)
    expose({
      autocompleteRef
    })
    return () => <ElAutocomplete
      modelValue={props.modelValue}
      {...attrs}
      placeholder={placeholder.value}
      style={{ width: width.value }}
      ref={autocompleteRef}>
      {{
        suffix: suffixIcon,
        prefix: slots.prefix,
        prepend: slots.prepend,
        default: slots.default
      }}
    </ElAutocomplete>
  }
}