<template>
	<view style="background-color: #fff;height: 100%;">

		<view class="codeTitle">
			验证码登录
		</view>
		<view class="tips">
			未注册用户登录将自动注册账号
		</view>

		<view class="loginForm">
			<view class="fInput"><input maxlength="11" @input="inputPhone" type="number" placeholder="请输入手机号" /></view>
			<view class="fInput">
				<input maxlength="8" type="number" @input="inputCode" placeholder="请输入验证码" />
				<view class="right" :style="{width:codeTime==0?'300rpx':'350rpx'}">
					<view class="line"></view>
					<view class="getCode" @click="getCode">{{codeTime==0?'发送验证码':'重新获取('+codeTime+') '}}</view>
				</view>
			</view>
		</view>

		<view class="loginBtn" @click="login">
			登录
		</view>
		<!-- <view class="agree">
		  登录即代表您已阅读并同意<text bindtap="goTreaty" data-id="1">《服务协议》</text>和 <text bindtap="goTreaty" data-id="2">《隐私协议》</text> 
		</view> -->
		<view class="agree">
			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox value="checked" checked-color="#3375D8"  icon-size="22px">
				</u-checkbox>
			</u-checkbox-group>
			已阅读并同意<text @click="goTreaty" data-id="1">《服务协议》</text>和 <text @click="goTreaty1" data-id="2">《隐私协议》</text>

		</view>

		<view class="callBack" @click="callBackLogin">
			返回微信一键登录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				codeTime: 0,
				clearId: null,
				checked: false,
				type: '',
				partner: ''
			}
		},
		methods: {
			inputPhone(e){
			    console.log(e);
			    this.phone = e.detail.value
			    
			  },
			   inputCode(e){
			      this.code = e.detail.value
			      
			    },
				
				checkboxGroupChange(e) {
					console.log(e);
					if (e.length > 0) {
						this.checked = true
					} else {
						this.checked = false
					}
				},
				goTreaty(){
					uni.navigateTo({
						url:'/pages/subPages/service'
					})
				},
				goTreaty1(){
					uni.navigateTo({
						url:'/pages/subPages/ys'
					})
				},
			getCode() {
				if (this.codeTime != 0) return
				if (!this.phone.length) return uni.showToast({
					title: '请先输入手机号',
					icon: 'none'
				})
				if (this.phone.length != 11) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				if (!(/^1[3456789]\d{9}$/.test(this.phone))) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				console.log(this.code, this.phone);
				uni.showLoading({
					title: '加载中'
				})
				uni.$u.http.post('/api/sms/send', {
					event: 'mobilelogin',
					mobile: this.phone
				}).then(r => {
					uni.hideLoading()
					console.log(r);
					uni.showToast({
						title: r.msg,
						icon: 'none'
					})
					if (r.code == 1) {
						
						this.setTimeCode()
					}
				})
				// this.setTimeCode()

			},
			// 验证码
			setTimeCode() {
				this.codeTime = 60
				
				this.clearId = setInterval(() => {
					// this.codeTime --
					this.codeTime = this.codeTime - 1
					
					if (this.codeTime == 0 && this.clearId) {
						clearInterval(this.clearId)
						this.codeTime = 0
						
					}
				}, 1000)
			},
			  callBackLogin(){
			    uni.navigateBack()
			  },
			login() {
				
				console.log(this.type);
				if (!this.phone.length) return uni.showToast({
					title: '请先输入手机号',
					icon: 'none'
				})
				if (this.phone.length != 11) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				if (!(/^1[3456789]\d{9}$/.test(this.phone))) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				if (!this.code) return uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})
				if (!this.checked) return uni.showToast({
					title: '请先同意服务协议和隐私权限',
					icon: 'none'
				})
				uni.showLoading({
					title: '加载中'
				})
				let that = this
				wx.login({
					provider: 'weixin', //使用微信登录
					success(res) {
						console.log(res);
						
					},
					complete(res) {
						console.log(res);
						uni.$u.http.get(`/api/common/code?code=${res.code}`).then((res) => {
							// console.log(res);
							// uni.hideLoading() 
							uni.setStorageSync('token', res.data.token || '')
							uni.setStorageSync('reToken', res.data.token || '')
							uni.$u.http.post('/api/user/mobilelogin', {
								mobile: that.phone,
								captcha: that.code
							}).then(r => {
								uni.hideLoading()
								// console.log(r);
								if(r.code == 1){
									uni.switchTab({
										url: "/pages/index/buy"
									})
								}else{
									uni.showToast({
										title:r.msg,
										icon:'none'
									})
								}
								
								
							})
							
							let ids = uni.getStorageSync('ids')
							uni.$u.http.post('/api/common/add_category_rec', {
								ids: ids
							}).then(res => {
								// console.log(this.flag);
								// if (this.flag == '买') {
								// 	uni.switchTab({
								// 		url: '/pages/index/buy'
								// 	})
								// } else {
								// 	uni.switchTab({
								// 		url: '/pages/index/sell'
								// 	})
								// }
							}).catch(err => {
								console.log(err);
							})
						}).catch(err => {
							console.log(err);
						})
					}
				});
				
			},
		}
	}
</script>

<style>
	.codeTitle {
		margin: 0 auto;
		width: 590rpx;
		padding-top: 152rpx;
		opacity: 1;
		color: rgba(13, 16, 19, 0.9);
		font-size: 52rpx;
		font-weight: 700;
		font-family: "PingFang SC";
		text-align: left;
		line-height: 64rpx;

	}

	.tips {
		margin: 0 auto;
		width: 590rpx;
		margin-top: 24rpx;
		margin-bottom: 64rpx;

		opacity: 1;
		color: rgba(13, 16, 19, 0.4);
		font-size: 26rpx;
		font-weight: 400;
		font-family: "PingFang SC";
		text-align: left;
		line-height: 40rpx;
		letter-spacing: 0.6rpx;

	}

	.loginForm {
		width: 590rpx;
		margin: 0 auto;
	}

	.loginForm .fInput {
		display: flex;
		margin-bottom: 24rpx;
		width: 590rpx;
		height: 104rpx;
		border-radius: 16rpx;
		opacity: 1;
		background: #f5f7faff;
		padding: 0 40rpx;
		box-sizing: border-box;
		padding-right: 25rpx;

	}

	.loginForm view input {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.right {
		display: flex;
		align-items: center;
		width: 350rpx;
		color: #3375D8;
		font-size: 30rpx;
	}

	.right .line {
		width: 1px;
		height: 44rpx;
		background-color: rgba(13, 16, 19, 0.4);
	}

	.right .getCode {
		font-size: 30rpx;
		margin-left: 24rpx;
	}

	.loginBtn {
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		width: 590rpx;
		height: 108rpx;
		border-radius: 16rpx;
		opacity: 1;
		background: #3375D8;
		color: #fff;
		font-weight: 700;
	}
	.agree {
		margin-top: 46rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 100%;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.agree text {
		color: rgba(0, 0, 0, 0.9);
	}

	.callBack {
		display: block;
		text-align: center;
		margin-top: 420rpx;
		opacity: 1;
		color: #3375D8;
		font-size: 28rpx;
		font-weight: 500;
		font-family: "PingFang SC";
		text-align: center;
		line-height: 40rpx;
		letter-spacing: 0.6rpx;
	}
</style>