<template>
	<div>
		<top-header :leftShow="false" :pageTitle="pageTitle"></top-header>

		<div class="mui-content vongi-car-index">
			<div class="vongi-car-banner">
				<h1 style="text-align: center;" class="mui-ellipsis">{{merchantName}}</h1>
				
			</div>
			 
			<form class="mui-input-group vongi-login-form">
				<!-- <div class="mui-input-row">
					<input name="name" v-model="subForm.name" type="text" class="mui-input-clear" placeholder="请填写您的姓名">
				</div> -->
				<div class="mui-input-row">
					<input type="text"  v-model="name"  class="mui-input-clear" placeholder="请输入姓名">
				</div>
				<div class="mui-input-row">
					<input   type="number" v-model="phone"  class="mui-input-clear" placeholder="请输入手机号码">
					 
				</div>
			</form>
		</div>
		<div class="vongi-btn vongi-login-btn">
				<button class="mui-btn mui-btn-primary" @click="submit()">
					确认绑定
				</button>
			</div>
		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import * as API_WeiXin from '$project/apis/weixin'
	
	import * as API_Merchant from '@/apis/merchant'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		getUrlParam,
		getWeixinRedirectURI,
		isWeiXin
	} from '$project/utils'

	export default {
		name: 'MerchantBind',
		components: {
		
			Loading,
			TopHeader,
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '商户绑定',
				merchantId: '',
				merchantName: '', //
				name:'',
				phone: '',
				obj:{},

			}
		},
		created() {
			if (this.$route.query.id) {
				this.merchantId = this.$route.query.id;
			}
			if (this.$route.query.name) {
				this.merchantName = this.$route.query.name;
			}
		},
		methods: {
			//获取openid
			getOpenid() {
				//const engine = window.localStorage
				
				this.isLoading=true
				var obj=window.localStorage.getItem("xpgj_bind");
				
				const code = getUrlParam('code');
				if (!code&&!obj) {
					window.location.href = getWeixinRedirectURI(process.env.VUE_APP_WXAPPID, document.URL);
				} else {
					
					if(!obj){
						API_WeiXin.getDataByCode(code).then(response => {
							//console.log(response)
							this.openId=response.openid;
							this.isLoading=false;
							this.obj=obj
							
							window.localStorage.setItem("xpgj_wx_openid",JSON.stringify(response.openid));
							
							window.localStorage.setItem("xpgj_bind",JSON.stringify(response));
						}).catch(error => {
							mui.toast(error);
						});
					}else{
						this.isLoading=false
						this.obj=JSON.parse(obj);
					}
					
					

				}
			},
			asynCallBack() {

			},
			//检测
			checkForm() {
			if (!this.name) {
				mui.toast('请输入姓名');
				return false;
			} else if (!this.phone) {
					mui.toast('请输入手机号码');
					return false;
				} else {
					return true;
				}
			},
			//查询
			submit() {
				if (this.checkForm()) {
					this.obj.name=this.name;
					this.obj.phone=this.phone;
					var  obj={
						id:this.merchantId,
						...this.obj
					}
					this.isLoading = true;
				
					
					API_Merchant.bindParkMerchant(obj).then(response => {

						//this.isLoading = false;
						//MerchantCheckSearch
						//mui.toast("绑定成功");
						mui.alert('绑定成功','提示',()=>{
							this.$router.push({
								name: 'MerchantCheckSearch',
								query: {
									merchantId: this.merchantId
								}
							})
						});
						
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
						
					})
				}
			},

		},
		mounted() {
			this.getOpenid();
			
		


		},
		destroyed() {

		},

	}
</script>

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