<template>
	<view>
		<view class="car-input-container">
			<view class="car-input-box" 
				v-for="(item,index) in inputList" :key="index" @click="plateInput(index)">
				<view class="car-input-item" 
					:class="[curInput == index?'sel-item':'',(maxNum-1) == index?'last-item':'']" >
					<view :class="curInput == index?'sel-item-line':''"></view>
					<img :src="xnyImgBase64" class="new-item-img" v-if="(maxNum-1) == index"/>
					{{item}}
				</view>
			</view>
		</view>
		
		<view class="car-number-container" v-if="showKeyPop1">
			<view class="plate-close" @click="closeKeyboard"><text class="plate-close-btn">关闭</text></view>
			<view class="plate-popup-list">
			    <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince1" :key="index" @click="tapKeyboard(item)">{{item}}</view>
			</view>
			<view class="plate-popup-list">
			    <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince2" :key="index" @click="tapKeyboard(item)">{{item}}</view>
			</view>
			<view class="plate-popup-list">
			    <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince3" :key="index" @click="tapKeyboard(item)">{{item}}</view>
			</view>
			<view class="plate-popup-list">
			    <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince4" :key="index" @click="tapKeyboard(item)">{{item}}</view>
				<!-- 删除 -->
				<view class="plate-popup-item province-item del" @click="onPlateDelTap">
				    <image :src="deleteImgBase64" />
				</view>
			</view>
		</view>
		
		<view class="car-number-container" v-if="showKeyPop2">
			<view class="plate-close" @click="closeKeyboard"><text class="plate-close-btn">关闭</text></view>
			<view class="plate-popup-list">
			    <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''" 
					v-for="(item,index) in keyEnInput1" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
			</view>
			<view class="plate-popup-list">
			    <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''" 
					v-for="(item,index) in keyEnInput2" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
			</view>
			<view class="plate-popup-list">
			    <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"  
					v-for="(item,index) in keyEnInput3" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
			</view>
			<view class="plate-popup-list">
			    <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''" 
					v-for="(item,index) in keyEnInput4" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
				<!-- 删除 -->
				<view class="plate-popup-item del" @click="onPlateDelTap">
				    <image :src="deleteImgBase64" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'car-number-input',
		emits: ['numberInputResult'],
		props: {
			defaultStr:{
				type: String,
				default: ''
			},
			plateNum: {
				type: String,
				default: ''
			},
			// maxNum: {
			// 	type: Number,
			// 	default: 8
			// },
		},
		data() {
			return {
				inputList:[" "," "," "," "," "," "," "," "],
				curInput:-1,
				maxNum:8,
				showKeyPop1:false,
				showKeyPop2:false,
				keyProvince1: ['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'],
				keyProvince2: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
				keyProvince3: ['粤', '桂', '琼', '渝', '川', '贵', '云', '藏'],
				keyProvince4: ['陕', '甘', '青', '宁', '新', 'W' ],
				keyEnInput1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
				keyEnInput2: ["Q", "W", "E", "R", "T", "Y", "U", "P", "学", "军"],
				keyEnInput3: ["A", "S", "D", "F", "G", "H", "J", "K", "L", "警"],
				keyEnInput4: ["Z", "X", "C", "V", "B", "N", "M", "港", "澳"],
				lockInput: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
				xnyImgBase64:"data:image/png;base64,[encoded data, 8932 characters]",
				deleteImgBase64:"data:image/png;base64,[encoded data, 4336 characters]"
			}
		},
		watch: {
			defaultStr(val) {
				if(val != "" && val != null){
					const valList = val.split("")
					for (let i in valList) {
						this.inputList[i] = valList[i]
					}
				}
			},
			curInput(val){
				this.showOrHidePop(val)
				
				this.keyEnInput2 = ["Q", "W", "E", "R", "T", "Y", "U", "O", "P", "军"]
				switch(val){
				    case 1:
				        this.lockInput = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "学", "军", "警", "港", "澳"]
						break
				    case 2:
				        this.lockInput = ["O", "学", "军", "警", "港", "澳"]
						break
					case 3:
					    this.lockInput = ["O", "学", "军", "警", "港", "澳"]
						break
					case 4:
					    this.lockInput = ["O", "学", "军", "警", "港", "澳"]
						break
					case 5:
					    this.lockInput = ["O", "学", "军", "警", "港", "澳"]
						break
					case 6:
					    this.lockInput = ["O"]
						this.keyEnInput2 = ["Q", "W", "E", "R", "T", "Y", "U", "P", "学", "军"]
						break
					case 7:
					    this.lockInput = ["O", "学", "军", "警", "港", "澳"]
						break
				    default:
				        this.lockInput = []
						break
				}
			}
		},
		created() {
			if(this.defaultStr != "" && this.defaultStr != null){
				const valList = this.defaultStr.split("")
				for (let i in valList) {
					this.inputList[i] = valList[i]
				}
			}
		},
		methods: {
			plateInput(e){
				this.curInput = e
				this.showOrHidePop(e)
			},
			showOrHidePop(val){
				if(val == -1){
					this.showKeyPop1 = false
					this.showKeyPop2 = false
				}else if(val == 0){
					this.showKeyPop1 = true
					this.showKeyPop2 = false
				}else{
					this.showKeyPop1 = false
					this.showKeyPop2 = true
				}
				
			},
			tapKeyboard(e){
				if(this.lockInput.includes(e)){
					return
				}
				
				this.inputList[this.curInput] = e
				if(this.curInput < this.maxNum-2){
					this.curInput++
				}else{
					this.curInput = -1
				}
				
				this.emitResult()
			},
			closeKeyboard(){
				this.curInput = -1
			},
			onPlateDelTap(){
				if(this.inputList[this.curInput] == " "){
					this.curInput--
				}
				this.inputList[this.curInput] = " "
				
				this.emitResult()
			},
			emitResult(){
				const returnResult = this.inputList.join("")
				this.$emit('numberInputResult', returnResult);
			}
		}
	};
