<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :autoBack="true" :border="true" title="个人设置"></el-navbar>
		
		<view class="top-wrap">
			<view class="top-user">
				<view class="user-box" @click.stop="navigateTo('pages/ucenter/user/user')">
					<view class="avatar">
						<el-avatar v-if="isLogin && user.avatar != undefined" size="55" :src="user.avatar"></el-avatar>
						<el-avatar v-if="!isLogin && site.avatar != undefined" size="55" :src="site.avatar"></el-avatar>
					</view>
					<view class="user" v-if="isLogin">
						<view>{{ user.username }}</view>
						<view>
							<text v-if="!isEmpty(user.mobile)">手机：{{ user.mobile }}</text>
							<text v-else>UID: {{ user.id }}</text>
						</view>
					</view>
					<view class="user" v-else>
						<view @click="navigateTo('pages/user/login')">点击登录</view>
					</view>
					<view class="right">
						<uni-icons type="right" size="17" color="#aaa"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		
		<view class="line"></view>
		
		<view class="list-wrap">
			<view class="list-cell" @click="navigateTo('pages/ucenter/user/password')">
				<view class="list-box">
					<view class="center">登录密码</view>
					<view class="right"><uni-icons type="right" size="17" color="#aaa"></uni-icons></view>
				</view>
			</view>
		</view>
		
		<view class="line"></view>
		
		<view class="list-wrap">
			<view class="list-cell" @click="navigateTo('pages/user/agreement?type=service')">
				<view class="list-box">
					<view class="center">隐私政策</view>
					<view class="right"><uni-icons type="right" size="17" color="#aaa"></uni-icons></view>
				</view>
			</view>
			<view class="list-cell" @click="navigateTo('pages/user/agreement?type=privacy')">
				<view class="list-box">
					<view class="center">服务政策</view>
					<view class="right"><uni-icons type="right" size="17" color="#aaa"></uni-icons></view>
				</view>
			</view>
		</view>
		
		<view class="btn">
			<button class="logout" @click="logout">退出登录</button>
		</view>
		
	</el-layout>
</template>

<script setup>
	import { onShow } from "@dcloudio/uni-app";
	import { ref } from "vue";
	import { storeToRefs } from 'pinia';
	import { useUserStore } from "@/store/user";
	import { useAppStore } from "@/store/app";
	import { isEmpty } from "@/el-ui/libs/check";
	import { navigateTo } from "@/el-ui/libs/navigate";
	
	const appStore           = useAppStore();
	const userStore 		 = useUserStore();
	const { isLogin,user }   = storeToRefs(userStore);
	const { site } 			 = storeToRefs(appStore);
	
	onShow(()=>{
		// userStore.getUser();
		if(!isLogin.value){
			navigateTo("pages/user/login");
		}
	})
	
	const logout = ()=>{
		userStore.logout();
		navigateTo('pages/user/login');
	}
	
</script>

<style lang="scss" scoped>
	.top-wrap {
		position: relative;
		background-color: #fff;
		padding: 35rpx 0;
		.top-user {
			width: 100%;
			.user-box {
				display: flex;
				align-items: center;
				width: 95%;
				margin: 0 auto;
				.user {
					padding-left: 15rpx;
					flex: 1;
					view {
						&:nth-child(1){
							color: #1D2541;
							font-weight: bold;
							font-size: 36rpx;
							padding-top: 15rpx;
						}
						&:nth-child(2){
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							text {
								color: #aaa;
								font-size: 24rpx;
								&:nth-child(2){
									padding-left: 10rpx;
								}
							}
						}
					}
				}
				.right {
					width: 20px;
					height: 20px;
					padding-right: 0rpx;
				}
			}
		}
	}
	
	.list-wrap {
		padding: 0;
		position: relative;
		z-index: 1;
		margin: 0px 0px;
		background-color: #fff;
		box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
		.list-cell {
			position: relative;
			width: 100%;
			box-sizing: border-box;
			background-color: #FFFFFF;
			color: #080808;
			font-size: 14px;
			padding: 13px 15px;
			border-radius: 6px;
			overflow: hidden;
			border-bottom: 1px solid #f8f8f8;
			&:last-child{
				border-bottom: 0;
			}
			.list-box {
				display: flex;
				align-items: center;
				.left {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 20px;
					height: 20px;
					border-radius: 50%;
					position: relative;
					z-index: 1;
				}
				.center {
					margin-left: 10px;
					flex: 1;
					font-size: 29rpx;
				}
				.right {}
			}
		}
	}
	
	.btn {
		width: 92%;
		margin: 0 auto;
		margin-top: 50rpx;
		.logout {
			width: 100%;
			color: #ffffff;
			border-color: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
			background: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
			height: 40px;
			line-height: 40px;
			border-radius: 35rpx;
			font-size: 32rpx;
		}
	}
	
	.line {
		width: 100%;
		height: 20rpx;
	}
</style>