<template>
	<view class="content page-box">
		<view class="login">

			<image class="logo" :src="storeDetail.logo_url"></image>
			<view class="name"> {{ storeDetail.name }} </view>
			<view style="padding: 30rpx; width: 90%">

				

				<!-- #ifdef MP-WEIXIN -->
					<u-button v-if="storeDetail.display_setting && storeDetail.display_setting.wx_login_phone == 1"
						open-type="getPhoneNumber" shape="circle" type="success" size="large" text="登录/注册"
						@getphonenumber="getPhoneNumber"></u-button>
					<u-button v-else shape="circle" type="success" size="large" text="登录/注册" @click="login"></u-button>
				<!-- #endif -->


				<!-- #ifdef MP-ALIPAY -->
					<u-button shape="circle" color="#2979ff" size="large" type="success" icon="zhifubao" text="登录/注册"
						@click="login()"></u-button>
				<!-- #endif -->

				<!-- H5微信/支付宝快捷登陆 -->
				<!-- #ifdef H5 -->
					<view></view>
					<u-button v-if="$utils.isInWeChatBrowser()" @click="login" shape="circle" type="success"
						text="微信快捷登录"></u-button>
					<u-button v-if="$utils.isInAliBrowser()" color="#2979ff" @click="login" shape="circle" type="success"
						text="支付宝快捷登录"></u-button>
				<!-- #endif -->
				
				
				<!-- 账号密码登陆 -->
				<!-- #ifndef MP -->
					<!-- 非小程序环境，需要排除微信，和支付宝环境 -->
					<!-- 仅有浏览器，和app才会展示账号密码登陆 -->
					<template v-if="!$utils.isInWeChatBrowser() && !$utils.isInAliBrowser()">
						<view style="background: #FFF;width: 100%;padding: 10rpx;border-radius: 10px;">
							<u--form :model="form" ref="uForm" :rules="rules" labelWidth="120rpx">
								<u-form-item label="账号：" prop="name">
									<u--input v-model="form.name" border="bottom" placeholder="请输入账号"></u--input>
								</u-form-item>
								<u-form-item label="密码：" prop="pwd">
									<u--input v-model="form.pwd" :password="!is_eye" border="bottom" placeholder="请输入密码">
										<!-- <template slot="suffix">
												<u-icon size="36rpx" name="eye" v-if="!is_eye" @click="is_eye = 1"></u-icon>
												<u-icon size="36rpx" name="eye-off" @click="is_eye = 0" v-else></u-icon>
											</template> -->
									</u--input>
									<u-icon size="36rpx" name="eye" v-if="!is_eye" @click="is_eye = 1"></u-icon>
									<u-icon size="36rpx" name="eye-off" @click="is_eye = 0" v-else></u-icon>
								</u-form-item>
							</u--form>
						</view>
						<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 10rpx;">
							<view>
								<u--text @click="$utils.toUrl('/subPackages/login/reg/reset', 'redirectTo')" type="warning"
									text="忘记密码？"></u--text>
							</view>
							<view>
								<u--text @click="$utils.toUrl('/subPackages/login/reg/index', 'redirectTo')" type="primary"
									text="注册"></u--text>
							</view>
						</view>
						<view style="margin-top: 20px;">
							<u-button shape="circle" type="success" color="#fa3534" size="large" text="登录"
								@click="pwdSubmit"></u-button>
						</view>
					</template>
				
				<!-- #endif -->



			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				userToEditPop: true,
				user_infoTemporary: {
					avatarUrl: "",
					nickname: "",
				},
				data: {
					user_info: null,
				},
				showAliempower: false,

				is_eye: 0,
				form: {
					name: '',
					pwd: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					}],
					pwd: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		computed: {
			storeDetail() {
				return this.$store.state.$GstoreDetail || {}
			}
		},
		methods: {
			pwdSubmit() {
				let that = this
				this.$refs.uForm.validate().then(async (res) => {
					uni.showLoading({
						title: '提交中'
					})
					const res1 = await this.$api.user.loginPhone(this.form);
					uni.hideLoading()
					if (res1.code > 0) {
						uni.showToast({
							icon: 'none',
							title: res1.msg
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '登录成功!'
						})

						let {
							token,
							user_info,
							store_id
						} = res1.data;
						uni.setStorageSync("token_" + store_id, token);
						uni.setStorageSync("user_info", user_info);

						setTimeout(() => {
							const backPage = uni.getStorageSync("backPage")
							// console.log(backPage, 'backPage')
							if (backPage) {
								if (backPage.includes('login/login')) {
									// console.log(11)
									that.$utils.toUrl("/pages/index/index", "redirectTo");
								} else {
									// console.log(222)
									that.$utils.toUrl(backPage, 'redirectTo');
								}
							} else {
								that.$utils.toUrl("/pages/index/index", "redirectTo");
							}
						}, 2000)
					}


				}).catch(errors => {})
			},
			async getPhoneNumber(e) {
				let detail = e.detail
				// console.log(detail, 'detail')
				if (detail.errMsg == 'getPhoneNumber:ok') {
					let code = detail.code
					this.login({
						phone_code: code
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: detail.encryptedData
					})
				}
			},
			login({
				phone_code
			} = {}) {
				// console.log(phone_code, 'phone_code')
				this.$emit('goLogin', true, {
					phone_code: phone_code
				})
			},
			// // 微信登录 H5
			// async weChatLogin() {
			// 	// 从后端API获取微信H5相关信息
			// 	const res = await this.$api.common.wechatH5();

			// 	// 获取微信应用的 appid
			// 	const appid = res.data.appid;

			// 	// 获取当前页面的重定向地址并进行编码
			// 	let redirect_uri = window.location.href;
			// 	redirect_uri = encodeURIComponent(redirect_uri);

			// 	// 构建微信授权链接，包含应用的appid、重定向地址等参数
			// 	const wxAuthUrl =
			// 		`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;

			// 	// 通过重定向将用户导向微信授权页面
			// 	window.location.href = wxAuthUrl;
			// }
		}
	}
</script>

<style scoped lang="scss">
	.content {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFF;


		.login {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
		border-radius: 40rpx;
		box-shadow: 0 0.3125rem 1.25rem 0px rgba(166, 199, 251, 0.12);
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.name {
		color: #000;
		font-weight: bold;
	}
</style>