<template>
	<view class="sacn-box">
		<!-- inputmode="none" -->
		<input class="uni-input scan-border" v-model="scanValue" :maxlength="-1" :focus="focus" :placeholder="placeholder" @input="onKeyInput" @confirm="inputConfirm" />
		<!-- <uni-icons type="scan" size="32" color="#b9b9b9" @click="getFocus"></uni-icons> -->
	</view>
</template>

<script>
export default {
	name: 'scan-input',
	props: {
		placeholder: {
			default: '请扫码'
		}
	},
	data() {
		return {
			focus: true,
			scanValue: ''
		};
	},
	methods: {
		onKeyInput: function (event) {
			this.scanValue = event.target.value;
		},
		emitValue() {
			const _value = this.scanValue;
			setTimeout(() => {
				this.scanValue = '';
			}, 100);
			this.$nextTick(() => {
				this.$emit('scanConfirm', _value);
				this.getFocus();
			});
		},
		inputConfirm() {
			this.emitValue();
		},
		// 重置焦点
		getFocus() {
			// 重置焦点
			this.focus = false;
			setTimeout(() => {
				this.focus = true;
			}, 200);
		}
	}
};
</script>

<style scoped>
.sacn-box {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-item: center;
	justify-content: center;
}
.uni-input {
	width: 100%;
	font-size: 24px;
}
.scan-border {
	border-radis: 10%;
	border: 1px solid #b9b9b9;
}
</style>
