<template>
	
	<view class="content">
		<view class="logo">
			<image   style="width: 150rpx; height: 150rpx; " src="/static/images/logo.png" alt="" /></image>
		</view>
		<view class="login">
			<u-form :model="form" ref="uForm" :error-type="['toast']">
				
				<u-form-item label="帐号:" prop="phone">
					<u-input v-model="form.phone" placeholder="请输入登陆账号" />
				</u-form-item>
				<u-form-item label="密码:" prop="password">
					<u-input type="password" v-model="form.password" placeholder="请输入密码"/>
				</u-form-item>
			</u-form>
			<u-button @click="submit" style="margin-top: 30rpx;" type="primary">登录</u-button>
			<view class="forgetPassword" @click="forgetPassWord">忘记密码</view>
			<view class="reg" @click="register">没有帐号？注册</view>
		</view>

	</view>
</template>

<script>
import {toast, clearStorageSync, setStorageSync, getStorageSync, useRouter} from '@/utils/utils.js'

export default {
	data() {
		return {
			form: {
				phone: '',
				password: '',
			},
			rules: {
				
				phone: [
					{ 
						required: true, 
						message: '请输入帐号', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				]
			}
		};
	},
	methods: {
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					const data = {
						login_code: this.form.login_code,
						phone: this.form.phone,
						password: this.form.password,
					}
				
					this.$api.login(data).then(res => {
						console.log(res)
						if (res.code !== 0) {
							toast(res.msg)
						} else {
							toast('登录成功')
							setStorageSync('token' ,res.data.token  )
							useRouter('/pages/index/index',{} ,'switchTab')
						}
					})
				} else {
					console.log('验证失败'); 
				}
			});
		},
		register(){
			useRouter('/pages/public/register')
		},
		forgetPassWord(){
			useRouter('/pages/public/forget_password')
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>
<style lang="scss" scoped>	
	.content {
		padding: 0 10rpx;
		width:100%;
		background-image: url('/static/images/login_bg.png') ;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: left top;
	}
	.logo{
		width:150rpx;
		margin:0 auto;
		padding-top:140rpx;
	}
	.login{
		width: 80%;
		margin: 0 auto;
		margin-top: 260rpx;
	}
	.title {
		text-align: center;	
		margin: 80rpx 0 0 0;
	}
	.reg{float: right;padding:30rpx 0 30rpx 0;color:#2979ff;}
	
	.forgetPassword{float: left;padding:30rpx 0 30rpx 0;color:#2979ff;}
</style>