/**
 * 登录页面
 */
<template>
	<view class="login">
		<!-- 头像部分 -->
		<view class="avatar">
			<image v-show="imgUrl" :src="imgUrl" class="img"></image>
        <button v-show="!imgUrl" open-type="chooseAvatar" bindgetuserinfo="bindGetUserInfo" class="text" @chooseavatar="chooseAvatar">获取头像</button>
		</view>
		
		<!-- 员工号、密码 -->
		<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">
			<u-form-item label="员工号" prop="number" labelWidth="80" class="form-item">
				<u--input v-model="form.number" border="bottom" placeholder="请输入员工号"></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="password" labelWidth="80" class="form-item">
				<u--input v-model="form.password" border="bottom" password placeholder="请输入员密码"></u--input>
			</u-form-item>
		</u--form>
		<!-- 登录按钮 -->
		<!-- <view class="login-button" @click="login">登录</view> -->
		<u-button type="primary"  @click="login" class="login-button">登录</u-button>
		<!-- 忘记密码、注册部分 -->
		<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
				form:{
					number: '', //员工号
					password: '', //密码
				},
				canIUse: wx.canIUse('button.open-type.getUserInfo'),
				rules:{
					number:[{required: true,
					message: '请填写员工号',
					trigger: ['blur', 'change'],}],
					password:[{
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
					{
						pattern: /^[0-9a-zA-Z]*$/g,
						transform(value) {
							return String(value);
						},
						message: '只能包含字母或数字'
					},
					{
						min: 8,
						max: 15,
						message: '长度在8-15个字符之间'
					}]
				},
			}
		},
		created(){
	   },
		methods: {
			login(){  //点击登录
				
			},
			bindGetUserInfo(e) {
			    console.log(e.detail.userInfo,'0000');
             },
			 getUserInfo() {
				 const thds = this
			     // 查看是否授权
			     wx.getSetting({
			       success (res){
			         if (res.authSetting['scope.userInfo']) {
			           // 已经授权，可以直接调用 getUserInfo 获取头像昵称
			           wx.getUserInfo({
			             success: function(res) {
			               console.log(res.userInfo)
						   thds.imgUrl = res.userInfo.avatarUrl
			             }
			           })
			         }
			       }
				   })
				   },
			//跳转找回密码页面
			goFindPassword() {
				wx.navigateTo({
					url: '/pages/findPassword/findPassword'
				})
			},
			//跳转注册页面
			goRegister() {
				wx.navigateTo({
					url: '/pages/register/register'
				})
			},
			chooseAvatar(res){
				this.imgUrl = res.detail.avatarUrl
			},
			//点击授权头像昵称
			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;
			border-radius: 100rpx;
			margin-bottom: 80rpx;
			.img {
				width: 100%;
				height: 100%;
				border-radius: 100rpx;
			}
		}
		.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;
		}
		.text{
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: 200rpx;
			border-radius: 100rpx;
			// border: none;
		}
		.bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			color: blue;
			margin-top: 32rpx;
		}
	}
</style>