<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
+----------------------------------------------------------------------
| 登录 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<view class="container" :style="{'--theme-color': themeColor}">
		<!-- 标题栏 -->
		<title-bar :showBack="true" title="登录"></title-bar>
		<!-- 内容区 -->
		<view class="container-main" v-if="loadEnd">
			<image class="main-header" :src="loginImg" mode="aspectFit" v-if="loginImg"></image>
			<!-- #ifdef MP-WEIXIN -->
			<view class="main-login">
				<view class="login-title">小程序需要登录注册才能使用相关功能，申请获取以下权限</view>
				<view class="login-subtitle">获得你的公开信息(昵称、头像、手机号码等)</view>
				<!-- 授权登录 -->
				<view class="login-info" v-if="isRegister">
					<view class="info-btn" @click="handleLogin">授权登录</view>
					<view class="info-btn cancel" @click="goBack(2)">取消登录</view>
				</view>
				<!-- 授权头像昵称 -->
				<form class="login-info" @submit="handleLogin" v-else>
					<view class="info-item">
						<view class="item-title">头像</view>
						<button class="item-avatar" open-type="chooseAvatar" @chooseavatar="bindChooseAvatar">
							<image class="image" :src="avatarPath || '/static/login.png'" mode="aspectFill"></image>
						</button>
					</view>
					<view class="info-item">
						<view class="item-title">昵称</view>
						<input class="item-nickname" type="nickname" name="nickname" :value="userInfo.nickname" placeholder="请输入昵称" />
					</view>
					<button class="info-btn" style="margin-top: 48rpx;" form-type="submit">授权登录</button>
					<button class="info-btn cancel" @click="goBack(2)">取消登录</button>
				</form>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<!-- 手机号验证码登录 -->
			<view class="main-form" v-if="!isShowInfo">
				<view class="form-input">
					<input class="input" v-model="mobile" maxlength="11" type="number" placeholder="请输入您的手机号" placeholder-class="placeholder" />
				</view>
				<view class="form-input flex align-items-center">
					<input class="input flex-item" v-model="captcha" type="text" placeholder="请输入验证码" placeholder-class="placeholder" />
					<view class="countdown" v-if="countdown && countdown > 0">{{countdown}}秒</view>
					<view class="btn" @click="getCaptcha()" v-else>发送验证码</view>
				</view>
				<view class="form-btn" @click="onLogin">登录</view>
				<view class="form-read flex align-items-center" @click="isRead = !isRead">
					<view class="radio" :class="{active: isRead}">
						<image src="/static/tick.png" mode="aspectFill" v-if="isRead"></image>
					</view>
					<view class="label flex-item">我已阅读并同意 <text @click.stop="toAgreement(1)">《用户协议》</text>和<text @click.stop="toAgreement(2)">《隐私政策》</text></view>
				</view>
			</view>
			<!-- 授权头像昵称 -->
			<view class="main-login" v-else>
				<view class="login-info">
					<view class="info-item">
						<view class="item-title">头像</view>
						<view class="item-avatar" @click="chooseAvatar">
							<image class="image" :src="avatarPath || '/static/login.png'" mode="aspectFill"></image>
						</view>
					</view>
					<view class="info-item">
						<view class="item-title">昵称</view>
						<input class="item-nickname" v-model="userInfo.nickname" placeholder="请输入昵称" />
					</view>
					<button class="info-btn" style="margin-top: 48rpx;" @click="handleUpdateUser">授权登录</button>
					<button class="info-btn cancel" @click="goBack(1)">稍后授权</button>
				</view>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>
