<template>
	<view class="content">
		<view class="logo">
			<image src="../../static/choujiang.png" mode=""></image>
		</view>
		<view class="loginbox">
			<view class="loginboxitem flex">
				<view class="boxitemleft">
					<image src="../../static/phone.png" mode=""></image>
				</view>
				<view class="boxitemright">
					<input type="number" value="" placeholder="请输入手机号" placeholder-class="enter" @input="enterphone" />
				</view>
			</view>
			<view class="loginboxitem flextwo">
				<view class="flex">
					<view class="boxitemleft">
						<image src="../../static/card.png" mode=""></image>
					</view>
					<view class="boxitemright">
						<input type="text" value="" placeholder="请输入短信验证码" placeholder-class="enter" @input="entercode" />
					</view>
				</view>
				<view class="cardyan" @click="getcode" v-if="disable==false">{{time}}</view>
				<view class="cardyan" v-else>{{time}}</view>
				<!-- <view class="cardyan"  @click="getcode">{{time}}</view> -->
			</view>
			<button class="loginbtn" @click="login">登录</button>
			<view class="loginword">
				登录即表示同意 <text class="xieyi" @click="xieyi" :data-type="1">用户协议</text>和<text class="xieyi" @click="xieyi" :data-type="2">隐私协议</text>


				<view class="phonecode" @click="phonenumber">手机号密码登录</view>
				<view class="title">快捷登录</view>
				<view class='btnbottom' @click="wxlogin">
					<view class="btnimgwei">
						<image src="../../static/weixin.png" mode=""></image>
					</view>
					微信登录
				</view>
				<view class='btnbottom'>
					<view class="btnimgwei">
						<image src="../../static/zhifubao.png" mode=""></image>
					</view>
					支付宝登录
				</view>
			</view>
			<view class="password flexthree">
				<view class="passwordleft" @click="forgetmima">忘记密码？</view>
				<view class="shuxian">|</view>
				<view class="passwordleft" @click="register">立即注册</view>
			</view>
		</view>
		<view class="register" v-if="tipsone">
			<view class="loginwrap">
				<view class="tip">温馨提示</view>
				<view class="zhanghaoone">该账号已在登录中，继续登录将导致</view>
				<view class="zhanghaotwo">登录中用户下线</view>
				<view class="tipbtn flexone">
					<view class="tipbtnleft">取消</view>
					<view class="tipbtnright">继续登录</view>
				</view>
			</view>
		</view>
		<view class="register" v-if="tipstwo">
			<view class="loginwrap">
				<view class="tip">温馨提示</view>
				<view class="zhanghaoone">该账号已在其他设备登录</view>
				<view class="tipbtn flexthree">
					<view class="tipbtnright" @click="sure">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	var interval = null;
	export default {

		data() {
			return {
				tipstwo: false,
				tipsone: false,
				currentTime: 60,
				time: '获取验证码',
				disable: false,
				phone: '',
				code: '',
				setcode: ''
			}
		},
		methods: {
			// 输入手机号
			enterphone(e) {
				this.phone = e.detail.value
			},
			// 输入验证码
			entercode(e) {
				this.code = e.detail.value;
				console.log('8877654', this.code)
			},
			// 获取验证码
			getcode() {
				let that = this;
				that.disable = true;
				if (that.phone == '') {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					that.disable = false;
					return false
				}
				if (that.phone != '') {
					if (!(/^1[3456789]\d{9}$/.test(that.phone))) {
						wx.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})

						that.disable = false;
						return false;
					}
				}
				let currentTime = that.currentTime;
				let url = "user/get_code";
				let param = {
					mobile: that.phone,
				};
				console.log('8888', param)
				app.post(url, param, 'get').then(r => {
					console.log(r)
					that.setcode = r.data.data.code
					interval = setInterval(function() {
						currentTime--;
						that.time = currentTime + '秒';
						console.log(that.time)

						if (currentTime <= 0) {
							clearInterval(interval)
							that.time = '重新发送';
							that.currentTime = 61;
							that.disable = false;
						}
					}, 1000)

				}).catch(err => {
					console.log(err);
					
				})
			},

			// 登录
			login() {
				let that = this;
				if (that.phone == '') {
					uni.showToast({
						title: "请输入手机号",
						icon: 'none'
					})
					return false
				}
				if (!(/^1[3456789]\d{9}$/.test(that.phone))) {
					wx.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					})
					return false;
				}

				if (that.code == '') {
					uni.showToast({
						title: "请输入验证码",
						icon: 'none'
					})
					return false
				}
				if (that.code !='') {
					// that.istestcode()
					// uni.showToast({
					// 	title: '请输入正确的验证码',
					// 	icon: 'none'
					// })
					// return false
				}
				var url = 'user/login2';
				var params = {
					mobile: that.phone,
					code: that.code,
					third_id: ''
				}
				console.log('1222', params)
				app.post(url, params, "post").then((res) => {
					console.log(res, '37443');
					uni.showToast({
						title: '录成功',
						icon: 'none'
					})
					uni.setStorageSync("token",res.data.data.token);
					
					clearInterval(interval);
					setTimeout(function() {
						uni.navigateTo({
							url:'/pages/homepage/homepage'
						})
					}, 1500);
				}).catch((err) => {
					console.log(err)
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
					
					clearInterval(interval);
					that.time = '发送验证码';
					that.currentTime = 61;
					that.disable = false;
				})
			},
			// istestcode(){
			// 	 let that = this;
			// 	    var url = 'user/register1';
			// 	    var params = {
			// 	      mobile:that.phone,
			// 		  code:that.code
				     
			// 	    }
			// 	    app.post(url, params).then((res) => {
			// 	      console.log(res);
				
			// 	    }).catch((err) => {
			// 			console.log('888',err)
			// 			uni.showToast({
							
			// 			})
				
			// 	    })
			// },
			// 注册
			register() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			phonenumber() {
				uni.navigateTo({
					url: '/pages/login/accountpassword'
				})
			},

			sure() {
				// this.tipstwo = false
			},

			xieyi(e) {
				let type = e.currentTarget.dataset.type;
				if (type == 1) {
					uni.navigateTo({
						url: '/pages/login/xieyi?type=' + type
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/xieyi?type=' + type
					})
				}
			},
			forgetmima() {
				uni.navigateTo({
					url: '/pages/login/forgetmima'
				})
			},
			// 微信登录
			wxlogin() {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes.authResult);
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								console.log(infoRes)
								console.log('用户昵称为：' + infoRes.userInfo.nickName);
								
								var url = 'user/wechat_login';
								var params = {
									nickname:infoRes.userInfo.nickName,
									avatar:infoRes.userInfo.avatarUrl,
									openid:infoRes.userInfo.openId,
									gender:infoRes.userInfo.gender,
									city:infoRes.userInfo.city,
									province:infoRes.userInfo.province,
									country:infoRes.userInfo.country,
									more:JSON.stringify(infoRes.userInfo)
								}
								console.log('参数', params)
								app.post(url, params, "post").then((res) => {
									console.log(res);
									uni.showToast({
										title:'登录成功',
										iocn:'none'
									})
									setTimeout(function(){
										uni.navigateTo({
											url:"/pages/homepage/homepage"
										})
									},1500)
									
								}).catch((err) => {
									console.log(err)
								
								})
								
							}
						});
					}
				});
			}

		},

		onLaunch: function() {
			console.log('App Launch，app启动')
		},
		onShow: function() {

		},
		onHide: function() {
			console.log('App Hide，app不再展现在前台')
		},
		onLoad() {


		},
		onReachBottom() {

		},
	}
</script>

<style>
	@import url('../../base/login');

	page {
		overflow-y: hidden;
	}

	.loginbtn {
		margin-top: 62rpx;
	}
</style>