<template>
	<view>
		<u-navbar
		 title-color="#fff" 
		 :custom-back="customBack" 
		 :border-bottom="false" 
		 back-icon-color="#CCE8FF" 
		 :background="{background: '#008CFF' }" title="新增免密支付车牌"></u-navbar>
		<view class="new-plate-number">
			<view class="message-input-wrap" @click="messageInputClick">
				<u-message-input :maxlength="8" width="70" font-size="50" :disabled-keyboard="true" v-model="newPlateNumber"></u-message-input>
			</view>				
			<u-keyboard ref="uKeyboard" mode="car" @change="keyboardChange" @confirm="keyboardConfirm" @backspace="backspace" v-model="keyboardshow"></u-keyboard>
		</view>
		
		<u-toast ref="uToast" />
		<u-modal v-model="delCarshow" :show-cancel-button="true" @confirm="confirmDelCar" :content="delCarContent"></u-modal>
		<u-action-sheet :list="colorList" @click="confirmColor" v-model="colorShow"></u-action-sheet>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				keyboardshow:false,
				delCarshow:false,
				colorShow:false,
				delCarContent:'',
				colorList:[
					{text:'蓝色',colorCode:0}
					,{text:'黄色',colorCode:1}
					,{text:'黑色',colorCode:2}
					,{text:'白色',colorCode:3}
					,{text:'绿色',colorCode:4}
					,{text:'其他',colorCode:99}
				],
			}
		},
		methods:{
			customBack(){
				this.$u.route({
					type:'switchTab',
					url: 'pages/index/index'
				});
			},
			messageInputClick(){
				this.keyboardshow = true;
			},
			// 按键被点击(点击退格键不会触发此事件)
			keyboardChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.newPlateNumber += val;
				console.log(this.newPlateNumber);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if(this.newPlateNumber.length) this.newPlateNumber = this.newPlateNumber.substr(0, this.newPlateNumber.length - 1);
				console.log(this.newPlateNumber);
			},
			keyboardConfirm(){
				this.colorShow = true;
			},
			confirmColor(e){
				this.vehicleColor = this.colorList[e].colorCode;
			},
		}
	}
</script>

<style>
</style>