<template>
	<view class="login">
		<view class="header">
			<view class="title">
				<text class="text">您好！</text>
				<text class="text">欢迎登录</text>
			</view>
			<image class="img" src="/static/login_bg.png" mode=""></image>
		</view>
		<view class="content">
			<u--form labelPosition="top" :model="form" :rules="rules" ref="form">
				<u-form-item label="账号" prop="loginName" borderBottom ref="item1" rightIcon='/static/login_bg.png'>
					<u--input placeholder="请输入账号" v-model="form.loginName" border="none"></u--input>
					<u-icon slot="right" size='20' name="account-fill"></u-icon>
				</u-form-item>
				<u-form-item label="密码" prop="password" borderBottom>
					<u--input :password='showPassword' placeholder="请输入密码" v-model="form.password" border="none">
					</u--input>
					<u-icon slot="right" size='20' @click='onPassword' :name="showPassword?'eye-off':'eye'"></u-icon>
				</u-form-item>
			</u--form>
			<view class="btn">
				<u-button color='#497bff' @click="submit" text='登 录'></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		PERSON_INFO,
		LOGIN_UC,
		LOGIN
	} from '@/apis/base.js'
	export default {
		data() {
			return {
				showPassword: true,
				form: {
					loginName: '',
					password: '',
				},
				rules: {
					loginName: {
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['change']
					},
					password: {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['change']
					}
				}
			};
		},
		onLoad() {
			const isLogin = this.$store.state.token && this.$store.state.user
			if (isLogin) { // 已登录则跳到首页
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		},
		methods: {
			onPassword() {
				this.showPassword = !this.showPassword
			},
			submit() {
				console.log('baseUrl',this.$store.state.baseUrl);
				this.$refs.form.validate().then(res => {
					uni.showLoading({
						title: '登录中'
					});
					this.$request(this.$store.state.baseUrl + LOGIN_UC, this.form).then(res => {
						this.getToken(res.data)
					}).catch(err => {
						uni.hideLoading();
						uni.$u.toast(err.msg)
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			getToken(token) {
				this.$request(this.$store.state.baseUrl + LOGIN, {
					ucToken: token
				}).then(res => {
					uni.setStorageSync('token', res.data)
					this.$store.commit('token', res.data)
					this.getUser()
				}).catch(err => {
					uni.hideLoading();
					uni.$u.toast(err.msg)
				})
			},
			getUser() {
				this.$request(this.$store.state.ucLoginUrl || this.$store.state.baseUrl + PERSON_INFO, '').then(res => {
					uni.hideLoading();
					uni.setStorageSync('user', JSON.stringify(res.data))
					this.$store.commit('user', res.data)
					uni.reLaunch({
						url: '/pages/index/index'
					})

				}).catch(err => {
					uni.hideLoading();
					uni.$u.toast(err.msg)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		background-color: #F2F2F2;
		padding: 0 15px 15px 15px;
		box-sizing: border-box;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.content {
			background-color: #fff;
			padding: 15px 20px;
			border-radius: 4px;
			flex: 1;
			box-sizing: border-box;
		}

		.header {
			display: flex;
			justify-content: space-around;

			.title {
				display: flex;
				flex-direction: column;
				margin-top: 30px;
				color: #3C414F;
				font-size: 20px;
				font-weight: 600;

				.text {
					line-height: 32px;
				}
			}

			.img {
				width: 168px;
				height: 115px;
			}
		}

		.btn {
			margin: 85px 10px 10px 10px;
		}
	}
</style>
