/**
 * 登录页面
 */
<template>
	<view class="login">
		<!-- 头像部分 -->
		<view class="avatar">
			<image v-show="imgUrl" :src="imgUrl" class="img"></image>
			<text v-show="!imgUrl" class="text" @click="authorization">点击授权头像</text>
		</view>
		
		<!-- 员工号、密码 -->
		<view class="input-area">
			员工号：
			<u--input
			  placeholder="请输入员工号"
			  border="surround"
			  v-model="number"
			></u--input>
		</view>
		<view class="input-area">
			密ㅤ码：
			<u--input
			  placeholder="请输入密码"
			  border="surround"
			  v-model="password"
			></u--input>
		</view>
		
		<!-- 登录按钮 -->
		<view class="login-button">登录</view>
		
		<!-- 忘记密码、注册部分 -->
		<view class="bottom">
			<view @click="goFindPassword">忘记密码</view>
			<view @click="goRegister">未有账号，点击注册</view>
		</view>
	</view>
</template>

<script>
	import { getUserProfile } from '@/utils/auth.js';
	import loginVue from './login.vue';
	import store from '@/store';
	export default {
		data() {
			return {
				imgUrl: '', //头像url
				number: '', //员工号
				password: '', //密码
			}
		},
		methods: {
			//跳转找回密码页面
			goFindPassword() {
				wx.navigateTo({
					url: '/pages/findPassword/findPassword'
				})
			},
			//跳转注册页面
			goRegister() {
				wx.navigateTo({
					url: '/pages/register/register'
				})
			},
			//点击授权头像昵称
			authorization() {
				getUserProfile(this.onAuthSuccess);
			},
			// 用户信息授权成功回调
			async onAuthSuccess(nickName, avatarUrl) {
				this.$store.commit('setUserInfo', { wxName: nickName, avatarUrl });
				console.log(this.$store.state.userInfo);
				const { wxName, avatarUrl: imgUrl } = this.$store.state.userInfo;
				this.imgUrl = imgUrl;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 50rpx;
		.avatar {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 200rpx;
			height: 200rpx;
			background-color: #999;
			margin-bottom: 80rpx;
			.img {
				width: 100%;
				height: 100%;
			}
		}
		.input-area {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 32rpx ;
		}
		.login-button {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 200rpx;
			height: 80rpx;
			background-color: #1076e3;
			color: #fff;
			margin-top: 50rpx;
			border-radius: 16rpx;
		}
		.bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			color: blue;
			margin-top: 32rpx;
		}
	}
</style>