<template>
	<view class="app-container">
		<view class="login-page">
			<view class="login-bg">
				<view class="logo">
					<image class="cover-image" src="/static/logo.png"></image>
				</view>
				<view class="title">uni-template</view>
			</view>
			<view class="login-form">
				<u--form labelPosition="left" :model="form" :rules="rules" ref="form">
					<u-form-item prop="username" borderBottom>
						<u-input v-model="form.username" placeholder="请输入用户名" clearable border="none"
							prefixIcon="account" :prefixIconStyle="{ fontSize: '30px' }">
						</u-input>
					</u-form-item>
					<u-form-item prop="password" borderBottom>
						<u-input v-model="form.password" placeholder="请输入密码" password clearable border="none"
							prefixIcon="lock" :prefixIconStyle="{ fontSize: '30px' }">
						</u-input>
					</u-form-item>
					<u-form-item>
						<u-button type="primary"  open-type="getPhoneNumber" @click="handleSubmit" >账号登录</u-button>
						<view class="btn-view">
							<u-button type="primary"  open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="customStyle">快速登录</u-button>
						</view>
					</u-form-item>
				</u--form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				form: {
					username: '',
					password: ''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onLoad() {
			// TODO 测试缓存
			this.$store.commit('SET_TEST_TEXT', '测试');
			this.$store.commit('SET_USER_ID', 'userId测试');
			console.log("testText", this.$store.getters.testText);
			console.log("userId", this.$store.getters.userId);
		},
		methods: {
			// 登录按钮操作
			handleSubmit() {
				this.$refs.form.validate().then(res => {
					this.$store.dispatch('Login', this.form)
						.then(res => {
							// 显示登录成功
							uni.showToast({
								title: "登录成功"
							});
							// 跳转到首页
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index'
								});
							}, 1000)
						})
				})
			},
			getphonenumber(e) {
				console.log("快速登录", e);
			}
		}
	}
</script>

<style scoped lang="scss">
	.login-page {
		flex: 1;
		background-color: #FFFFFF;

		.login-bg {
			width: 100%;
			height: 250px;
			background: #55aaff;
			background-size: cover;
			overflow: hidden;

			.logo {
				width: 100px;
				height: 100px;
				margin: 50px auto 0;

				.cover-image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.title {
				display: block;
				font-size: 20px;
				line-height: 50px;
				text-align: center;
				color: #FFFFFF;
			}
		}

		.login-form {
			padding: 20px;
			::v-deep .u-form-item {
				margin-top: 20px;

				.login-icon {
					width: 25px;
					height: 25px;
					margin-right: 20px;
				}
				
			}
			.btn-view {
				margin-top: 20px;
			}
		}
	}
</style>
