<template>
	<view class="content">
		<view class="login-top">
			<view class="top-logo-content">
				<image class="top-logo" fit="contain" src="/static/imgs/top_logo.png" />
				链商星球(中国)
			</view>
			<image class="top-bg" fit="contain" mode="widthFix" src="/static/imgs/top_bg.png" />
		</view>
		<!-- 输入手机号相关 -->
		<view class="inputs phone">
			<label class="label">+86</label>
			<input type="number" placeholder="输入您的手机号码" maxlength="11" v-model="phone" />
		</view>
		<view class="inputs sms">
			<input type="number" placeholder="输入短信验证码" maxlength="4" v-model="code" />
			<button class="sms-btn" type="default" size="mini" :disabled="phone == '' || getSms"
				@click="getPhoneCode">{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
		</view>
		<view class="inputs">
			<input placeholder="邀请码" maxlength="10" v-model="parentId" />
		</view>
		<button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button>
		<!-- 快捷登录 -->
		<!-- <view class="quick">
			<view class="quick-title">快捷登录</view>
			<view class="quick-box">
				<image class="quick-icon" src="@/static/icons/wechat.png" mode="widthFix" @click="onShowToast"></image>
			</view>
		</view> -->
		<!-- 用户登录注册协议 -->
		<view class="agreement">
			未注册的手机号验证后将自动创建账号，登录即表示同意接收
			<view @click="$Router.push({name: 'agreement', params: {name : 'secret'}})">用户隐私协议</view>
			和
			<view @click="$Router.push({name: 'agreement', params: {name : 'service'}})">用户服务协议</view>
		</view>
		<view class="beianNo">皖ICP备2021013714号-1</view>
		
		<!-- https://beian.miit.gov.cn/ -->
	</view>
</template>

<script>
	import {
		getSms,
		smsAuth
	} from '@/apis/interfaces/auth'
	export default {
		data() {
			return {
				phone	: "18245180131",
				code	: "",
				parentId: "",
				smsTime	: 60,
				getSms	: false
			}
		},
		onShow(){
			this.parentId = this.$Route.query.invite || ''
		},
		methods: {
			// 用户登录
			login() {
				smsAuth({
					mobileNo	: this.phone,
					code		: this.code,
					parent_id	: this.parentId
				}).then(res => {
					this.$store.commit('setToken', res.token_type + ' ' + res.access_token)
					if(this.$Route.toName){
						this.$Router.back()
					}else{
						this.$Router.replaceAll({name: 'Index'})
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			// 获取验证码
			getPhoneCode() {
				let outTime
				getSms({
					mobileNo: this.phone
				}).then(res => {
					uni.showToast({
						title: res,
						icon: "none"
					})
					this.getSms = true
					outTime = setInterval(() => {
						if (this.smsTime <= 1) {
							this.getSms = false
							this.smsTime = 60
							clearInterval('outTime')
						}
						this.smsTime -= 1
					}, 1000)
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			// 提示信息
			onShowToast(){
				uni.showToast({
					title: '微信登录暂未开放，敬请期待',
					icon : 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		width: 100vw;
		padding: $padding * 3;
		box-sizing: border-box;
		background: white;

		.login-top {
		  height: 26vh;
		  width: 100%;
		  display: flex;
		  flex-direction: row;
		  align-items: flex-end;
		  justify-content: center;
		  box-sizing: border-box;
		  position: relative;
		  padding-bottom: 160rpx;
		  .top-bg {
		    position: absolute;
		    bottom: 30rpx;
		    z-index: 2;
			width: 740rpx;
		  }
		  .top-logo-content {
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		    box-sizing: border-box;
		    color: #7f56a4;
		    font-size: $title-size;
		    .top-logo {
		      margin-bottom: 20rpx;
			  width: 146rpx;
			  height: 146rpx;
		    }
		  }
		}
		

		.inputs {
			background:rgba($color: $mian-color, $alpha: 0.05);
			border: solid 1rpx $border-color;
			position: relative;
			margin-top: $margin;
			height: 80rpx;
			line-height: 80rpx;

			input {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 $padding;
				border: none;
				box-sizing: border-box;
				font-size: $title-size-lg;
			}

			&.phone {
				padding-left: 120rpx;

				.label {
					position: absolute;
					left: 0;
					top: 0;
					width: 120rpx;
					text-align: center;
					border-right: solid 1rpx $border-color;
					font-size: $title-size-lg;
				}
			}

			&.sms {
				padding-right: 200rpx;
				.sms-btn[size='mini'] {
					width: 200rpx;
					height: 77rpx;
					line-height: 77rpx;
					position: absolute;
					top: 1rpx;
					right: 1rpx;
					padding: 0;
					margin: 0;
					border-radius: 0;
					border-left: solid 1rpx $border-color;
					color: $text-price;
					font-size: $title-size-lg;
					&::after {
						border: none;
					}
					&[disabled] {
						color: rgba($color: $text-price, $alpha: .6);
						background: $border-color-lg;
					}
				}
			}
		}

		.title {
			text-align: center;
			font-size: $title-size + 6;
			font-weight: bold;
			color: $text-color;
			margin-bottom: 100rpx;
		}

		.btn {
			background-image: linear-gradient(to bottom,#bf52eb,#8f32dd);
			color: white;
			border-radius: 0;
			margin-top: $margin;
			font-size: $title-size;
			line-height: 90rpx;
			height: 90rpx;
			font-weight: bold;

			&::after {
				border: none;
			}

			&[disabled] {
				background: rgba($color: #8f32dd, $alpha: .6);
			}
		}

		.quick {
			padding-top: $padding * 3;
			text-align: center;

			.quick-title {
				text-align: center;
				color: $text-gray;
				font-size: $title-size-sm;
				padding-bottom: $padding;
			}

			.quick-box {
				display: flex;
				justify-content: center;

				.quick-icon {
					width: 78rpx;
				}
			}
		}

		.agreement {
			padding-top: 12vh;
			font-size: $title-size-sm;
			color: $text-gray;
			view {
				color: $text-price;
				display: inline-block;
				padding: 0 10rpx;
			}
		}
		.beianNo{
			font-size: $title-size-sm;
			color: $text-gray-m;
			text-align: center;
			padding-top: $padding*2;
		}
	}
</style>
