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

		<div class="mui-content vongi-car-pay">
			<div class="vongi-car-pay-top">
				<h4>停车费</h4>
				<div class="mui-h1"  v-if="!kongResult" v-text="'￥'+detail.total"></div>
				<div class="mui-h1"  v-if="kongResult"></div>
				
			</div>
			<div class="vongi-qingjiadt">
				<form class="mui-input-group vongi-cd-payli">
					<div class="mui-input-row">
						<label>车牌号</label>
						<span class="flew">
							{{detail.carNumber}}
							<a @click="goToBack" class="color4fc5f7 marginl5">修改</a>
						</span>
					</div>
					<div class="mui-input-row">
						<label>停车位置</label>
						<span v-text="detail.parkingName"></span>
					</div>
					<div class="mui-input-row">
						<label>入场时间</label>
						<span v-text="detail.inParkingTime"></span>
					</div>
				</form>
				<div v-if="detail.discountMoney" class="mui-content-padded flew-sp">
					使用优惠券
					<a class="color4fc5f7">[停车]{{detail.discountMoney}}元停车抵用券</a>
				</div>
			</div>
		</div>
		<div class="vongi-cashier-btn-row">
			<div class="vongi-cashier-btn-white">
				<span>应缴金额：￥{{detail.price}}</span>
				<div @click="pay" v-if="!kongResult" class="vongi-cashier-btn">支付离场</div>
				<div @click="searchByChannel" v-if="kongResult" class="vongi-cashier-btn">刷新</div>
				
			</div>
		</div>

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

<script>
	import CommonCar from '@/components/CommonCar.vue'
	import * as API_Car from '@/apis/car'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		wxPayJs
	} from '$project/utils/wxpay'
	import {
		aliPayJs
	} from '$project/utils/alipay'
	export default {
		name: 'CarPay',
		components: {
			CommonCar,
			Loading,
			TopHeader,
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '停车缴费',
				kongResult: false,
				detail: {
					total:""
				}
			}
		},
		created() {
			
			
			if(this.$route.query.channelId){
				
			}else  if (this.$route.params.detail) {
				this.detail = this.$route.params.detail;
			} else {
				this.$router.push({
					name: 'CarSearch'
				})
			}
		},
		methods: {
			goToBack() {
				this.$router.go(-1);
			},
			//支付
			pay() {
				if (IS_WEIXIN) {
					this.payWx();
				} else if (IS_ALI) {
					this.payAli();
				} else {
					this.payAli();
					mui.alert('请用微信或支付宝打开')
				}
			},
			//微信支付
			payWx() {
				API_Car.parkingWxPay({
					id: this.detail.id,
					openId: this.wx_openId
				}).then(data => {
					data.url = window.location.href.split("#")[0] + "/#/car/payResult";

					this.isLoading = false;
					wxPayJs(data)
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//支付宝支付
			payAli() {
				API_Car.parkingTradeWebPay({
					id: this.detail.id,
					openId: this.ali_openId
				}).then(response => {
					this.isLoading = false;
					let opthions = {
						tradeNo: response.tradeOrder.tradeNo,
						succUrl: window.location.href.split("#")[0] + "/#/car/payResult",
						cancelUrl: window.location.href.split("#")[0] + "/#/car/search?companyId=" + this
							.parking_company_id,
					}
					console.log(opthions);
					aliPayJs(opthions);
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//查询闸口信息
			searchByChannel() {
				this.isLoading = true;
				var  channelForm={}
				channelForm.channelId = this.$route.query.channelId;
				channelForm.companyId = this.parking_company_id;
				API_Car.channelPayDetail(channelForm).then(response => {
			
					this.isLoading = false;
					this.detail =response;
					this.kongResult = false;
			
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
					this.kongResult = true;
				})
			},
			asynCallBack() {

			}
		},
		mounted() {
			if(this.$route.query.channelId){
				this.searchByChannel()
			}
		},
		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 scoped>
</style>