</script>

<style scoped lang="scss">
	.car-input-container{
		position: relative;
		padding: 0 5px;
		height: 44px;
		.car-input-box{
			display: inline-block;
			width: 12.5%;
			height: 44px;
			vertical-align: middle;
			.car-input-item{
				position: relative;
				border: 1px solid #E2E2E2;
				height: 40px;
				line-height: 40px;
				width: 80%;
				margin-left: 10%;
				text-align: center;
				font-size: 17px;
				.sel-item-line{
					position: absolute;
					bottom: 3px;
					left: 15%;
					height: 2px;
					background-color: #2979ff;
					width: 70%;
				}
				.new-item-img{
					position: absolute;
					top: -6px;
					left: 50%;
					margin-left: -15px;
					height: 13px;
					width: 30px;
					z-index: 9;
				}
			}
			.sel-item{
				color: #2979ff;
			}
			.last-item{
				border: 1px solid #18bc37;
			}
		}
	}
	.car-number-container{
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 254px;
		background-color: #E3E2E7;
		-webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
		overflow: hidden;
		text-align: center;
		.plate-close{
			height: 40px;
			line-height: 40px;
			text-align: right;
			background-color: #FFF;
			.plate-close-btn{
				font-size: 13.5px;
				color: #555;
				margin-right: 15px;
			}
		}
		//键盘主体内容-单行
		.plate-popup-list {
		    margin: 0 auto;
		    overflow: hidden;
		    display: inline-block;
		    display: table;
		
		    &:last-child {
		        margin-bottom: 2px;
		    }
		}
		//键盘主体内容-单个
		.plate-popup-item {
		    float: left;
		    font-size: 16px;
		    width: 8vw;
		    margin: 0 1vw;
		    margin-top: 8px;
		    height: 40px;
		    line-height: 40px;
		    background: #FFFFFF;
		    border-radius: 5px;
		    color: #4A4A4A;
			image {
				width: 16px;
				height: 16px;
				margin: 12px auto;
			}
		}
		.plate-popup-item:active{
			background-color: #EAEAEA;
		}
		.province-item{
			width: 8.8vw;
		}
		.lock-item{
			color: #AAA;
		}
	}
</style>