<template>
	<view class="u-input" :style="mergedStyle">
		<input
			class="u-input__inner"
			:type="type"
			:placeholder="placeholder"
			:placeholder-style="placeholderStyle"
			:value="inputValue"
			:maxlength="maxlength"
			:disabled="disabled"
			:confirm-type="confirmType"
			@input="handleInput"
			@confirm="handleConfirm"
			@focus="handleFocus"
			@blur="handleBlur"
		/>
	</view>
</template>

<script>
	export default {
		name: 'UInput',
		props: {
			modelValue: {
				type: [String, Number],
				default: ''
			},
			value: {
				type: [String, Number],
				default: ''
			},
			type: {
				type: String,
				default: 'text'
			},
			placeholder: {
				type: String,
				default: ''
			},
			placeholderStyle: {
				type: String,
				default: 'color: #c0c4cc;'
			},
			maxlength: {
				type: [String, Number],
				default: 140
			},
			disabled: {
				type: Boolean,
				default: false
			},
			confirmType: {
				type: String,
				default: 'done'
			},
			customStyle: {
				type: [String, Object],
				default: ''
			}
		},
		computed: {
			inputValue() {
				return this.modelValue !== '' && this.modelValue !== undefined
					? this.modelValue
					: this.value
			},
			mergedStyle() {
				if (typeof this.customStyle === 'string') {
					return this.customStyle
				}
				return this.customStyle || {}
			}
		},
		methods: {
			handleInput(event) {
				const value = event.detail.value
				this.$emit('update:modelValue', value)
				this.$emit('input', value)
				this.$emit('change', value)
			},
			handleConfirm(event) {
				this.$emit('confirm', event)
			},
			handleFocus(event) {
				this.$emit('focus', event)
			},
			handleBlur(event) {
				this.$emit('blur', event)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-input {
		display: flex;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
	}

	.u-input__inner {
		width: 100%;
		height: 100%;
		min-height: inherit;
		font-size: inherit;
		color: inherit;
		background: transparent;
		border: 0;
		outline: none;
	}
</style>
