<template>
	<bottom-popup class="popup-wrap" :show="show" @close="hidePopup">
		<app-close @close="hidePopup" />
		<div class="popup-content">
			<!-- #ifdef MP-WEIXIN -->
			<div class="step-wrap">
				<app-step :index="stepIndex" />
			</div>
			<!-- #endif -->
			<!-- 获取手机号 -->
			<template v-if="stepIndex == 0">
				<div class="popup-attr-wrap">
					<img :src="info.smallAvatarUrl" mode="widthFix" alt />
				</div>
				<!-- #ifdef H5 -->
				<div class="creat-account-btn">
					<button class="button-com red big" @click="registerFn">点击授权登录</button>
				</div>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<div class="creat-account-btn">
					<button class="button-com red big mini-btn" open-type="getPhoneNumber" @getphonenumber="getWxMobile" :plain="true">点击创建头像</button>
				</div>
				<!-- #endif -->
			</template>
			<!-- 注册完成 -->
			<template v-if="stepIndex == 1">
				<div class="popup-phone-wrap">
					<div class="phone-icon">
						<i class="iconfont iconshoujihao"></i>
					</div>
					<div class="phone-num font-bold">{{ wxPhoneInfo }}</div>
				</div>
				<div class="creat-account-btn">
					<button class="button-com red big" @click="attentionPublish">点击创建头像</button>
					<!-- <button class="button-com red big mini-btn" open-type="getPhoneNumber" @getphonenumber="getWxMobile" :plain="true">点击创建头像</button> -->
				</div>
			</template>
			<!-- 关注公众号 -->
			<template v-if="stepIndex == 2">
				<div class="wx-public-wrap">
					<!-- #ifdef MP-WEIXIN -->
					<official-account @binderror="officialErr"></official-account>
					<!-- #endif -->
					<!-- <div class="app-color-3">国兰华尚关联的公众号</div>
					<div class="flex-center-between">
						<div class="wx-public-left">
							<div class="wx-public-img">
								<img :src="`${constant.imgUrl}/retail/user/attr-default.png`" mode="widthFix" alt />
							</div>
							<div class="wx-public-det">
								<div class="wx-public-tit">国兰华尚</div>
								<div>花艺.品味.生活</div>
							</div>
						</div>
						<button class="button-com wx-public-btn">查看</button>
					</div> -->
				</div>
			</template>
		</div>
	</bottom-popup>
</template>

<script>
import AppStep from '@/components/app-step'
import BottomPopup from '@/components/plugin/bottom-popup'
import AppClose from '@/components/module/app-close'
// api
import { getUser, wxLoginFn } from '@/utils/auth'
import { getWxPhone } from '@/api/mini'
export default {
	name: 'login-popup-module',
	components: {
		AppStep,
		BottomPopup,
		AppClose
	},
	props: {
		// stepIndex: {
		// 	type: Number,
		// 	default: 0
		// },
		show: {
			type: Boolean,
			default: false
		},
		info: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			constant: this.$constant,
			stepIndex: 0,
			wxPhoneInfo: ''
		}
	},
	methods: {
		hidePopup() {
			this.$emit('hide')
			this.stepIndex = 0
		},
		registerFn() {
			this.$util.getCheckLogin()
		},
		getWxMobile(e) {
			console.log(e)
			if (e.detail.errMsg === 'getPhoneNumber:ok') {
				getWxPhone({ iv: e.detail.iv, encryptedData: e.detail.encryptedData }).then(res => {
					console.log('用户信息', res)
					this.wxPhoneInfo = res.data.mobile
					this.stepIndex = 1
					wxLoginFn(true)
				})
			} else {
				this.$msg('获取信息失败！')
			}
		},
		// 关注公众号
		attentionPublish() {
			this.stepIndex = 2
		},
		officialErr(e) {
			console.log('关注公众号组件', e)
		}
	}
}
</script>

<style lang='scss' scoped>
	// 弹窗
	.popup-wrap {
		.mini-btn {
			border: none !important;
		}
		/deep/.tui-popup-class {
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			// 适配iphoneX
			padding-bottom: env(safe-area-inset-bottom);
		}
		.popup-content {
			padding-top: 60px;
			.step-wrap {
				width: 80%;
				margin: 0 auto;
			}
			// 第一步
			.popup-attr-wrap {
				width: 160px;
				height: 160px;
				margin: 80px auto 60px;
			}
			.creat-account-btn {
				width: 600px;
				padding-bottom: 80px;
				margin: 0 auto;
				.button-com {
					width: 100%;
					text-align: center;
					font-size: 32px;
				}
			}
			// 第二步
			.popup-phone-wrap {
				@include disFlex(center, flex-start);
				width: 600px;
				// height: 94px;
				margin: 142px auto 62px;
				padding-left: 40px;
				padding-bottom: 40px;
				border-bottom: 1px solid $borderColor;
				.phone-icon {
					i {
						font-size: 44px;
					}
				}
				.phone-num {
					font-size: 60px;
					margin-left: 42px;
					letter-spacing: 3px;
				}
			}
			// 第三步
			.wx-public-wrap {
				width: 90%;
				padding: 10px 16px 28px;
				box-shadow: 2px 2px 10px #eee;
				margin: 118px auto 194px;
				border-radius: 10px;
				.flex-center-between {
					margin-top: 22px;
					.wx-public-left {
						@include disFlex(center, flex-start);
						.wx-public-img {
							width: 78px;
							height: 78px;
						}
						.wx-public-det {
							color: #7c7e7d;
							margin-left: 20px;
							.wx-public-tit {
								color: #333;
								font-size: 32px;
								margin-bottom: 6px;
							}
						}
					}
					.wx-public-btn {
						color: $mainColor1;
						border-color: $borderColor1;
						border-radius: 10px;
					}
				}
			}
		}
	}
</style>
