<template>
	<scroll-view scroll-y="true" class="body">
		<view class="user-info">
			<view class="ball"></view>
			<view class="state-bar"></view>
			<view class="avatar-name">
				<image :src="userInfo.avatar" class="avatar"></image>
				<view v-if="userInfo.token" class="text">
					<view class="nick-name">{{userInfo.nick_name}}</view>
					<view class="company">@{{userInfo.company_short_name}}</view>
				</view>
				<view v-else class="text">
					<navigator url="/pages/user/login" class="nick-name">登录解锁更多功能</navigator>
					<navigator url="/pages/user/login" class="account">点击登录</navigator>
				</view>
			</view>
		</view>
		<view v-if="userInfo.token" class="menu-group">
			<view class="menu-item">
				<text class="iconfont icon-Gear icon"></text>
				<text>偏好设置</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="menu-item">
				<text class="iconfont icon-BuildingOffice icon"></text>
				<text>企业信息</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="menu-item">
				<text class="iconfont icon-Wallet icon"></text>
				<text>套餐额度</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="menu-item">
				<text class="iconfont icon-CurrencyJpy icon"></text>
				<text>消费记录</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="menu-item">
				<text class="iconfont icon-DesktopTower icon"></text>
				<text>设备管理</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="menu-item">
				<text class="iconfont icon-UserPlus icon"></text>
				<text>账号托管</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="menu-item">
				<text class="iconfont icon-LockOpen icon"></text>
				<text>修改密码</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		<navigator url="/pages/user/login" class="login-lock" v-else>
			<swiper :autoplay="true" :circular="true" :interval="3000" class="login-swiper">
				<swiper-item class="swiper-item">
					<view class="login-item">
						<image mode="aspectFit" class="image" src="/static/tab-icon/client-active.png"></image>
						<view class="desc">全渠道搜索一个APP搞定</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="login-item">
						<image mode="aspectFit" class="image" src="/static/tab-icon/chat-active.png"></image>
						<view class="desc">全平台聊天一个APP搞定</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="login-item">
						<image mode="aspectFit" class="image" src="/static/tab-icon/home-active.png"></image>
						<view class="desc">全方位营销一个APP搞定</view>
					</view>
				</swiper-item>
			</swiper>
			 <view class="title">登录/注册</view>
		</navigator>
		<view v-if="userInfo.token" class="menu-group">
			<view @tap="userLogout()" class="menu-item">
				<text class="iconfont icon-SignOut icon"></text>
				<text>退出登录</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			/**
			 * 退出登录
			 */
			userLogout(){
				uni.showModal({
					title: '退出登录',
					content: '确实要登出这个账号吗？',
					success: (res) => {
						if(res.confirm){
							this.$store.commit('logout')
						}
					}
				})
				
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo
			}
		}
	}
</script>

<style scoped>
.body{
	.menu-group{
		/* box-shadow: 0 0 6rpx 0 #00000011; */
		margin: 24rpx auto 0; 
		border-radius: 12rpx;
		overflow: hidden;
		width: 700rpx;
		.menu-item{
			display: flex;
			align-items: center;
			background-color: white;
			padding: 32rpx 40rpx;
			gap: 40rpx;
			.icon{
				font-size: 42rpx;
				color: #F09649;
			}
			.icon-right{
				margin-left: auto;
				color: #767676;
				font-size: 28rpx;
			}
			&:active{
				background-color: #f6f6f6;
			}
			&:not(:last-child){
				border-bottom: 1rpx solid #f7f7f7;
			}
		}
	}
	.login-lock{
		gap: 4rpx;
		color: #F09649;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		position: absolute;
		width: 700rpx;
		padding: 60rpx 0;
		margin: 240rpx 25rpx 0;
		.login-swiper{
			pointer-events: none;
			width: 400rpx;
			height: 160rpx;
			.swiper-item{
				width: 100%;
				height: 100%;
				.login-item{
					width: 100%;
					height: 100%;
					display: flex;
					gap: 26rpx;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					.image{
						width: 120rpx;
						height: 120rpx;
					}
					.desc{
						font-size: 26rpx;
					}
				}
			}
		}
		.title{
			font-size: 38rpx;
			font-weight: 700;
		}

	}
	.user-info{
		overflow: hidden;
		padding: 130rpx 40rpx 48rpx;
		background-color: white;
		position: relative;
		.ball{
			pointer-events: none;
			position: absolute;
			right: -100rpx;
			top: -160rpx;
			width: 600rpx;
			height: 280rpx;
			border-radius: 50%;
			background-color: #F09649;
			filter: blur(130rpx);
		}
		.avatar-name{
			z-index: 1;
			position: relative;
			display: grid;
			grid-template-columns: auto 1fr;
			grid-gap: 20px;
			.avatar{
				border-radius: 16rpx;
				background-color: #eeeeee;
				width: 130rpx;
				height: 130rpx;
			}
			.text{
				display: flex;
				flex-direction: column;
				gap: 4rpx;
				padding: 8rpx 0;
				.nick-name{
					font-weight: 600;
					font-size: 40rpx;
				}
				.account{
					font-size: 28rpx;
					color: #767676;
				}
				.company{
					font-size: 28rpx;
					color: #F09649;
				}
			}
		}
	}
}
</style>