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

		<div class="mui-content vongi-car-index">
			<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"
					 
					 placeholder="请输入车牌号查询">
					<button @click="searchByCarNumber" class="mui-btn mui-btn-blue">查询</button>
				</div>
			</div>
			<div v-if="kongResult" class="vongi-car-not">
				<img src="~$project/assets/img/car_not.png">
				<div class="mui-text-center">没有找到停车信息!</div>
			</div>
		</div>
		<div class="vongi-car-footer" style="position: fixed;width: 100%;bottom: 10px;" >
			<div class="mui-media-body" style="margin-bottom: 15px;">
				<b>停车场收费说明:</b><br>
				缴费后请于规定时间离场，离场会自动抬杆。如果找不到停车信息，或者临牌停车，请至集中缴费处缴纳现金。
			</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,

				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('参数错误');
				}
			}

			

		},
		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
			  }
			  
			},
			//获取停车场信息
			getInfo() {
				 this.input = this.$refs.input;
				//this.isLoading = true;
				API_Car.findByCompanyId(this.parking_company_id).then(response => {

					//this.isLoading = false;
					
					this.detail = response;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//检测
			checkForm() {
				if (!this.searchForm.carNumber) {
					mui.toast('请输入车牌号码');
					return false;
				} else {
					return true;
				}
			},
			//查询车牌信息
			searchByCarNumber() {
				if (this.checkForm()) {
					this.isLoading = true;
					this.searchForm.companyId = this.parking_company_id;
					API_Car.carPayDetail(this.searchForm).then(response => {

						this.isLoading = false;

						this.$router.push({
							name: 'CarPay',
							params: {
								detail: response
							}
						})

					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
						this.kongResult = true;
					})
				}
			},
			
			asynCallBack() {},
			...mapMutations({
				set_parking_company_id: types.SET_PARKING_COMPANY_ID,
			})
		},
		mounted() {
			
			if (this.$route.query.channelId) {
			
				this.$router.push({
					name: 'CarPay',
					query: {
						channelId: this.$route.query.channelId
					}
				})
				
			}else if (this.parking_company_id) {
				this.getInfo();
			}
		},
		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>
