<template>
	<view class="">
		<uni-popup ref="popup" type="center" @maskClick="maskClick" :mask-click="false" :is-mask-click='false'>
			  <view class="get-menber-pop"> 
		      	<view class="title">
		      		<view class="flex flex-y-center flex-x-center">温馨提示</view>
		      	</view>
				<view class="content">
					<view class="flex flex-y-center flex-x-center">完善资料享有更多优惠，是否完善</view>
				</view>
		      	<view class="btm-block flex-y-center">
		      		<button class="btn flex-grow-1 flex-center" @click="hideGetPhone">继续下单</button>
					<view class="line"></view>
					<!-- #ifdef MP-WEIXIN -->
					<button class="btn flex-grow-1 flex-center" open-type="getPhoneNumber"
					@getphonenumber="onGetphoneNumber" :style="{color:setColor}">马上完善</button>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<button  @click="onGetphone"
					class="btn flex-grow-1 flex-center" :style="{color:setColor}">马上完善</button>
					<!-- #endif -->
		      	</view>
		      </view>
		</uni-popup>
		<Vphone :getPhonePop="getPhonePop" @close="setClose"></Vphone>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	let hideLoading = true;
	import Vphone from '@/components/v-phone/v-phone.vue';
	export default {
		props: {
			getMenberPop: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			getMenberPop: {
				handler(newVal) {
					console.log(newVal)
					if (newVal) {
						this.$refs.popup.open();
					}
				},
			}
		},
		data() {
			return {
				getPhonePop: false
			}
		},
		components: {
			Vphone
		},
		computed: {
			...mapState(['systemInfo', 'setColor', 'store_id', 'userInfo', 'teen_index', 'address'])
		},
		methods: {
			maskClick(){
				this.$emit('maskClick',false) 
			},
			hideGetPhone(){
			    this.$emit('modelGetClose',false)
				this.$refs.popup.close();
			},
			onGetphoneNumber(e) {
				 let pages = getCurrentPages();
				 let { route, options } = pages[pages.length-1];
				// #ifdef MP-WEIXIN
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.$http.request('xcx/Jiemi', {
						id: this.userInfo.id,
						data: e.detail.encryptedData,
						iv: e.detail.iv,
						sessionKey: uni.getStorageSync('user_xcx_info').session_key,
						store_id: this.store_id,
					}, "", "", hideLoading).then(res => {
						this.phoneNumber = res.data.phoneNumber;
						uni.setStorageSync('phone', res.data.phoneNumber);
						uni.showToast({
							title: '授权成功',
							icon: 'none'
						})
						setTimeout(()=>{
							this.$http.request('xcx/userinfo', {
								id: this.userInfo.id,
							}, "", "", hideLoading).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'
								})
							});
						},1500)
					})
				} else {
					uni.showToast({
						title: "授权失败,请重新授权",
						icon: 'none'
					})
				}
				// #endif
			},
			
			// 子组件传参
			setClose(e) {
				this.getPhonePop = e;
	 		},
			
	        // 开启会员弹窗
			onGetphone(e) {
				if (this.userInfo.mobile) {
					uni.showToast({
						title: "您已经完善过会员信息了，无需重复操作！",
						icon: 'none'
					})
					return
				}
				this.getPhonePop = true;
			},
		},
	}
</script>

<style scoped lang="scss">
	.get-menber-pop{
		background: #FFFFFF;
		font-size: 30rpx;
		width: 560rpx;
		border-radius: 8rpx;
		box-shadow: 0 1px 2px #ccc;
		.title{
		   text-align: center;
		   font-size: 28rpx;
		   padding: 30rpx 0;
		}
		.content{
			padding-bottom: 55rpx;
			padding-top: 29rpx;
		}
		.btm-block{
			font-size: 28rpx;
			height: 90rpx;
			border-top: 1rpx solid #f1f1f1;
			.line{
				width: 1rpx;
				height: 100%;
				background: #F1F1F1;
			}
			.btn{
				font-size: 30rpx;
				width: 50%;    
				color: #999;
			}
		    button::after {
				border: none;
			}
			button {
				background: none !important;
				height: auto !important;
				border: none !important;
				border-radius: 0 !important;
				font-family: inherit !important;
				// color: inherit !important;
				text-align: inherit;
			}
		}
	}
	
	.sub-btn {
		// width: 200rpx;
		// height: 100rpx;
		// background-color: $theme-color;
		// color: #fff;
		// font-weight: bold;
		// line-height: 100rpx;
		// text-align: center;
		// font-size: 32rpx;
	}
</style>
