<template>
	<div>
		<common-car ref="common" @asynCallBack="asynCallBack"></common-car>
		<top-header :leftShow='false' :pageTitle="pageTitle"></top-header>


		<div class="mui-content" v-if="!qrCode">
			<div class="vongi-car-over">
				<img src="~$project/assets/img/car_fail.png" />
				
				<h2>链接已失效</h2>
				<!-- <div class="colorfe616c">请在30分钟内离开停车场，<br>超出时间段将可能产生新的费用</div>
				<div class="vongi-car-over-line"></div>
				<p>停车时长：1小时20分钟</p>
				<p>入场时间：07-12 13:51</p>
				<p>离场时间：07-12 16:30</p> -->
			</div>
			<!--缴费失败-->
			<!-- <div class="vongi-car-over">
				<img src="~$project/assets/img/car_fail.png" />
				<h2>缴费失败!</h2>
				<div>请重新扫码再试一次，如无法登记车牌，<br>请联系车场管理员。</div>
			</div>	 -->
		</div>
		
		<div class="mui-content vongi-car-index"  v-if="qrCode">
			<div class="vongi-car-banner">
<!-- 				<h5 class="mui-ellipsis">停车位置：{{detail.parkingName}}</h5>
 -->				<div class="flew">
					<input type="text" v-model="searchForm.carNumber"
						readonly="readonly" ref="input"
						@click="show"
					 placeholder="请输入车牌号查询">
					<button @click="submit" class="mui-btn mui-btn-blue">录入</button>
				</div>
			</div>
			
		</div>
		
			<div class="vongi-qingjiadt" v-if="kongResult">
				<form class="mui-input-group vongi-cd-payli">
					
				 <div class="mui-input-row">
				 	<label>车牌号</label>
				 	<span v-text="channelForm.carNumber"></span>
				 </div>
					<div class="mui-input-row">
						<label>生效时间</label>
						<span v-text="detail.inTime"></span>
					</div>
					<div class="mui-input-row">
						<label>截止时间</label>
						<span v-text="detail.memberTime"></span>
					</div>
					
				</form>
				<div class=" " style=" text-align: center;padding: 30px;color: #3f51b5;">
					<div class="">
						<h1>录入成功!</h1>
 					</div>
				</div>
			</div>
			<div 
			 v-if="qrCode"  class="vongi-car-footer" style="position: fixed;width: 100%;bottom: 10px;color: red;" >
			 
				<div class="mui-media-body" style="padding: 20px;margin-bottom: 15px;">
					<b>注:</b>
					<br>
					1.请于确认录入后5分钟再离场。
					<br>
					2.会员续租车辆请于到期后再到前台扫码续租
					<br>
					3.点击输入框可显示\收起键盘
				</div>
				<vue-touch-keyboard  :options="options" :defaultKeySet="defaultKeySet"
				 v-show="visible" :layout="layout" 
				   :accept="accept" :input="input"  ref="key"  />
			</div>
			
	
		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import  VueTouchKeyboard from '@/vue-touch-keyboard'
	import style from "@/vue-touch-keyboard/dist/vue-touch-keyboard.css"; // load default style
	import Vue from 'vue'
	Vue.use(VueTouchKeyboard);
	
	
	import * as API_Car from '@/apis/car'
	import CommonCar from '@/components/CommonCar.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import * as types from '$project/store/mutation-types'
	export default {
		name: 'CarSearch',
		components: {
			CommonCar,
			Loading,
			TopHeader,
		},
		data() {
			return {
				defaultKeySet:"shifted",
				visible: true,
				layout: "compact",
				input: null,
				options: {
				  useKbEvents: false,
				  preventClickEvent: false
				},
				isLoading: false,
				qrCode:'#',
				pageTitle: '车牌查询',

				searchForm: {
					carNumber: '',
					companyId: '',
				},
				
				channelForm: {
					channelId: '',
					companyId: '',
				},

				kongResult: false,

				detail: {}
			}
		},
		created() {
			if (this.$route.query.companyId) {
				//入口页必须带merchantId
				this.set_parking_company_id(this.$route.query.companyId);
			} else {
				if (!this.parking_company_id) {
					mui.alert('参数错误');
				}
			}
			if(this.$route.query.qrCode){
				this.qrCode=this.$route.query.qrCode;
				
			}


		},
		methods: {
			
			accept(text) {
			    this.visible = false
			},
		
			show(e) {
				
			  this.input = e.target;
			  
			  if (!this.visible){
				  if(this.searchForm.carNumber.length==0){
					  this.$refs.key.changeKeySet(this.defaultKeySet)
				  }
				  this.visible = true
			  }else{
				    this.visible = false
			  }
			  
			},
			
			
			//获取停车场信息
			 submit(){
				 
				 if (this.checkForm()) {
					 this.isLoading = true;
					 					this.channelForm={
					 						carNumber:this.searchForm.carNumber,
					 						companyId:this.parking_company_id
					 					}
					 API_Car.userGetCarMember(this.channelForm.carNumber,this.channelForm.companyId,this.qrCode).then(response => {
					 					
					 	this.isLoading = false;
					 	this.kongResult = false;
					 					//this.searchForm.carNumber=""
					 				
					 					this.searchByCarNumber()
					 }).catch(error => {
					 	this.isLoading = false;
					 	mui.toast(error);
						//this.searchByCarNumber()
					 	
					 })
				 }
				 	
			 },
			//检测
			checkForm() {
				if (!this.searchForm.carNumber) {
					mui.toast('请输入车牌号码');
					return false;
				} else {
					return true;
				}
			},
			//查询车牌信息
			searchByCarNumber() {
				
					this.isLoading = true;
					
					API_Car.userGetCarDetail(this.searchForm.carNumber,this.parking_company_id,this.qrCode).then(response => {
						this.detail=response;
					
						this.isLoading = false;
						this.kongResult = true;
						this.visible=false;

					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
						
					})
				
			},
			validQrCode(){
				this.isLoading = true;
				
				API_Car.validQrCode(this.parking_company_id,this.qrCode).then(response => {
					this.isLoading = false;
					  this.input = this.$refs.input;
				}).catch(error => {
					this.isLoading = false;
					this.qrCode="";
					mui.toast(error);
					
				})
			},
			asynCallBack() {},
			...mapMutations({
				set_parking_company_id: types.SET_PARKING_COMPANY_ID,
			})
		},
		mounted() {
			this.validQrCode()
		
		},
		destroyed() {

		},
		computed: {
			...mapGetters({
				wx_openId: 'wx_openid',
				ali_openId: 'ali_openid',
				parking_company_id: 'parking_company_id'
			})
		}
	}
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>
