<template>
	<view class="login_register">
		<view class="nav-bar" style="position: relative;">
			<image style="display: block;width: 100%;height: 100%;" :src="myTopBgSrc"></image>
		</view>
		<view class="handle-area">
			<view class="handle-type">
				<text class="typeText" :class="{active:isPassword}" @click="changeLogType('password')">密码登录</text>
				<text class="typeText" :class="{active:isMessage}" @click="changeLogType('message')">验证码登录</text>
			</view>
			<view class="login-area" v-if="isPassword">
				<form style="display: block;" @submit="formSubmit">
					<view class="login-item">
						<image class="login-icon" src="../../static/login/avatar.png" mode=""></image>
						<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="loginItemInput"
							type="text" name="username" placeholder="请输入您的账号" />
					</view>
					<view class="login-item">
						<image class="login-icon" src="../../static/login/password.png" mode=""></image>
						<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="loginItemInput"
							type="text" name="password" password placeholder="请输入您的密码" />
					</view>
					<view class="privacy">
						<view class="privacyIn">
							<u-checkbox-group>
								<u-checkbox @change="checkboxChange" v-model="checkedShow"></u-checkbox>
							</u-checkbox-group>
							<view class="privacyCon">
								我已阅读并同意《<text style="color: #2d8cff;" @click="agreementFn(1)">用户协议</text>》和《<text
									style="color: #2d8cff;" @click="agreementFn(2)">隐私政策</text>》
							</view>
						</view>
					</view>
					<view class="">
						<button type="default" form-type="submit" class="login-btn">立即登录</button>
					</view>
				</form>
			</view>
			<view class="login-area" v-if="isMessage">
				<form style="display: block;" @submit="formSubmit">
					<view class="login-item">
						<image class="login-icon" src="../../static/login/avatar.png" mode=""></image>
						<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="loginItemInput"
							type="text" name="phoneNumber" v-model="phoneNumber" placeholder="请输入手机号" />
					</view>
					<view class="login-item">
						<image class="login-icon" src="../../static/login/password.png" mode=""></image>
						<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="loginItemInput"
							type="text" name="message" password placeholder="请输入验证码" />
						<button class="getMessageCode" @click="getCode">{{codeTips}}</button>
					</view>
					<view class="privacy">
						<view class="privacyIn">
							<u-checkbox-group>
								<u-checkbox @change="checkboxChange" v-model="checkedShow"></u-checkbox>
							</u-checkbox-group>
							<view class="privacyCon">
								我已阅读并同意《<text style="color: #2d8cff;" @click="agreementFn(1)">用户协议</text>》和《<text
									style="color: #2d8cff;" @click="agreementFn(2)">隐私政策</text>》
							</view>
						</view>
					</view>
					<view class="">
						<button type="default" form-type="submit" class="login-btn">立即登录</button>
					</view>
				</form>
			</view>
			<view class="wxBig">
				<view class="Wxtitle">
					<view class="WxtitleIn">新用户注册</view>
				</view>
				<view class="wx" @click="userRegister">
					<image src="/static/login/userRegister.png" mode=""></image>
				</view>
			</view>
		</view>
		<u-popup v-model="agreement" mode='center' :mask='true' border-radius='20' width='85%' height='75%'
			:closeable='true'>
			<view style="padding: 30rpx;" v-html="content">{{content}}</view>
		</u-popup>
	</view>
