<template>
	<u-input input-align='right' :border="false" v-model="innerValue" :type="showPassword?'password':'text'"
		:placeholder="placeholder" :maxlength="maxlength" :disabled="disabled" :clearable='clearable' @blur="onBlur"
		@input="onInput" />
</template>
<script>
	export default {
		name: 'jnpf-input',
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			value: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: ''
			},
			maxlength: {
				type: Number,
				default: 140
			},
			showPassword: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			clearable: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				innerValue: '',
				timer: null
			}
		},
		watch: {
			value: {
				handler(val) {
					this.innerValue = val
				},
				immediate: true,
			}
		},
		methods: {
			onBlur() {
				this.$emit('blur', this.innerValue)
			},
			onInput(val) {
				this.$emit('input', val)
				this.$emit('change', val)
			}
		}
	}
</script>