<template>
	<div>
		<common-merchant ref="common" @asynCallBack="asynCallBack"></common-merchant>
		<top-header :pageTitle="pageTitle" :rightLink="rightLink" :doRightLink="doRightLink"></top-header>

		<div class="mui-content vongi-car-index">
			<div class="vongi-car-banner">
				<h5 class="mui-ellipsis">协议商户：{{merchant_name}}</h5>
				<div class="flew">
					<input type="text" v-model="searchForm.carNumber" placeholder="请输入车牌号查询">
					<button class="mui-btn mui-btn-blue" @click="submit">查询</button>
				</div>
			</div>
			<div v-show="kongResult" class="vongi-car-not">
				<img src="~$project/assets/img/car_not.png">
				<div class="mui-text-center">没有找到停车信息!</div>
			</div>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import * as API_Merchant from '@/apis/merchant'
	import CommonMerchant from '@/components/CommonMerchant.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: 'MerchantCheckSearch',
		components: {
			CommonMerchant,
			Loading,
			TopHeader,
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '车牌查询',

				rightLink: {
					show: true,
					icon: 'mui-icon iconfont icon-riqi',
					style: 'font-size:15px;',
					title: '历史记录'
				},

				searchForm: {
					carNumber: '鄂D'
				},

				kongResult: false,
			}
		},
		created() {
			if (this.$route.query.merchantId) {
				//入口页必须带merchantId
				this.set_parking_merchat_id(this.$route.query.merchantId);
			} else {
				if (!this.parking_merchant_id) {
					mui.alert('参数错误');
				}
			}
		},
		methods: {
			asynCallBack() {

			},
			//检测
			checkForm() {
				if (!this.searchForm.carNumber) {
					mui.toast('请输入车牌号码');
					return false;
				} else {
					return true;
				}
			},
			//查询
			submit() {
				if (this.checkForm()) {
					this.isLoading = true;
					API_Merchant.queryParkDetail(this.searchForm).then(response => {

						this.isLoading = false;

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

					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
						this.kongResult = true;
					})
				}
			},
			//历史记录
			doRightLink() {
				this.$router.push({
					name: 'MerchantHistoryList'
				})
			},
			...mapMutations({
				set_parking_merchat_id: types.SET_PARKING_MERCHANT_ID,
			})
		},
		mounted() {},
		destroyed() {

		},
		computed: {
			merchant_name: function() {
				if (this.parking_merchant_data) {
					return this.parking_merchant_data.name;
				} else {
					return '';
				}
			},
			...mapGetters({
				openId: 'wx_openid',
				parking_merchant_id: 'parking_merchant_id',
				parking_merchant_data: 'parking_merchant_data'
			})
		}
	}
</script>

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