<template>
	<view class="login-container">
		<uni-icons type="contact-filled" size="100" color="#afafaf"></uni-icons>

		<button type="primary" class="btn-login" @click="getUserInfo()">一键登录</button>
		<text class="login-text">登陆后尽享更多权益</text>
		<image :src="headerURL"></image>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		name: "my-login",
		data() {
			return {
				nickName: '',
				headerURL: '',

			};
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updatetoken','savetokentostorage','saveUserInfoToStorage']),
			getUserInfo() {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '授权后使用',
					success: function(res) {
						if (res.confirm) {
							uni.getUserProfile({
								desc: '获取你的昵称头像',
								success: userRes => {
									if (userRes.userInfo !==
										undefined) {
										let userInfo = {
											avatarURL: userRes.userInfo.avatarUrl,
											nickName: userRes.userInfo.nickName
										}
										that.nickName = userRes.userInfo.nickName
										console.log(userInfo)
										that.getOpenID(userInfo)
									} else {
										uni.showToast({
											icon: 'none',
											title: '获取失败，请重试'
										})
									}
								},
								fail: error => {}
							})
						} else if (res.cancel) {}
					},
					fail: error => {
						
					}
				})
			},
			async getOpenID(userInfo) {
				let that = this
				uni.login({
					provider: 'weixin',
					success: function(loginAuth) {
						let code = loginAuth.code
						uniCloud.callFunction({
							name: 'wxlogin',
							data: {
								code: code
							},
							success: function(res) {
								that.updatetoken(res.result)
								that.savetokentostorage()
								that.updateUserInfo(userInfo)
								that.saveUserInfoToStorage()
							}
						})
					}
				})
				console.log(userInfo)
			}
		},
	}
</script>

<style lang="scss">
	.login-container {
		height: 750rpx;
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;

		&::after {
			content: '';
			display: block;
			width: 100%;
			height: 40px;
			background-color: #f8f8f8;
			position: absolute;
			bottom: 0;
			left: 0;
			border-radius: 100%;
			transform: translateY(50%);

		}

		.btn-login {
			width: 90%;
			border-radius: 100px;
			margin: 15px 0;
			background-color: #C00000;

		}
	}
</style>