<template>
  <el-input :model-value="modelValue"
            @update:modelValue="emitInput"
            :placeholder="placeholder"
            :disabled="disabled"
            :style="{width}"
            :maxlength="limit"
            :show-word-limit="showWordLimit && !!limit"
            show-password
            :clearable="clearable"></el-input>
</template>
<script>
import { ElInput } from 'element-plus'
import { useFormInput } from '@cip/components/hooks/form-input'
import { formInputProps } from '../../form-input-props'
import { computed } from 'vue'

export default {
  name: 'BasicInput',
  components: { ElInput },
  props: formInputProps,
  emits: ['update:modelValue'],
  setup (props, context) {
    const formInput = useFormInput(props, context)
    const placeholder = computed(() => {
      return props.config?.placeholder ?? ''
    })
    const limit = computed(() => {
      return props.config?.limit ?? ''
    })
    const showWordLimit = computed(() => {
      return props.config?.showWordLimit ?? true
    })

    return {
      ...formInput,
      placeholder,
      limit,
      showWordLimit
    }
  }
}
</script>