<script>
	import { mapState } from "vuex"
	export default {
		data() {
			return {
				// 加载完成
				loadEnd: false,
				// 微信参数
				// #ifdef MP-WEIXIN
				// 是否已经注册
				isRegister: false,
				// #endif
				// 已选择头像
				avatarPath: "",
				// 用户信息
				userInfo: {
					avatar: "",
					nickname: "",
				},
				// 公众号H5参数
				// #ifndef MP-WEIXIN
				// 是否已读
				isRead: false,
				// 手机号
				mobile: "",
				// 验证码
				captcha: "",
				// 验证码倒计时
				countdown: 0,
				// 定时器
				interval: null,
				// 是否显示设置头像昵称
				isShowInfo: false,
				// #endif
				// 来源链接
				fromPage: null,
			}
		},
		onLoad(option) {
			if (option.from) this.fromPage = decodeURIComponent(option.from)
			// #ifdef MP-WEIXIN
			uni.showLoading({
				title: "加载中"
			})
			this.getAuthStatus(() => {
				uni.hideLoading()
				this.loadEnd = true
			})
			// #endif
		},
		onShow() {
			// #ifndef MP-WEIXIN
			if (this.isRead || this.mobile || this.captcha || this.isShowInfo) return
			this.loadEnd = false
			uni.showLoading({
				title: "加载中"
			})
			this.getAuthCode(() => {
				uni.hideLoading()
				this.loadEnd = true
			})
			// #endif
		},
		// #ifndef MP-WEIXIN
		onUnload() {
			clearInterval(this.interval)
		},
		// #endif
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
				appletLogo: state => state.app.appletLogo,
				appletName: state => state.app.appletName,
				loginImg: state => state.app.loginImg,
				token: state => state.user.token,
				WeChatAppid: state => state.app.WeChatAppid,
			})
		},
		methods: {
			// 返回上一页
			async goBack(type) {
				try {
					let pages = getCurrentPages()
					if (type == 2) {
						if (pages.length == 1 || pages[pages.length - 2].route.indexOf("pages/login/index") > -1) {
							this.$util.toPage({
								mode: 3,
								path: "/pages/mine/index",
							})
						} else {
							uni.navigateBack()
						}
					} else {
						if (this.fromPage && this.fromPage.indexOf("pages/login/index") == -1) {
							const isPermission = await this.$util.getPagePermission({ mode: 2, path: this.fromPage }, 2)
							if (isPermission) {
								this.$util.toPage({
									mode: 2,
									path: this.fromPage
								})
							} else {
								this.$util.toPage({
									mode: 3,
									path: "/pages/mine/index",
								})
							}
						} else {
							if (pages.length == 1 || pages[pages.length - 2].route.indexOf("pages/login/index") > -1) {
								this.$util.toPage({
									mode: 3,
									path: "/pages/mine/index",
								})
							} else {
								uni.navigateBack()
							}
						}
					}
				} catch (error) {
					this.$util.toPage({
						mode: 3,
						path: "/pages/mine/index",
					})
				}
			},
			// 微信登录
			// #ifdef MP-WEIXIN
			// 获取账号是否已注册
			getAuthStatus(fn) {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						this.$util.request("login.isAuth", {
							code: loginRes.code
						}).then(res => {
							if (fn) fn()
							if (res.code == 1) {
								if (res.data.auth_status == 1) {
									this.isRegister = true
								} else {
									this.isRegister = false
								}
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}).catch(error => {
							if (fn) fn()
							console.error('获取账号是否已注册 ', error)
						})
					},
					fail: () => {
						uni.showToast({
							icon: "none",
							title: "授权失败，请重试"
						})
					}
				})
			},
			// 选择头像
			bindChooseAvatar(e) {
				this.avatarPath = e.detail.avatarUrl
			},
			// 提交登录
			handleLogin(e) {
				if (!this.isRegister) {
					this.userInfo.nickname = e.detail.value.nickname
					if (!this.avatarPath) {
						uni.showToast({
							title: "请设置头像后登录",
							icon: 'none',
						})
						return
					}
					if (!this.userInfo.nickname) {
						uni.showToast({
							title: "请设置昵称后登录",
							icon: 'none',
						})
						return
					}
				}
				uni.showLoading({
					title: '授权中',
					mask: true,
				})
				if (this.avatarPath) {
					this.$util.uploadFile(this.avatarPath).then(result => {
						if (result.code == 1) {
							this.userInfo.avatar = result.data.url
							this.loginEvent()
						} else {
							uni.showToast({
								title: result?.msg || "上传失败",
								icon: 'none'
							})
						}
					}).catch(error => {
						uni.hideLoading()
						console.error('上传图片 ', error)
					})
				} else {
					this.loginEvent()
				}
			},
			// 提交事件
			loginEvent() {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						let url = ""
						let data = {
							code: loginRes.code
						}
						if (this.isRegister) {
							url = "login.login"
						} else {
							url = "login.register"
							if (uni.getStorageSync("parentWechatId")) data.parent_wechat_id = uni.getStorageSync("parentWechatId")
							if (this.userInfo.nickname) data.nickname = this.userInfo.nickname
							if (this.userInfo.avatar) data.avatar = this.userInfo.avatar
						}
						console.log('触发')
						this.$util.request(url, data).then(res => {
							
							console.log(res,'====================res==================')
							
							
							
							uni.hideLoading()
							if (res.code == 1) {
								console.log(res.data,'================data=================')
								uni.setStorageSync('token', res.data.token);
								uni.setStorageSync("userInfo", res.data)
								console.log(res.data,'=============res.data======================')
								this.$store.commit('user/setToken', res.data.token)
								this.$store.commit('user/setUserInfo', res.data)
								this.goBack(1)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}).catch(error => {
							console.error('登录/注册 ', error)
						})
					},
					fail: () => {
						uni.showToast({
							icon: "none",
							title: "授权失败，请重试"
						})
					}
				})
			},
			// #endif
			// 公众号H5登录
			// #ifndef MP-WEIXIN
			// 获取微信授权code
			getAuthCode(fn) {
				let authCode = this.getUrlCode('code')
				if (authCode) {
					const now = new Date().getTime();
					const item = {
						value: authCode,
						expiry: parseInt(now) + 240000,
					}
					sessionStorage.setItem('authCode', JSON.stringify(item));
					if (document.referrer.indexOf("open.weixin.qq.com") == -1) {
						history.back()
					} else {
						history.go(-2)
					}
				} else {
					if (this.getSessionValue('authCode')) {
						if (fn) fn()
					} else {
						var local = window.location.href;
						var appid = this.WeChatAppid
						location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + encodeURIComponent(local) + "&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"
					}
				}
			},
			// 获取临时存储
			getSessionValue(key) {
				const itemStr = sessionStorage.getItem(key);
				if (!itemStr) {
					return null;
				}
				const item = JSON.parse(itemStr);
				const now = new Date();
				if (now.getTime() > item.expiry) {
					sessionStorage.removeItem(key);
					return null;
				}
				return item.value;
			},
			// 截取url中的code方法
			getUrlCode(name) {
				var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
				let url = window.location.href.split('#')[0];
				let search = url.split('?')[1];
				if (search) {
					var r = search.substr(0).match(reg);
					if (r !== null) {
						return unescape(r[2]);
					}
					return null;
				} else return null;
			},
			// 跳转用户协议和隐私政策
			toAgreement(type) {
				this.$util.toPage({
					mode: 1,
					path: "/pages/mine/settings/agreement?type=" + type
				})
			},
			// 获取验证码
			getCaptcha() {
				if (!this.mobile) {
					uni.showToast({
						icon: "none",
						title: "请输入手机号"
					})
					return
				}
				if (!this.$util.validation("phone", this.mobile)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确的手机号"
					})
					return
				}
				this.$util.request("login.captcha", {
					mobile: this.mobile,
					event: "mobilelogin",
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						clearInterval(this.interval)
						this.countdown = 60
						this.interval = setInterval(() => {
							if (this.countdown <= 1) {
								clearInterval(this.interval)
								this.countdown = 0
							} else this.countdown--
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					console.error('发送验证码', error)
				})
			},
			// 登录
			onLogin() {
				if (!this.isRead) {
					uni.showToast({
						icon: "none",
						title: "请阅读并同意用户协议和隐私政策"
					})
					return
				}
				if (!this.mobile) {
					uni.showToast({
						icon: "none",
						title: "请输入手机号"
					})
					return
				}
				if (!this.$util.validation("phone", this.mobile)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确的手机号"
					})
					return
				}
				if (!this.captcha) {
					uni.showToast({
						icon: "none",
						title: "请输入手机验证码"
					})
					return
				}
				uni.showLoading({
					title: "登录中",
					mask: true
				})
				let data = {
					code: this.getSessionValue('authCode'),
					mobile: this.mobile,
					captcha: this.captcha,
				}
				if (uni.getStorageSync("parentWechatId")) data.parent_wechat_id = uni.getStorageSync("parentWechatId")
				this.$util.request("login.officialLogin", data).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						sessionStorage.removeItem("authCode")
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync("userInfo", res.data)
						this.$store.commit('user/setToken', res.data.token)
						this.$store.commit('user/setUserInfo', res.data)
						
						
						console.log(res.data,'=1111111111111===========================>>>>>>>>')
						
						if (res.data.register_state == 1) {
							this.isShowInfo = true
						} else {
							this.goBack(1)
						}
					} else {
						if (res.msg.indexOf("40163") > -1) {
							sessionStorage.removeItem("authCode")
							uni.showModal({
								title: "提示",
								content: "公众号授权状态已过期，请重试",
								showCancel: false,
								confirmColor: this.themeColor,
								confirmText: "重新授权",
								success: (res) => {
									if (res.confirm) {
										this.getAuthCode()
									}
								}
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				}).catch(error => {
					console.error('登录/注册 ', error)
				})
			},
			// 选择头像
			chooseAvatar() {
				// #ifdef MP-WEIXIN
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					sizeType: ['compressed'],
					success: (res) => {
						this.avatarPath = res.tempFiles[0].tempFilePath
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					sizeType: ['compressed'],
					success: (res) => {
						this.avatarPath = res.tempFilePaths[0]
					}
				});
				// #endif
			},
			// 更新用户头像昵称
			handleUpdateUser() {
				if (!this.avatarPath) {
					uni.showToast({
						title: "请设置头像后登录",
						icon: 'none',
					})
					return
				}
				if (!this.userInfo.nickname) {
					uni.showToast({
						title: "请设置昵称后登录",
						icon: 'none',
					})
					return
				}
				this.uploadAvatar((path) => {
					this.userInfo.avatar = path
					this.$util.request("mine.updateUser", this.userInfo).then(res => {
						uni.hideLoading()
						if (res.code == 1) {
							var userInfo = uni.getStorageSync("userInfo")
							userInfo.avatar = res.data.avatar
							userInfo.nickname = res.data.nickname
							uni.setStorageSync("userInfo", userInfo)
							this.$store.commit('user/setUserInfo', userInfo)
							this.goBack(1)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}).catch(error => {
						uni.hideLoading()
						console.error('更新用户信息 ' + error)
					})
				})
			},
			// 上传头像
			uploadAvatar(fn) {
				this.$util.uploadFile(this.avatarPath).then(result => {
					if (result.code == 1) {
						fn(result.data.url)
					} else {
						uni.showToast({
							title: result?.msg || "上传失败",
							icon: 'none'
						})
					}
				}).catch(error => {
					console.error('上传图片 ', error)
				})
			},
			// #endif
		}
	}
