<template>
	<view class="login-page">
		<HeaderCom type="click" @click="goBack"></HeaderCom>
		<view class="app-name">妙趣盲盒</view>
		<view class="main">
			<view class="item">
				<input type="text" placeholder="请输入您的手机号" class="input" placeholder-class="input-place" v-model="phone">
			</view>
			<view class="item">
				<input type="text" placeholder="请输入验证码" class="input" placeholder-class="input-place" v-model="code">
				<view class="code" @click="getCode">{{ countTime === 0 ? '获取验证码' : countTime + 's' }}</view>
			</view>
		</view>
		<view class="login" @click="loginSubmit">登录</view>
		<view class="agreement" @click="agreementVisible = !agreementVisible">
			<image src="@/static/new/address/s.png" mode="" class="agreement-icon" v-if="agreementVisible"></image>
			<image src="@/static/new/address/no.png" mode="" class="agreement-icon" v-else></image>
			未注册手机号将为您自动注册，注册或登录即为同意
			<text class="agreement-color" @click.stop="goPage('agreement')">《服务协议》</text>、<text class="agreement-color" @click.stop="goPage('privacy')">《隐私政策》</text>、<text class="agreement-color" @click.stop="goPage('nonage-rule')">《儿童个人信息保护规则》</text>
		</view>
		<!-- <view class="wechat">
			<image src="@/static/new/login/wx.png" mode="" class="wx-icon" @click="checkWeChatCode" v-if="isWeixin && footer"></image>
			<view class="wx" @click="checkWeChatCode" v-if="isWeixin && footer">微信登录</view>
		</view> -->
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/login/login"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import {
		smsSend,
		smsCheck,
		loginApi,
		loginCode,
		loginWechat,
		wechatAppid,
		phoneWechat
	} from '@/API/login.js'
	import HeaderCom from '@/pages/components/header.vue'
	export default {
	mixins: [myMixins],
		data(){
			return{
				tabList:[
					{label:"登录",value:'login'},
					{label:"",value:'register'}
				],
				loginType:'code',
				tabIndex:0,
				countTime: 0,//倒计时
				phone:'',
				password:'',
				code:'',
				agreementVisible:false
			}
		},
		components:{HeaderCom},
		methods:{
			goBack(){
				uni.switchTab({
					url:`/pages/index/new-index`
				})
			},
			tabCk(index){
				return
				this.tabIndex = index
			},
			// 获取验证码
			getCode() {
				if (this.countTime > 0) {
					return;
				}
				if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(this.phone))) {
					this.$api.msg('请输入正确的手机号');
					return;
				}
				// this.countTime = 60;
				// var id = setInterval(() => {
				// 	this.countTime--;
				// 	if (this.countTime === 0) {
				// 		clearInterval(id);
				// 	}
				// }, 1000);
				uni.showLoading()
				smsSend({
					username: this.phone
				}).then(res => {
					if (res.code === 200) {
						this.$api.msg('获取成功');
						this.countTime = 60;
						var id = setInterval(() => {
							this.countTime--;
							if (this.countTime === 0) {
								clearInterval(id);
							}
						}, 1000);
					} else {
						this.$api.msg(res.message);
					}
					console.log(res)
				}).catch(err => {
					this.$api.msg(err)
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 用户协议 隐私政策
			agreement(type){
				uni.navigateTo({
					url:`/pages/agreement/${type}`
				})
			},
			// 切换登录方式
			changeLogin(){
				return
				this.countTime = 0
				this.phone = ''
				this.code = ''
				if(this.loginType === 'code'){
					this.loginType = 'password'
				}else{
					this.loginType = 'code'
				}
			},
			goPage(type){
				
				
				let path = ''
				if(type === 'agreement'){
					path = '/pages/agreement/index'
				}else if(type === 'privacy'){
					path = '/pages/agreement/privacy'
				}else if(type === 'nonage-rule'){
					path = '/pages/agreement/nonage-rule'
				}
				uni.navigateTo({
					url:path
				})
			},
			// 登录
			loginSubmit() {
				if(!this.phone){
					this.$api.msg('请输入手机号');
					return;
				}
				if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(this.phone))) {
					this.$api.msg('请输入正确的手机号');
					return;
				}
				if (this.loginType === 'password' && !this.password) {
					this.$api.msg('请输入密码');
					return;
				}
				if (this.loginType === 'code' && !this.code) {
					this.$api.msg('请输入验证码');
					return;
				}
				if(!this.agreementVisible){
					this.$api.msg('请阅读并勾选用户协议、隐私政策')
					return
				}
				// 密码登录
				if (this.loginType === 'password') {
					uni.showLoading({
						title: "登录中"
					})
					loginApi({
						username: this.phone,
						password: this.password
					}).then(res => {
						console.log(res)
						if (res.code === 200) {
								uni.setStorageSync('activityShow', false)
								uni.setStorageSync('firstTime', false)
								uni.$emit('updateTabData', {newData:'newData'});
							uni.setStorageSync('box-nickname', res.data.nickname)
							uni.setStorageSync('box-id', res.data.id)
							uni.switchTab({
								url: `/pages/index/new-index`
							})
							if (this.typeBack === 'back') {
								uni.navigateBack()
							} else {
								uni.switchTab({
									url: `/pages/index/new-index`
								})
								
							}
						} else {
							this.$api.msg(res.message)
						}
					}).finally(() => {
						uni.hideLoading()
					})
				} else {
					uni.showLoading({
						title: "登录中"
					})
					loginCode({
						username: this.phone,
						code: this.code
					}).then(res => {
						console.log(res)
						if (res.code === 200) {
							
								uni.setStorageSync('activityShow', false)
								uni.setStorageSync('firstTime', false)
								uni.$emit('updateTabData', {newData:'newData'});
							uni.setStorageSync('box-nickname', res.data.nickname)
							uni.setStorageSync('box-id', res.data.id)
							uni.setStorageSync('box-appid', res.data.appid)
							// uni.setStorageSync('info', JSON.stringify(res.data))
							console.log(this.typeBack)
							// uni.switchTab({
							// uni.switchTab({
							// 	url: `/pages/index/new-index`
							// })
							if (this.typeBack) {
								uni.navigateBack()
							} else {
								uni.switchTab({
									url: `/pages/index/new-index`
								})
							}
						} else if(res.code === 11010){
							console.log("asdasdasd")
							uni.reLaunch({
								url:`/pages/login/shut-down`
							})
						}else {
							this.$api.msg(res.message)
							
						}
					}).finally(() => {
						uni.hideLoading()
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		
	}
	.login-page{
		background-image: url('@/static/new/login/bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
		padding-top: 200rpx;
		height: 100vh;
		.app-name{
			width: 320rpx;
			height: 128rpx;
			border-radius: 69%;
			border: 6rpx solid #000000;
			font-size: 64rpx;
			color: #000000;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.main{
			width: 670rpx;
			margin: 120rpx 40rpx 0 40rpx;
			border-radius: 24rpx;
			padding: 0 32rpx;
			background-color: #fff;
			.item{
				height: 104rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #F2F2F2;
				.input{
					font-size: 32rpx;
					color: #000;
				}
				.input-place{
					font-size: 32rpx;
					color: #CCCCCC;
				}
				.code{
					font-size: 32rpx;
					color: #0080FF;
				}
			}
			.border-none{
				border: none;
			}
		}
		.login{
			margin:48rpx 40rpx 0 40rpx;
			width: 670rpx;
			height: 96rpx;
			background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.agreement{
			margin: 40rpx;
			width: 670rpx;
			font-size: 24rpx;
			color: #666666;
			line-height: 46rpx;
			.agreement-icon{
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
				vertical-align: middle;
			}
			.agreement-color{
				color: #0080FF;
			}
		}
		.wechat{
			position: fixed;
			bottom: 40rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.wx-icon{
				width: 72rpx;
				height: 72rpx;
			}
			.wx{
				font-size: 24rpx;
				color: #000000;
				margin-top: 8rpx;
			}
		}
	}
</style>