<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view>账户绑定</view>
			</view>
		</view>
		<view style="margin-top: 30rpx;">
			<view class="inputRow">
				<image src="../../static/baseIcon/username.png" mode="aspectFill" class="drawableLeft"></image>
				<input type="number" maxlength="11" @input="bankText" placeholder="请输入银行名称" class="input" />
				<!-- <SendCodeItem :phoneNum="page.mobile" url="/v1/wxuser/sendVerificationCode" @click="send"
					ref="wxCodeItem"></SendCodeItem> -->
			</view>
			<view class="inputRow">
				<image src="../../static/baseIcon/username.png" mode="aspectFill" class="drawableLeft"></image>
				<input type="number" maxlength="11" @input="nameText" placeholder="请输入姓名" class="input" />
				<!-- <SendCodeItem :phoneNum="page.mobile" url="/v1/wxuser/sendVerificationCode" @click="send"
					ref="wxCodeItem"></SendCodeItem> -->
			</view>
			<view class="inputRow">
				<image src="../../static/baseIcon/username.png" mode="aspectFill" class="drawableLeft"></image>
				<input type="number" maxlength="11" @input="phoneText" placeholder="请输入手机号" class="input" />
				<!-- <SendCodeItem :phoneNum="page.mobile" url="/v1/wxuser/sendVerificationCode" @click="send"
					ref="wxCodeItem"></SendCodeItem> -->
			</view>
			<view class="inputRow">
				<image src="../../static/baseIcon/username.png" mode="aspectFill" class="drawableLeft"></image>
				<input type="number" maxlength="11" @input="codeText" placeholder="请输入验证码" class="input" />
				<SendCodeItem :phoneNum="page.mobile" url="/v1/wxuser/sendVerificationCode" @click="send"
					ref="wxCodeItem"></SendCodeItem>
			</view>
		</view>

		<view class="btn" @click="next">
			<text class="btnText">绑定手机</text>
		</view>

		<view v-show="isShow">
			<view style="display: flex;flex-direction: column;justify-content: center;width: 100%;margin-top: 50px;">
				<text style="width: 100%;text-align: center;font-size: 35px;color: #f00;">绑定成功</text>
				<text style="margin: 20px; text-align: center;font-size: 30px;color: #f00;">请联系监管负责人</text>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82 + 11,
				page: {
					bankName:"",
					name:"",
					mobile: '',
					openid: '',
					unionid: '',
					code:""
				}
			};
		},

		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];

		},
		onShow() {
			/*  #ifdef  MP-WEIXIN */
			wx.hideHomeButton();
			/* #endif */
		},
		onLoad() {
			// this.page.openid = options.sysUserWxAuthSid

			this.getOpenId()
		},
		methods: {

			getOpenId() {
				let that = this
				wx.login({
					success: function(res) {
						if (res.code) {
							console.log('Http网络请求信息', {
								"wxCode": res.code
							})
							uni.request({
								// 组装请求地址
								// url: getApp().globalData.wxSilentLoginURL + "?wxCode=" + res.code,
								url: getApp().globalData.SilentLoginURL + "?wxCode=" + res.code,
								// 请求方式 GET POST
								method: "GET",
								header: {
									// 传参方式
									'content-type': "application/x-www-form-urlencoded"
								},
								// 具体参数
								data: {
									"wxCode": res.code
								},
								success: res => {
									console.log("请求openid", res)
									if (res.statusCode == 200) {
										if (res.data.success) {

											that.page.openid = res.data.data.openid
											that.page.unionid = res.data.data.unionid

											console.log("res", that.page)
										} else {

											uni.showToast({
												title: "网络错误，请退出后重新进入。",
												icon: 'none'
											})
										}
									} else {
										uni.showToast({
											title: "网络错误，请退出后重新进入。",
											icon: 'none'
										})
									}
								},
								fail: (err) => {
									uni.showToast({
										title: "网络错误，请退出后重新进入。",
										icon: 'none'
									})
								},
								complete: () => {

								}
							});
						}
					},
					fail: function(res) {
						uni.showToast({
							title: "网络错误，请退出后重新进入。",
							icon: 'none'
						})
					}
				});
			},

			next() {
				console.log('next', this.page)
				var mobileLength = this.page.mobile.length;
				if (mobileLength == 0) {
					this.Toast("请输入手机号")
					return;
				}
				let _this = this
				console.log('1111', _this.page)
				_this.$api.useropenid(_this.page).then((resp) => {
					// if (resp.success) {
					console.log('1111', resp)
					this.isShow = true
					console.log("isShows>>>>>", this.isShow)
					// wx.exitMiniProgram({
					// 	success: function() {},
					// 	fail: function() {}
					// })
					// uni.navigateBack({
					// 	delta: 10,
					// });

				}).catch(e => {
					this.isShow = false
					console.log("isShows>>>>>", this.isShow)
					console.log('eeeee', e)

				})

			},
			bankText(e) {
				//手机号
				this.page.bankName = e.detail.value;
			},
			nameText(e) {
				//手机号
				this.page.name = e.detail.value;
			},
			phoneText(e) {
				//手机号
				this.page.mobile = e.detail.value;
			},
			codeText(e) {
				//验证码
				this.page.code = e.detail.value;
			}
		}
	};
</script>

<style lang="scss">
	.navBarBox {
		background: #007AFF;
	}

	.navBarBox .statusBar {}

	.navBarBox .navBar {
		padding-top: 15px;
		padding-bottom: 13px;
		display: flex;
		font-size: 13px;
		flex-direction: row;
		color: #ffffff;
		justify-content: center;
		align-items: center;
	}

	.inputRow {
		display: flex;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 10rpx;
		margin-top: 10rpx;
		padding-bottom: 10rpx;
		border-bottom: 1px #e1e1e1 solid;
		align-items: center;

		.input {
			margin-left: 20rpx;
			height: 70rpx;
			flex: 1;
			font-size: 32rpx;
		}

		.drawableLeft {
			width: 40rpx;
			height: 40rpx;
			margin: 20rpx;
		}
	}

	.btn {
		display: flex;
		width: 90%;
		height: 80rpx;
		flex-direction: column;
		background-color: #007AFF;
		margin-top: 80rpx;
		margin-left: auto;
		margin-right: auto;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;

		.btnText {
			color: #ffffff;
			font-size: 33rpx;
		}
	}
</style>