<template>
	<div style="width:100vw;height:100vh;display: flex;justify-content: center;">
		<div class="divInfo">
			<div class="divTitle">请输入车辆二维码下方6位编号开锁</div>
			<div>
				<image class="divImg" src="/static/userui/scan/bike.png" />
			</div>
			<div class="divData">
				<input v-for="(item,index) in inputData" :key="index"  :focus="index==focus" @input="(e)=>{changeInput(index,e)}"
				 adjust-position="false"
				type="number" cursor-color="#61D246" maxlength="1"/>
			</div>

			<div class="divBottom">
				<image style="width: 60px;height: 60px;" src="/static/userui/scan/light.png" />
				<div style="font-size: 12px;color: gray;">轻触点亮</div>
				<div :class="(btnDis?'divBtnDis ':'')+'divBtn'" @click="clickBtn">确认</div>
			</div>
		</div>

	</div>
</template>

<script setup>
	import {
		ref,onMounted,getCurrentInstance
	} from 'vue';
	const len = 6;
	const arrData = [];
	for (let i = 0; i < 6; i++) {
		arrData.push("")
	}
	const inputData = ref(arrData);
	const focus=ref(0);
	const btnDis=ref(true);
	
	const instance = getCurrentInstance();


	function changeInput(index,e){
		// inputData.value[index]=e.detail.value;
		console.log("555555555555555",instance)
		debugger;
		// if(index<len-1){
		// 	focus.value=index+1;
		// }
		// else{
		// 	btnDis.value=false;
		// }
	console.log("3333333333333333",e,index);
		
		// focus.value=index;
		// if(index==len-1){
		// 	btnDis.value=false;
		// }
	}
	
	function clickBtn() {
		console.log("555555555555555", inputData)
	}
</script>

<style scoped>
	.divInfo {}

	.divTitle {
		margin-top: 60px;
		font-size: 14px;
		color: #000;
		font-weight: bold;
	}

	.divImg {
		width: 220px;
		height: 100px;
		margin: 20px 0px;
	}

	.divData {
		display: flex;
		justify-content: space-evenly;
	}

	.divData input {
		width: 28px;
		height: 40px;
		border: 1px solid #80808038;
		border-radius: 5px;
		background: #f5f2f2b8;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
	}

	.divBottom {
		margin-top: 30px;
		text-align: center;
	}

	.divBtnDis {
		
		pointer-events: none;
		background: #b9b7b7 !important;
		opacity: 0.3;
		
	}

	.divBtn {
		background: #61D246 ;
		margin-top: 10px;
		line-height: 35px;
		border-radius: 5px;
		color: white;
	}
</style>