import { ElButton } from 'element-plus'

import './index.less'
export default {
  name: 'CipSearchInput',
  props: {
    modelValue: {},
    loading: Boolean,
    buttonText: String
  },
  emits: ['search', 'update:modelValue'],
  setup (props, { emit, slots }) {
    const emitValue = (e) => {
      emit('update:modelValue', e.target.value)
    }
    return () => <div class={'cip-search-input__wrapper'}>
      <div class={'cip-search-input'}>
        <input class={'cip-search-input__input'} value={props.modelValue} onInput={(e) => emitValue(e)}/>
        <ElButton
          class={'cip-search-input__button'}
          type={'primary'}
          icon={'el-icon-search'}
          onClick={() => emit('search')}
          loading={props.loading}
        >{props.buttonText || slots.buttonText?.() || '搜索'}</ElButton>
      </div>
      {slots?.append && <div style={{ marginLeft: '12px' }}>{slots?.append()}</div>}
    </div>
  }
}