<template>
	<view class="login-container">
		<view class="login-title">用户名登录</view>
		<u-form :model="logForm" ref="logForm">
			<u-form-item prop="username">
				<u-input v-model="logForm.username" placeholder="请输入用户名" />
			</u-form-item>
			<u-form-item prop="password">
				<u-input v-model="logForm.password" type="password" placeholder="请输入密码" />
			</u-form-item>
			<u-form-item>
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle" :active-color="ThemeColor.PrimaryColor"></u-checkbox>
					<text class="agreement">我已阅读并同意《用户协议》及《隐私协议》</text>
				</u-checkbox-group>
			</u-form-item>
		</u-form>
		<view class="btn" @click="submit">登录</view>
		<view class="tip">
			没有账号？<text :style="{ color: ThemeColor.PrimaryColor}" @click="goReg">去注册</text>
		</view>
	</view>
</template>

<script>
	import ThemeColor from '@/utils/themeColor';
	export default {
		data() {
			return {
				ThemeColor,
				logForm: { username: '', password: ''},
				checked: false,
				logRules: {
					username: [
						{ required: true, message: '请填写用户名', trigger: ['blur']},
						{ pattern: /^[0-9a-zA-Z]*$/g, transform(value) { return String(value) }, message: '只能包含字母或数字', trigger: 'change' },
						{ min: 4, max: 12, message: '长度在6-12个字符之间', trigger: 'change' }
					],
					password: [
						{ required: true, message: '请填写密码', trigger: ['blur']},
						// { pattern: /^(?=.*[A-Z])[a-zA-Z0-9]+$/, transform(value) { return String(value) }, message: '字母数字组成且必须包含大写字母', trigger: ['change', 'blur'] },
						{ min: 6, max: 8, message: '长度在6-16个字符之间',  trigger: ['change'] },
					]
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.logForm.setRules(this.logRules);
		},
		methods: {
			goReg(){
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			// 提交登录
			submit() {
				this.$refs.logForm.validate().then(valid => {
					if (valid) {
						this.$store.dispatch('Login', this.logForm).then(res => {
							console.log(res)
							uni.switchTab({
								url: '/pages/home/home'
							})
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.login-container{
		position: relative;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 100vh;
		.login-title{
			color: #3d3d3d;
			font-size: 56rpx;
			line-height: 74rpx;
			font-weight: 500;
		}
		.agreement{
			color: #333;
			line-height: 38rpx;
			font-size: 28rpx;
		}
		.btn{
			width: 100%;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			background-color: $uni-color-primary;
			border-radius: 12rpx;
			color: #fff;
			margin-top: 30rpx;
		}
		.tip{
			position: absolute;
			bottom: 44rpx;
			left: 50%;
			font-size: 36rpx;
			color: #333;
			transform: translateX(-50%);
		}
	}
</style>