<template>
	<view class="bar_buy_bottom_cn">
		<view class="page padding-top-25 padding-bottom-20 padding-lr-30">
		  <!-- 车牌号码输入框 -->
		  <view class="carNumber">
		    <!-- 车牌号头两位 -->
		    <view class="flex align-center justify-between text-center">
		      <view class="carNumber-item" :class="active==0?'border-main':''" @click='openKeyboard' data-index="0">{{carnum[0] || ''}}</view>
		      <view class="carNumber-item" :class="active==1?'border-main':''" @click='openKeyboard' data-index="1">{{carnum[1] || ''}}</view>
		      <view class="circlebox flex align-center justify-center">
		        <view class="circle"></view>
		      </view>
		      <!-- 常规 -->
		      <view class="carNumber-item" :class="active==2?'border-main':''" @click='openKeyboard' data-index="2">{{carnum[2] || ''}}</view>
		      <view class="carNumber-item" :class="active==3?'border-main':''" @click='openKeyboard' data-index="3">{{carnum[3] || ''}}</view>
		      <view class="carNumber-item" :class="active==4?'border-main':''" @click='openKeyboard' data-index="4">{{carnum[4] || ''}}</view>
		      <view class="carNumber-item" :class="active==5?'border-main':''" @click='openKeyboard' data-index="5">{{carnum[5] || ''}}</view>
		      <view class="carNumber-item" :class="active==6?'border-main':''" @click='openKeyboard' data-index="6">{{carnum[6] || ''}}</view>
		      <!-- 新能源 -->
		      <view class="carNumber-item" :class="active==7?'border-main':''" v-if="showNewPower" @click='openKeyboard' data-index="7">{{carnum[7]||''}}</view>
		    </view>
		  </view>
		  <!-- 虚拟键盘 -->
		  <view class="keyboard" v-if='KeyboardState'>
		    <view class="keyboardClose">
		      <view class="keyboardClose_btn" @click='closeKeyboard'>关闭</view>
		      <view class="keyboardClose_btn" @click='bindDelChoose'>删除</view>
		    </view>
		    <!-- 省份简写键盘 -->
		    <view class="keyboard-item" v-if="active==0">
		      <view class="keyboard-line" v-for="(item,index) in provinces" :key="index">
		        <view class="keyboard-btn" v-for="(itemlist,index2) in item" :key="index2" @click='bindChoose(itemlist)'>{{itemlist}}</view>
		      </view>
		    </view>
		    <!-- 车牌号码选择键盘 -->
		    <view class="keyboard-item iscarnumber" v-if="active!=0">
		      <view class="keyboard-line" v-for="(item,index) in others" :key="index">
		        <view class="keyboard-btn" v-for="(itemlist,index2) in item" :key="index2" @click='bindChoose(itemlist)'>{{itemlist}}</view>
		      </view>
		    </view>
		  </view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			newEnergy:{
			  type:Boolean,
			  value:true,
			}
		},
		data(){
			return{
				//省份简写
				provinces: [
				  ['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
				  ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
				  ['桂', '琼', '渝', '川', '贵', '云', '藏'],
				  ['陕', '甘', '青', '宁', '新'],
				],
				others:[
				  ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
				  ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K"],
				  ["L", "M", "N", "P", "Q", "R", "S", "T", "U", "V"]
				],
				//车牌输入
				numbers: ["W", "X", "Y", "Z"],
				special:["港", "澳", "学",'领','警'],
				carnum: ['','','','','','','',''],
				KeyboardState: false,
				showNewPower:false,
				active:0
			}
		},
		created(){
			this.showNewPower = this.newEnergy
		},
		methods: {
			// 选中点击设置
			bindChoose(e) {
				//改变第active位的值
				let total = this.showNewPower?7:6;
				this.carnum[this.active] = e
				// 自动向后走一位，填写后一位数据
				this.active=Number(this.active)+1<total?Number(this.active)+1:total
				if(this.active==total && this.carnum[total]){
					this.KeyboardState=false
				}
				this.carnum=this.carnum
				// 向父页面传参
				let carnum = this.carnum
				let lisence = carnum[0] + carnum[1] + '·' + carnum[2] + carnum[3] + carnum[4] +carnum[5] + carnum[6]+carnum[7]
				this.$emit('getLisence',lisence)
				// 最后一位+特殊值
				if((this.newEnergy&&this.active==7)||(!this.newEnergy&&this.active==6)){
					this.others[3]=this.numbers.concat(this.special)
				}else{
					this.others[3]=this.numbers
				}
			},
			bindDelChoose() {
				if (this.carnum.length != 0) {
					this.carnum[this.active] = '';
					this.active=Number(this.active)-1>0?Number(this.active)-1:0
					this.carnum=this.carnum
				}
				let carnum = this.carnum
				let lisence = carnum[0] + carnum[1] + '·' + carnum[2] + carnum[3] + carnum[4] +carnum[5] + carnum[6]+carnum[7]
				this.$emit('getLisence',lisence)
				if((this.newEnergy&&this.active==7)||(!this.newEnergy&&this.active==6)){
					this.others[3]=this.numbers.concat(this.special)
				}else{
					this.others[3]=this.numbers
				}
			},
			showPowerBtn() {
				this.showNewPower=true,
				this.KeyboardState=true
			},
			closeKeyboard() {
				this.KeyboardState=false
				let carnum = this.carnum
				let lisence = carnum[0] + carnum[1] + '·' + carnum[2] + carnum[3] + carnum[4] +carnum[5] + carnum[6]+carnum[7]
				this.$emit('getLisence',lisence)
			},
			openKeyboard(e) {
				this.active=e.currentTarget.dataset.index,
				this.KeyboardState=true
				if((this.newEnergy&&this.active==7)||(!this.newEnergy&&this.active==6)){
					this.others[3]=this.numbers.concat(this.special)
				}else{
					this.others[3]=this.numbers
			  }
			},
		}
	}
