<template>
	<view class="uni-flex uni-flex-center vcode-input-body">
		<text class="vcode-input-item" 
		:class="isBorderLine?'vcode-input-line':'vcode-input-border'"
		v-for="(v,index) in sum" 
		:key="index"
		@tap="setFocus"
		:style="getStyle(index)">
			{{ text[index]?text[index]:'' }}
		</text>
		<input
		ref="VcodeInput"
		type="number" 
		class="hidden-input" 
		:focus="focus"
		:maxlength="sum"
		@input="inputVal"
		@blur="setBlur"
		:password="isPassword"
		placeholder="验证码"/>
	</view>
</template>

<script>
	export default {
		name:'VcodeInput',
		props: {
			sum:{
				type: Number,
				default: 6
			},
			isBorderLine:{
				type:Boolean,
				default:false
			},
			borderColor:{
				type:String,
				default:'#DADADA'
			},
			borderValueColor:{
				type:String,
				default:'#424456'
			},
			borderActiveColor:{
				type:String,
				default:'#FF6B00'
			},
			isAutoComplete:{
				type: Boolean,
				default: true
			},
			isPassword:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				focus:false,
				text:[]
			};
		},
		created() {
			setTimeout(()=>{
				this.focus=true;
			},300)
		},
		methods:{
			getStyle(index){
				let style={};
					style.borderColor=this.borderColor;
				if(this.text.length>index){
					style.borderColor=this.borderValueColor;
					style.color=this.borderValueColor;
				}
				if(this.text.length===index){
					style.borderColor=this.borderActiveColor;
				}
				return style;
			},
			setBlur(){
				this.focus=false;
			},
			setFocus(){
				this.focus=true;
			},
			inputVal(e) {
				let value=e.detail.value;
				if(this.isAutoComplete){
					if(value.length>=this.sum){
						this.focus=false;
						this.$emit('vcodeInput', value);
					}
				}else{
					this.$emit('vcodeInput', value);
				}
				if(this.isPassword){
					let val='';
					for (let i = 0; i < value.length; i++) {
						val+='●';
					}
					this.text=val;
				}else{
					this.text=value;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.vcode-input-body{
	margin-left: -36rpx;
	margin-right: -36rpx;
	position: relative;
	overflow: hidden;
	.vcode-input-item{
		width: 76rpx;
		height: 76rpx;
		margin-left: 12rpx;
		margin-right: 12rpx;
		line-height: 76rpx;
		text-align: center;
		font-weight: 500;
	}
	.vcode-input-border{
		border-style: solid;
		border-width: 2rpx;
		border-color: $uni-border-color;
		border-radius: 4rpx;
	}
	.vcode-input-line{
		border-bottom-style: solid;
		border-bottom-width: 2rpx;
		border-color: $uni-border-color;
	}
	.hidden-input{
		width: 1px;
		height: 1px;
		position: absolute;
		left: -1px;
		top: -1px;
	}
}
</style>
