<template>
	<view>
		<uni-popup ref="popup" type="center" @change="maskClick">
			<view class="get-phone-pop">
				<view class="content-block">
					<view class="content flex flex-y-center flex-x-center">完善资料享有更多优惠，是否完善</view>
				</view>
				<form @submit="getbang">
					<view class="flex-y-center content-tel">
						<text style="min-width: 130rpx;">手机号码</text>
						<view class="flex-y-center content-tel-bor">
							<input type="number" maxlength="11" @input="getphone" name='tel'
								placeholder-class="content-tel-bor-input" placeholder="请输入手机号码" />
						</view>
					</view>
					<view class="flex-y-center content-tel">
						<view class="flex-y-center content-tel-bor" style="border: none;">
							<input type="number" placeholder-class="content-tel-bor-input" name='code'
								placeholder="请输入验证码" />
							<view class="code-btn" @click="getCode" :style="{'background-color':setColor}">
								{{codeConfig.type == 1?'获取验证码':'重试('+codeConfig.time+'s)'}}
							</view>
						</view>
					</view>
					<view class="btm-block flex flex-nowarp flex-x-between">
						<button class="btn" @click="showGetPhone">取消</button>
						<button form-type="submit" class="btn sub-btn" :style="{color:setColor}">马上完善</button>
					</view>
				</form>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	// #ifdef MP-ALIPAY
	// const {
	// 	requestSubscribeMessage
	// } = requirePlugin('subscribeMsg');
	// #endif
	export default {
		props: {
			getPhonePop: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			getPhonePop: {
				handler(newVal) {
					console.log(newVal,"newVal")
					if (newVal) {
						this.$refs.popup.open();
					}
				},
			}
		},

		data() {
			return {
				phone: null,
				codeConfig: {
					type: 1,
					time: 60
				}
			}
		},

		methods: {

			maskClick(e) {
				if (!e.show) {
					this.$emit('close', false);
				}
			},

			getphone(e) {
				this.phone = e.detail.value;
			},
			
			showGetPhone() {
				this.$refs.popup.close();
			},

			// 获取验证码
			getCode() {
				if (this.codeConfig.type != 1) {
					return
				}
				if (!/^1[0-9]{10}/.test(this.phone)) {
					uni.showToast({
						title: "请正确输入手机号",
						icon: 'none'
					})
					return false
				}
				this.$http.request('xcx/sendcode', {
					tel: this.phone,
					store_id:this.$store.state.store_id,
				}, "", "", true).then(res => {
					if (res.code == "200") {
						this.codeConfig.type = 2
						this._timer = setInterval(() => {
							if (this.codeConfig.time == 1) {
								this.codeConfig = {
									type: 1,
									time: 30
								}
								clearInterval(this._timer)
							}
							this.codeConfig.time--
						}, 1000)
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

			// 支付宝成为会员
			getbang(e) {
				let subscribe = uni.getStorageSync('balance_subscribe');
				let data = {},
					url;
				if (!/^1[0-9]{10}/.test(e.detail.value.tel)) {
					uni.showToast({
						title: "请正确输入手机号",
						icon: 'none'
					})
					return false
				}
				if (!e.detail.value.code) {
					uni.showToast({
						title: "请输入验证码",
						icon: 'none'
					})
					return false
				}
				data.tel = e.detail.value.tel;
				data.store_id = this.$store.state.store_id,
				data.id = this.$store.state.userInfo.id,
				data.code = e.detail.value.code;
				// console.log(this.$store.state.store_id, this.$store.state.userInfo.id, this.$store.state.systemInfo
					// .alipay_appid)
				this.$http.request('xcx/alipaytel', data, "", "", true).then(res => {
					if (res.code == "200") {
						this.phoneNumber = res.data.phoneNumber;
						uni.setStorageSync('phone', res.data.phoneNumber);
						uni.showModal({
							title: '恭喜完成!',
							content: '享受更多优惠！',
							showCancel: false,
							cancelText: '',
							confirmText: '确定',
							success: res => {
								this.$refs.popup.close();
								let that = this;
								// 调用方法，唤起订阅组件
								my.requestSubscribeMessage({
									thirdTypeAppId: this.$store.state.systemInfo
									.alipay_appid, // 可选，isv接入场景下必填
									entityIds: [subscribe.alipay_user], // 模板id列表，最多3个
									// 接收结果的回调方法
									complete:(r)=> {
										console.log('订阅回调', r);
									},
								});
								that.menber_info();
							},
							fail: () => {},
							complete: () => {}
						});
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

			menber_info() {
				let userInfo = this.$store.state.userInfo;
				 let pages = getCurrentPages();
				 let { route, options } = pages[pages.length-1];
				this.$http.request('xcx/userinfo', {
					id: userInfo.id,
				}, "", "", true).then(res => {
					if (res.code == "200") {
						this.$store.commit('SET_USER_INFO', res.data)
						if (route =="pages/creatOrder/creatOrder") {
								uni.redirectTo({
									url: `/pages/creatOrder/creatOrder?teen_index=${options.teen_index}&eat_people=${options.eat_people}`
								})
						}
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},
			
		}
	}
</script>

<style>
	/* 成为会员 */
	.get-phone-pop {
		width: 660rpx;
		background-color: #fff;
		border-radius: 14rpx;
		overflow: hidden;
	}

	.code-btn {
		flex: none;
		width: 170rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #3387FF;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.get-phone-pop .content {
		// height: 180rpx;
		text-align: center;
		font-size: 35rpx;
		color: #000;
		// line-height: 60rpx;
		padding: 30rpx 0;
	}

	.get-phone-pop .btm-block {
		width: 100%;
		height: 115rpx;
		border-top: 1rpx solid #eef0ef;
	}

	.get-phone-pop .btm-block .btn {
		flex: none;
		width: 50%;
		height: 115rpx;
		box-sizing: border-box;
		text-align: center;
		line-height: 115rpx;
		color: #010101;
		font-weight: bold;
		padding: 0;
		margin: 0;
		border: none;
		border-radius: 0;
		background-color: #fff;
		font-size: 35rpx;
	}

	.get-phone-pop .btm-block .btn::after {
		padding: 0;
		border: none;
		border-radius: 0;
	}

	.get-phone-pop .btm-block .sub-btn {
		color: #626c90;
		border-left: 1px solid #eef0fe;
	}

	.content-tel {
		padding: 20rpx 40rpx;
	}

	.content-tel-bor {
		border-bottom: 1rpx solid #F1F1F1;
		margin-left: 10rpx;
	}

	.content-tel-bor-input {
		font-size: 26rpx;
	}
</style>