</script>
<style lang="scss">
	page {
		background: #fff;
	}

	.container {
		.container-main {
			padding: 96rpx 60rpx 0;

			.main-header {
				width: 100%;
				height: 500rpx;
				margin-bottom: 76rpx;
			}

			.main-login {
				.login-title {
					color: #585858;
					font-size: 34rpx;
				}

				.login-subtitle {
					color: #888;
					font-size: 28rpx;
					margin-top: 40rpx;
				}

				.login-info {
					margin-top: 48rpx;

					.info-item {
						display: flex;
						align-items: center;
						background: #ffffff;
						border-bottom: 1rpx solid #F6F7FB;

						.item-title {
							margin-right: 40rpx;
							font-size: 28rpx;
							line-height: 40rpx;
							color: #000000;
						}

						.item-avatar {
							flex: 1;
							padding: 32rpx 0;
							height: 80rpx;
							background: transparent;
							box-sizing: content-box;
							display: flex;
							justify-content: flex-start;

							&::after {
								border: none;
							}

							.image {
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
							}
						}

						.item-nickname {
							flex: 1;
							font-size: 28rpx;
							line-height: 40rpx;
							padding: 32rpx 0;
							box-sizing: content-box;
						}
					}

					.info-btn {
						height: 88rpx;
						line-height: 88rpx;
						font-size: 28rpx;
						border-radius: 16rpx;
						text-align: center;
						background: var(--theme-color);
						color: #ffffff;

						&.cancel {
							background: #eee;
							color: #999;
							margin-top: 24rpx;
						}
					}
				}
			}

			.main-form {
				margin-top: 96rpx;

				.form-input {
					border-radius: 16rpx;
					border: 1rpx solid #F0F0F0;
					background: #FFF;
					margin-top: 32rpx;

					&:first-child {
						margin-top: 0;
					}

					.input {
						color: #5A5B6E;
						font-size: 28rpx;
						line-height: 40rpx;
						padding: 36rpx 32rpx;
					}

					.placeholder {
						color: #ACADB7;
					}

					.btn {
						padding: 0 24rpx;
						color: var(--theme-color);
						font-size: 28rpx;
						line-height: 40rpx;
					}

					.countdown {
						padding: 0 24rpx;
						color: #666;
						font-size: 28rpx;
						line-height: 40rpx;
					}
				}

				.form-btn {
					color: #FFF;
					font-size: 28rpx;
					line-height: 40rpx;
					padding: 36rpx;
					border-radius: 16rpx;
					background: var(--theme-color);
					margin-top: 48rpx;
					text-align: center;
				}

				.form-read {
					margin-top: 52rpx;

					.radio {
						width: 32rpx;
						height: 32rpx;
						background: #D6DBDE;
						border-radius: 50%;

						&.active {
							background: var(--theme-color);
						}
					}

					.label {
						margin-left: 20rpx;
						color: #5A5B6E;
						font-size: 24rpx;
						line-height: 34rpx;

						text {
							color: var(--theme-color);
						}
					}
				}
			}
		}
	}
</style>