<template>
	<view class="login">
		<view class="title">手机号登录</view>
		
		<view>
			<u-form :model="form" ref="form">
				<u-form-item label="+86" class="mobile">
					<u-input v-model="form.mobile" placeholder="请输入电话"/>
				</u-form-item>
				<u-form-item>
					<u-input v-model="form.code" placeholder="请输入验证码"></u-input>
					<view slot="right">
						<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
						@change="codeChange"></u-verification-code>
						<u-button size="mini" shape="circle" hover-class="none" @tap="getCode">{{tips}}</u-button>
					</view>
				</u-form-item>
			</u-form>
		</view>
		
		<view class="u-m-t-32">
			<u-button @click="handleLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">登录/注册</u-button>
		</view>
		
		<view class="u-m-t-32 u-flex u-row-center">
			<u-checkbox v-model="form.checked" @change="allowProtocol" shape="circle" :active-color="themeColor">
			    <view class="sm row-start">
			        已阅读并同意
			        <navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=0">
			            《服务协议》
			        </navigator>
			        和
			        <navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=1">
			            《隐私政策》
			        </navigator>
			    </view>
			</u-checkbox>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					mobile: '',
					code: '',
					checked: false
				},
				seconds: 60,
				tips: ''
			}
		},
		methods: {
			// 更改验证码按钮提示语
			codeChange(text) {
				this.tips = text;
			},
			
			// 获取验证码
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			
			// 是否同意登录协议
			allowProtocol() {
				
			},
			
			handleLogin() {
				const {mobile, code, checked} = this.form
				if (!this.$u.test.mobile(mobile)) {
					return this.$u.toast('请检查手机号码格式！')
				}
				
				if (!code) {
					return this.$u.toast('请输入验证码！')
				}
				
				if (!checked) {
					return this.$u.toast('请输入验证码！')
				}
				console.log(123123)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	
	.login {
		margin: 0 64rpx;
		
		.title {
			font-size: 56rpx;
			padding-top: 190rpx;
		}
		
		.mobile {
			margin-top: 96rpx;
		}
	}
</style>