<template>
	<div :class="{
	    'efly-input': type === 'text' || type === 'number' || type === 'password',
	    'efly-textarea': type === 'textarea',
	    'efly-input-prefix-icon': prefixIcon,
	   	'efly-input-suffix-icon': suffixIcon,
	    'efly-input-small': size === 'small' && type !== 'textarea',
	    'efly-input-mini': size === 'mini' && type !== 'textarea',
	    'efly-textarea-small': size === 'small' && type === 'textarea',
	    'efly-textarea-mini': size === 'mini' && type === 'textarea',
	}"
		 :style="'width:'+width"
	>
		<div v-if="type === 'text' || type === 'number' || type === 'password'">
			<input :type="type"
				   autocomplete="off"
				   :placeholder="placeholder"
				   :value="value"
				   :maxlength="maxlength"
				   :style="'text-align:'+align"
				   :class="{
				       disabled: status.disabled
				   }"
				   :disabled="status.disabled"
				   @input="changed"
				   @blur.stop="inputEvent($event)"
				   @focus.stop="inputEvent($event)"
				   @change.stop="inputEvent($event)"
				   @click.stop="inputEvent($event)"
				   @keyup.stop="inputEvent($event)"
				   @keydown="inputEvent($event)"
				   @keypress="inputEvent($event)"
			>
			<i class="icon prefixIcon" :class="prefixIcon" v-if="prefixIcon !== ''"></i>
			<i class="icon suffixIcon" :class="suffixIcon" v-if="suffixIcon !== ''" @click="suffixIconClick"></i>
		</div>
		<div v-if="type === 'textarea'">
			<textarea :placeholder="placeholder" :value="value" :maxlength="maxlength" @input="changed"
					  @blur.stop="inputEvent($event)"
					  @focus.stop="inputEvent($event)"
					  @change.stop="inputEvent($event)"
					  @click.stop="inputEvent($event)"
					  @keyup.stop="inputEvent($event)"
				   	  @keydown="inputEvent($event)"
				   	  @keypress="inputEvent($event)"
					  :disabled="status.disabled"
					  :style="'width:'+width"></textarea>
		</div>
	</div>
</template>

<script>
    import EflyInput from "./input";

    export default EflyInput;
</script>

<style lang="scss" scoped>
</style>
