<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2022-04-19 14:58:23
	 */
	import {
		ref
	} from 'vue'
	import config from '@/config.js'
	import {
		getToken,
		delToken
	} from '@/tool/member.js'
	import {
		getUserInfoAction
	} from '@/api/index.js'
	const login_ref = ref(null)
	const user_info = ref(false)
	const loginRef = (e) => {
		login_ref.value = e
	}
	const quitClick = () => {
		delToken()
		login_ref.value.getUserInfo()
	}

	import {
		onShow
	} from '@dcloudio/uni-app'

	onShow(() => {
		getUserInfo()
	})

	const getUserInfo = () => {
		if (getToken()) {
			getUserInfoAction((info) => {
				user_info.value = info
			}, false)
		}
	}
</script>
<template>
	<Login :ref="loginRef"></Login>
	<view class="user_top_wrapper">
		<view v-if="user_info" class="user_info_wrapper">
			<view class="user_info_avatar_wrapper">
				<u-image v-if="user_info.info.avatar" :src="`${user_info.info.nickname}?s=140`" width="140rpx"
					height="140rpx"></u-image>
				<u-image v-else src="/static/logo.png" width="140rpx" height="140rpx"></u-image>
			</view>
			<view class="user_info_nickname_wrapper">
				<view v-if="user_info.info.nickname">{{ user_info.info.nickname }}</view>
				<view v-else>点击设置昵称</view>
			</view>
		</view>
		<view v-else class="user_info_wrapper">
			<view class="user_info_avatar_wrapper">
				<u-image src="/static/logo.png" width="140rpx" height="140rpx"></u-image>
			</view>
			<view class="user_info_nickname_wrapper">
				点击登录
			</view>
		</view>
		<view class="user_top_bottom_bg_wrapper"></view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.user_info_avatar_wrapper {
		width: 140rpx;
		height: 140rpx;
		border-radius: 6rpx;
		background: #ffffff;
		margin: 30rpx auto 0;
		box-shadow: 0 0 50rpx #00000060;
	}

	.user_info_nickname_wrapper {
		font-size: 28rpx;
		font-weight: bold;
		margin-top: 20rpx;
	}

	.user_info_wrapper {
		text-align: center;
	}

	.user_top_bottom_bg_wrapper {
		position: absolute;
		width: 750rpx;
		height: 100rpx;
		background: #ffffff;
		border-radius: 50%;
		bottom: 0;
		transform: translateY(50%);
		box-shadow: 0 0 50rpx #00000060;
	}

	.user_top_wrapper {
		height: 300rpx;
		overflow: hidden;
		position: relative;
		background: #67b163;
	}
</style>
