<template>
	<view class="binding_body">
		<view class="binding_container">
			<view class="binding_title">车牌号码 </view>
			<view @click="$refs.plateNumber.open()" class="binding_num flex around">
				<view v-for=" (item,index) in 8 " class="binding_num_item flex ac jc">
					{{plateNum[index]?plateNum[index]:''}}
				</view>
			</view>
			<view class="binding_footer">充电时请选择正确的车牌号码</view>
		</view>
		<view @click="binding" :style="{background:this.plateNum.length&&!duplicate?'':'#bbbbbb'}" class="binding_container_footer flex ac jc">
			确定绑定
		</view>
		<view style="position: absolute;right: 0;left: 0;">
			<keyboardPlates ref="plateNumber" :plateNum.sync='plateNum' @change="getPlateNum" isShow></keyboardPlates>
		</view>
	</view>
</template>

<script>
	import station from '@/api/station.js'
	import keyboardPlates from '../../../components/plate/index.vue'
	export default {
		components: {
			keyboardPlates
		},
		data() {
			return { 
				plateNum: '',
				duplicate:false
			}
		},
		methods: {
			binding() {  
				
				if(!this.plateNum&&this.duplicate){
					return 
				}
				this.duplicate = true
				station.vehicleSave({
					plateNumber:this.plateNum,
					createSource: 'ELEC_COM_DRIVER_MINI'
				}).then(res=>{
					setTimeout(()=>{
						uni.showToast({
							title:'添加成功',
							icon:'none',
							success() {
								uni.navigateBack()
							}
						})
					},1000)
				}).finally(()=>{
					this.duplicate = false
				})
			},
			getPlateNum() {

			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'index.scss';
</style>