</template>
<script>
	var that;
	export default {
		data() {
			return {
				wxcode: null,
				agreement: false,
				checkedShow: true,
				key: "",
				img: "",
				username: '',
				password: '',
				phoneNumber: '',
				message: '',
				code: "",
				isShow: true,
				myTopBgSrc: require("../../static/login/my-bg.jpg"),
				content: '',
				userContent: '',
				privacyContent: '',
				wxShow: false,
				isPassword: true,
				isMessage: false,
				codeTips: "获取验证码",
				testUrl: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf7d6140f507466be&redirect_uri=http%3A%2F%2Fqyjy.ctc-zc.com&response_type=code&scope=snsapi_base#wechat_redirect',

			}
		},
		onLoad() {
			that = this;
		},
		methods: {
			checkboxChange(e) {
				uni.setStorageSync('privacyShow', e.value)
			},
			//第三方登录
			loginFn() {
				if (that.checkedShow == false) {
					uni.showToast({
						title: '请勾选用户协议和隐私政策',
						icon: 'none',
						duration: 2000
					})
					return false;
				}
				uni.login({
					provider: 'weixin',
					success(res) {
						if (res.authResult.unionid) {
							appLogin(res.authResult.unionid).then(res1 => {
								console.log(res1)
								if (res1.statusCode == 200) {
									if (res1.data.massage == 1) {
										uni.navigateTo({
											url: 'BangWx?unionid=' + res.authResult.unionid
										})
									} else {
										uni.setStorageSync('my_token', res1.data.oAuth2AccessToken
											.access_token);
										that.updateCidFn(res1.data.userName);
									}
								} else {
									uni.showToast({
										title: '登录失败',
										duration: 2000,
										icon: 'none',
									})
								}

							}).catch(err => {
								console.log(err)
								uni.showToast({
									title: "请求失败",
									icon: 'none'
								})

							})
						} else {
							uni.showToast({
								title: '登录失败请重新登录',
								duration: 2000,
								icon: 'none',
							})
						}
					}
				})

			},
			mpLogin() {
				// #ifdef H5
				this.getWxCode()
				// #endif
				// #ifdef MP-WEIXIN
				uni.showLoading({
					title: '微信登录中...',
					mask: true
				})
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						this.$u.api.wxmplogin({
							code: loginRes.code
						}).then(res => {
							this.$u.vuex('vuex_token', res.access)
							this.$u.api.getUserInfo().then(res => {
								uni.hideLoading()
								uni.showToast({
									title: "登录成功",
									icon: "none"
								})
								uni.reLaunch({
									url: "/pages/home/home"
								})
								this.$u.vuex('vuex_user', res)
								// 修改资源请求地址
								// this.$u.vuex('vuex_user.avatar', this.vuex_user.avatar +
								// 	'?token=' + this.vuex_token)
							})
						}).catch(e => {
							uni.setStorageSync('wxmp_openid', e.data.wxmp_openid)
							uni.hideLoading()
							uni.showToast({
								title: "暂未绑定微信!",
								icon: "none"
							})
						})
					}
				});
				// #endif
			},
			// 获取code
			// 先判断url中有没有code，如果有code，表明已经授权，如果没有code，跳转微信授权链接
			getWxCode() {
				// 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId
				let code = this.getUrlCode('code')
				if (code === null || code === '') {
					window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.vuex_appid +
						'&redirect_uri=' + encodeURIComponent(this.vuex_login) +
						'&response_type=code&scope=snsapi_base&state=1#wechat_redirect'
					// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。
					// 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。
					// http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
				} else {
					this.wxcode = code
					this.wxcodeLogin()
				}
				// }
			},

			updateCidFn(username) {
				var data = {
					userCid: uni.getStorageSync('setcid'),
					username: username
				}
				updateCid(data).then(res => {
					console.log(res, 'zhiixngle ')
					if (res.statusCode == 200) {
						uni.showToast({
							title: '登录成功',
							duration: 2000,
							icon: 'none',
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '../../index/index'
							})
						}, 2000)
					}
				}).catch(err => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			//检查form表单是否填写完整
			checkedParams(obj) {
				/*
				Azuma
				1234qwer
				*/
				if (obj.username == "" || obj.username == undefined || obj.username == null) {
					myShowToast('用户名不能为空');
					return false;
				};
				if (obj.password == "" || obj.password == undefined || obj.password == null) {
					myShowToast('密码不能为空');
					return false;
				};
				if (that.checkedShow == false) {
					myShowToast('请勾选用户协议和隐私政策');
					return false;
				}

				function myShowToast(text) {
					uni.showToast({
						title: text,
						icon: 'none'
					})
				};
				return true;
			},
			changeLogType(index) {
				if (index === 'password') {
					this.isPassword = true;
					this.isMessage = false;
				} else {
					this.isPassword = false;
					this.isMessage = true;
				}
			},
			userRegister(){
				uni.navigateTo({
					url: '/pages/login/userRegister'
				})
			},
			formSubmit(e) {
				var that = this;
				const obj = e.target.value;
				if (!that.checkedParams(obj)) return;
				debugger;
				console.log(obj)
				that.$u.api.login(obj).then(res => {
					that.$u.vuex('vuex_token', res.access)
					that.$u.vuex('vuex_refresh', res.refresh)
					// let data = {openid: uni.getStorageSync('wxmp_openid')}
					// that.$u.api.bindmp(data).then(res=>{})
					that.$u.api.getUserInfo().then(res => {
						that.$u.vuex('vuex_user', res)
						// 修改资源请求地址
					})
					uni.reLaunch({
						url: '/pages/home/home_'
					})
				}).catch(e => {
					console.log(e)
					uni.showToast({
						title: '账户密码错误',
						icon: 'none'
					})
				})
			},

			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				debugger;
				console.log(this.phoneNumber)
				if (this.phoneNumber !== '') {
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					this.$u.api.getCode({
						phone: this.phoneNumber
					}).then(res => {
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					})
				} else {
					// this.$u.toast('倒计时结束后再发送');
					this.$u.toast('请输入手机号');
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.privacy {
		width: 100%;
		height: 40rpx;
		padding: 0 40rpx;
		margin-bottom: 25rpx;

		.privacyIn {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;

			.privacyCon {
				font-size: 26rpx;
			}
		}
	}

	.wxBig {
		width: 100%;
		height: auto;
		margin-top: 100rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;

		.Wxtitle {
			text-align: center;
			width: 100%;
			padding: 0 50rpx;

			.WxtitleIn {
				width: 100%;
				font-size: 26rpx;
				color: #808080;
				position: relative;
			}

			.WxtitleIn::after {
				content: '';
				width: 217rpx;
				height: 2rpx;
				background-color: #f6f6f6;
				position: absolute;
				right: 0;
				top: 18rpx;
			}

			.WxtitleIn::before {
				content: '';
				width: 217rpx;
				height: 2rpx;
				background-color: #f6f6f6;
				position: absolute;
				left: 0;
				top: 18rpx;
			}
		}

		.wx {
			width: 70rpx;
			height: 70rpx;
			margin-top: 50rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.login_register {
		position: relative;
		background-color: #f3fbff;
		min-height: 100vh;
	}

	.nav-bar {
		height: 494rpx;
		background-color: #2cade8;
		color: #FFFFFF;
	}

	.handle-area {
		width: 705rpx;
		height: auto;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		position: absolute;
		top: 340rpx;
		left: 50%;
		padding-bottom: 30rpx;
		transform: translateX(-50%);
	}

	.handle-type {
		font-family: PingFang-SC-Medium;
		font-size: 30rpx;
		line-height: 72rpx;
		color: #1e1e1e;
		padding: 62rpx;
	}

	.typeText {
		margin-right: 20rpx;
	}

	.active {
		font-size: 34rpx;
		line-height: 72rpx;
		color: #2c6fd9;
		font-weight: bold;
		position: relative;
	}

	.active::after {
		display: block;
		content: "";
		width: 100%;
		height: 6rpx;
		background-color: #2c6fd9;
		border-radius: 3rpx;
		position: absolute;
		left: 50%;
		bottom: -8rpx;
		transform: translateX(-50%);
	}

	.login-item {
		width: 635rpx;
		height: 88rpx;
		border-radius: 88rpx;
		margin: 0 auto;
		background-color: #ebf6ff;
		padding-left: 72rpx;
		box-sizing: border-box;
		position: relative;
		margin-bottom: 56rpx;
	}

	.loginItemInput {
		border-radius: 0 88rpx 88rpx 0;
	}

	.code-img-item {
		padding-left: 72rpx;
	}

	.login-item .login-icon {
		width: 22rpx;
		height: 28rpx;
		position: absolute;
		top: 50%;
		left: 35rpx;
		transform: translateY(-50%);
	}

	.login-item input {
		height: 100%;
		line-height: 88rpx;
		font-family: PingFang-SC-Medium;
		font-size: 26rpx;
	}

	.my-code-input {
		width: 300rpx;
	}

	.code-img {
		width: 155rpx;
		height: 53rpx;
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		background-color: #EEEEEE;
	}

	.getMessageCode {
		width: fit-content;
		position: absolute;
		top: 10%;
		right: 20rpx;
		height: 80%;
		color: #ffffff;
		font-size: 26rpx;
		border-color: #19be6b;
		background-color: #19be6b;
		z-index: 100;
		border-radius: 36rpx !important;
	}

	.login-btn,
	.register-btn {
		width: 635rpx;
		height: 88rpx;
		border-radius: 88rpx;
		margin: 0 auto;
		background-color: #1d7ef3;
		font-family: AdobeHeitiStd-Regular;
		font-size: 30rpx;
		line-height: 88rpx;
		color: #ffffff;
	}

	.to-login {
		font-family: AdobeHeitiStd-Regular;
		font-size: 24rpx;
		line-height: 72rpx;
		color: #2c6fd9 !important;
		border: none !important;
		margin-top: 20rpx;
	}

	.code-item {
		position: relative;
	}

	.my-code {
		width: 376rpx;
	}

	.code {
		width: 155rpx;
		height: 53rpx;
		background-color: #0075ff;
		border-radius: 27rpx;
		font-family: PingFang-SC-Medium;
		font-size: 20rpx !important;
		line-height: 53rpx;
		color: #fefeff;
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		padding-left: 12rpx;
		padding-right: 12rpx;
	}
</style>