</script>

<style scoped>
	.page{
	  background: #fff;
	}
	.weui-cells__title{
	  margin-top:.77em;
	  margin-bottom:.3em;
	  padding-left:15px;
	  padding-right:15px;
	  color:#999;
	  font-size:14px;
	}
	/* 虚拟键盘 */
	.keyboard{
	  height: auto;
	  background: #d1d5d9;
	  position: fixed;
	  bottom:0;
	  width: 100%;
	  left:0;
	  z-index: 1111;
	}
	.keyboard-item{
	  padding:10rpx 0 5rpx 0;
	  position: relative;
	  display: block;
	}
	/* 关闭虚拟键盘 */
	.keyboardClose{
	  height: 70rpx;
	  background-color: #f7f7f7;
	  overflow: hidden;
	}
	.keyboardClose_btn{
	  float: right;
	  line-height: 70rpx;
	  font-size: 15px;
	  padding-right: 30rpx;
	}
	/* 虚拟键盘-省缩写 */
	
	/* 虚拟键盘-行 */
	.keyboard-line{
	  margin:0 auto;
	  text-align: center;
	}
	.iscarnumber .keyboard-line{
	  text-align: left;
	  margin-left: 5rpx;
	}
	/* 虚拟键盘-单个按钮 */
	.keyboard-btn{
	  font-size: 17px;
	  color: #333333;
	  background: #fff;
	  display: inline-block;
	  padding:18rpx 0; 
	  width: 63rpx;
	  text-align: center;
	  box-shadow: 0 2rpx 0 0 #999999;
	  border-radius: 10rpx;
	  margin:5rpx 6rpx;
	}
	/* 虚拟键盘-删除按钮 */
	.keyboard-del{
	  font-size: 17px;
	  color: #333333;
	  background: #A7B0BC;
	  display: inline-block;
	  padding:4rpx 55rpx;
	  box-shadow: 0 2rpx 0 0 #999999;
	  border-radius: 10rpx;
	  margin:5rpx;
	  position: absolute;
	  bottom:5rpx;
	  right: 6rpx;
	}
	.keyboard-del-font{
	  font-size:25px;
	}
	
	/* 车牌号码 */
	.carNumber-items{
	  text-align: center;
	}
	.carNumber-items-box{
	  width: 158rpx;
	  height: 90rpx;
	  border: 2rpx solid #CCCCCC;
	  border-radius: 4rpx;
	  display: inline-block;
	  vertical-align: middle;
	  position: relative;
	  margin-right: 30rpx;
	}
	.carNumber-items-box-list{
	  width: 76rpx;
	  height: 70rpx;
	  line-height: 70rpx;
	  text-align: center;
	  display: inline-block;
	  font-size: 18px;
	  margin:10rpx 0;
	  vertical-align: middle;
	}
	.carNumber-items-province{
	  border-right: 1rpx solid #ccc;
	}
	/* .carNumber-items-box::after{
	  content: "";
	  width: 6rpx;
	  height: 6rpx;
	  position: absolute;
	  right: -22rpx;
	  top: 40rpx;
	  border-radius: 50%;
	  background-color: #ccc;
	} */
	.carNumber-item{
	  /* width: 76rpx;
	  height: 90rpx;
	  font-size: 18px;
	  text-align: center;
	  border: 2rpx solid #CCCCCC;
	  border-radius: 4rpx;
	  line-height: 90rpx;
	  display: inline-block;
	  margin:0 4rpx;
	  vertical-align: middle; */
	  width: 70rpx;
	  height: 70rpx;
	  line-height: 70rpx;
	  background: #f7f7f7;
	  border-radius: 16rpx;
	}
	/* 新能源 */
	.carNumber-item-newpower{
	  border: 2rpx dashed #A8BFF3;
	  background-color: #F6F9FF;
	  color: #A8BFF3;
	  font-size: 12px;
	  line-height: 45rpx;
	}
	.carNumber-newpower-add{
	  font-size: 18px;
	}
	
	/* 确认按钮 */
	.carNumberBtn{
	  border-radius: 4rpx;
	  margin:80rpx 40rpx;
	  background-color: #333333;
	}
	.circle{
	  width: 10px;
	  height: 10px;
	  background: #666666;
	  border-radius: 50%;
	}
	.circlebox{
	  width: 70rpx;
	  height: 70rpx;
	}
	.border-main{
	  border-color: #FFDD1A;
	}

</style>
