<template>
	<view class="page">
		<view class="title">
			登录
		</view>
		<view class="tab">
			<view :class="[tab === 0 ?'active' :'', 'item']" @click="tab = 0">
				密码登录
			</view>
			<view :class="[tab === 1 ?'active' :'', 'item']" @click="tab = 1">
				验证码登录
			</view>
		</view>

		<view class="input-box">
			<input type="number" maxlength="11" class="input" v-model="phone" placeholder="请输入手机号码">
		</view>
		<view class="input-box" v-if='tab === 0'>
			<input type="password" v-model="password" class="input" placeholder="请输入登录密码">
		</view>
		<view class="input-box" v-if='tab === 1'>
			<input type="text" v-model="code" style="width: 400rpx;" class="input" placeholder="请输入验证码">
			<view class="vcode" @click="getVcode" v-if="countdown <= 0">
				获取验证码
			</view>
			<view class="vcode" v-else>
				{{countdown}}
			</view>
		</view>

		<view class="submit" @click="login">
			登录
		</view>

		<view class="b-btn">
			<navigator url="./updatePwd">
				<view class="l">
					忘记密码？
				</view>
			</navigator>
			<navigator url="./sigUp">
				<view class="r">
					快速注册
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: 0,
				password: '',
				phone: '',
				code: '',
				key: '',
				countdown:0
			}
		},
		methods: {
			login() {
				let tip = ''
				if (!this.phone) {
					tip = '请输入手机号码'
				} else if (!this.password && this.tab === 0) {
					tip = '请输入登录密码'
				} else if (!this.code && this.tab === 1) {
					tip = '请输入验证码'
				}
				if (tip) {
					uni.showToast({
						title: tip,
						icon: "none"
					})
					return
				}
				this.$post({
					data:{
						do:'AppLogin',
						data:{
							phone:this.phone,
							password:this.tab == 0?this.password:'',
							code:this.tab == 0?'':this.code
						}
					}
				}).then(res=>{
					console.log(res,'++++++++')
					for(let i in res.data){
						uni.setStorageSync(i,res.data[i])
					}
					uni.showToast({
						title:res.message,
						mask:true
					})
					
					this.$post({
						data: {
							do: 'Vip',
							data: {
								user_id: user_id,
								pw: '375'
							}
						}
					}).then(res => {
						
						if (res.data.is_vip == 1) {
							uni.setStorageSync('is_vip', 1);
						}
					})
					
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/index/index'
						})
					},1500)
				})
				return
				
				let t = this

				if (this.tab === 0) {
					t.$req({
						url: "authorizations",
						method: "POST",
						data: {
							username: this.phone,
							password: this.pwd
						}
					}).then(res => {
						console.log(res);
						if (!!res.code) {
							if (res.code === 40001) {
								uni.navigateTo({
									url: '../../pages/login/login'
								})
							} else if (res.code === 40002) {
								uni.showToast({
									title: res.message,
									icon: "none",
									duration: 5000
								})
							}
						} else {

							console.log(res.access_token);
							uni.setStorageSync("token", res.access_token)
							uni.switchTab({
								url: '../../pages/index/index'
							})
						}
					})
				}else{
					t.$req({
						url: "authorizations/sms",
						method: "POST",
						data: {
							username:this.phone,
							verification_key:this.key,
							verification_code:this.vcode,
						}
					}).then(res => {
						console.log(res);
						if (!!res.code) {
							if (res.code === 40001) {
								uni.navigateTo({
									url: '../../pages/login/login'
								})
							} else if (res.code === 40002) {
								uni.showToast({
									title: res.message,
									icon: "none",
									duration: 5000
								})
							}
						} else {
							uni.setStorageSync("token", res.access_token)
							uni.switchTab({
								url: '../../pages/index/index',
								fail(e) {
									console.log(e)
								}
							})
						}
					})
				}
			},
			getVcode() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: "none",
					})
					return
				} 
				this.$post({
					data:{
						do:'GetPhoneCode',
						data:{
							phone:this.phone
						}
					}
				}).then(res=>{
					console.log(res,'++++++++')
					if(res.errno==2004){
						uni.showToast({
							title: '短信已发送',
							icon: "none",
							duration: 5000
						})
						this.key = res.key;
						if (this.countdown <= 0) {
							this.countdown = 60
							let timer = setInterval(() => {
								this.countdown--;
								if (this.countdown < 1) {
									clearInterval(timer);
									this.countdown = 0
								}
							}, 1000)
						}
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 0 32rpx;
		width: 100vw;
		box-sizing: border-box;
	}

	.vcode {
		width: 180rpx;
		height: 70rpx;
		border-radius: 4rpx;
		border: 2rpx solid #57BD37;
		text-align: center;
		line-height: 70rpx;
		font-size: 32rpx;
		color: #57BD37;
		position: absolute;
		right: 0;
		bottom: 14rpx;
	}

	.title {
		width: 104rpx;
		height: 72rpx;
		font-size: 52rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		padding-top: 20vh;
		margin-bottom: 104rpx;
	}

	.tab {
		display: flex;
		align-items: center;
		margin-bottom: 114rpx;

		.item {
			height: 50rpx;
			margin-right: 86rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;

			&.active {
				color: #57BD37;
				position: relative;

				&:after {
					display: block;
					position: absolute;
					content: '';
					left: 50%;
					transform: translateX(-50%);
					width: 56rpx;
					height: 6rpx;
					background-color: #57BD37;
					bottom: -10rpx;
				}
			}
		}
	}

	.input-box {
		padding-bottom: 26rpx;
		border-bottom: 2rpx solid #E4E4E4;
		height: 42rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		margin-bottom: 88rpx;
		width: 100%;
		position: relative;
	}

	.submit {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(180deg, #6AD449 0%, #4EB32F 100%);
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-bottom: 40rpx;
		margin-top: 150rpx;
	}

	.b-btn {
		display: flex;
		width: 100%;
		justify-content: space-between;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 44rpx;

		.r {
			color: #57BD37;
		}
	}
</style>