<template>
	<view class="w-body">
		<w-public />
		<view :style="{ height: 'calc(' + ($w.statusBarHeight + 44) + 'px + 6.5rem)' }"></view>
		<view class="my-banner" :style="{ height: 'calc(' + ($w.statusBarHeight + 44) + 'px + 6.5rem)' }">
			<w-banner :style="{ '--background': `url(${imageStore.img('myBg')})` }">
				<view class="user-header">
					<view v-if="authStore.isLogin" class="user-info" hover-class="w-hover-before" @click="$w.to('/pages/user/set')">
						<view>
							<u-avatar mode="aspectFill" size="3.5rem" :src="$w.url(authStore.user.avatar)"></u-avatar>
						</view>
						<view class="info w-flex-column">
							<view class="nickName">{{ authStore.user.nickName }}
								<view v-for="item in authStore.user?.roles" :key="item.id" class="user-type">{{ item.roleName }}</view>
							</view>
							<view class="phonenumber">{{ authStore.user.phonenumber ? authStore.user.phonenumber : '未绑定手机号码' }}</view>
						</view>
						<view class="w-flex">
							<u-icon name="arrow-right" color="#FFF" size="2rem"></u-icon>
						</view>
					</view>
					<view v-else class="user-info" @click="$w.uni.reLaunch({ url: '/pages/index/login' })" hover-class="w-hover-before">
						<view>
							<u-avatar mode="aspectFill" size="3.5rem"></u-avatar>
						</view>
						<view class="login">
							点击登录
						</view>
					</view>
				</view>
			</w-banner>
		</view>
		<view style="margin-top: 1rem;">
			

			<view class="item-group">
				<view class="item" hover-class="w-hover-before"
					@click="$w.to('/pages/user/set')">
					<view class="item-title">账户与安全</view>
					<view class="item-body"></view>
					<view class="item-right">
						<u-icon name="arrow-right" size=".6rem" color="var(--w-text)"></u-icon>
					</view>
				</view>
				<view class="item" hover-class="w-hover-before"
					@click="$w.to('/pages/index/notice?title=用户协议&type=9')">
					<view class="item-title">用户协议</view>
					<view class="item-body"></view>
					<view class="item-right">
						<u-icon name="arrow-right" size=".6rem" color="var(--w-text)"></u-icon>
					</view>
				</view>
				<view class="item" hover-class="w-hover-before"
					@click="$w.to('/pages/index/notice?title=隐私策略&type=8')">
					<view class="item-title">隐私策略</view>
					<view class="item-body"></view>
					<view class="item-right">
						<u-icon name="arrow-right" size=".6rem" color="var(--w-text)"></u-icon>
					</view>
				</view>
			</view>

			<view class="item-group">
				<view class="item" hover-class="w-hover-before"
					@click="$w.to('/pages/index/notice-list?type=help&title=帮助中心')">
					<view class="item-title">帮助中心</view>
					<view class="item-body"></view>
					<view class="item-right">
						<u-icon name="arrow-right" size=".6rem" color="var(--w-text)"></u-icon>
					</view>
				</view>
				<view class="item" hover-class="w-hover-before" @click="proxy.$refs.clearRef.open();">
					<view class="item-title">清空缓存</view>
					<view class="item-body"></view>
					<view class="item-right">
						<u-icon name="arrow-right" size=".6rem" color="var(--w-text)"></u-icon>
					</view>
				</view>
				<view class="item" hover-class="w-hover-before"
					@click="$w.to('/pages/index/notice?type=about')">
					<view class="item-title">关于我们</view>
					<view class="item-body"></view>
					<view class="item-right">
						<u-icon name="arrow-right" size=".6rem" color="var(--w-text)"></u-icon>
					</view>
				</view>
			</view>

			<view v-if="false" style="padding: 3rem 2rem 0;">
				<view class="w-btn" hover-class="w-hover-before" style="--color-1:var(--w-main);--color-2:var(--w-main); height: 3.2em;" @click="logout()">退出账号</view>
			</view>
		</view>

		<c-tabbar name="/pages/user/index" />

		<w-clear ref="clearRef"/>
	</view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref,getCurrentInstance } from 'vue'
import { useAuthStore, useImageStore } from '@/store'
import wClear from './components/w-clear.vue';

const { proxy } = getCurrentInstance();


const authStore = useAuthStore();
const imageStore = useImageStore();
	
	const logout = ()=>{
		uni.showModal({
			title: '退出提示',
			content: '您确定要安全退出吗?',
			success: function (res) {
				if(res.confirm) {
					authStore.logout().finally(()=>{
						uni.reLaunch({url: "/pages/index/login"});
					});
				}
			}
		});
	}
</script>

<style lang="scss" scoped>
.w-body {
	background-color: var(--w-bg);
	min-height: 100vh;

	.title {
		background-color: var(--w-bg);
		border-bottom: solid 1rpx var(--w-bg-dark);
		color: var(--w-text);
		padding-left: 1rem;
		font-size: .9rem;
		line-height: 2.5rem;
	}

	:deep(.u-avatar) {
		border: var(--w-bg-light) solid 2px;
		box-sizing: content-box;
		box-shadow: 0 0 5px #0009;
		background-color: var(--w-bg-dark-1);
	}

	.my-banner {
		z-index: var(--w-z-index);
		position: fixed;
		width: 100vw;
		top: 0;
		left: 0;
		color: var(--w-bg-light);
		--box-shadow: 0 0 1rem #0009;
		--overflow: visible;
	}
	
	.user-header {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 6rem;
		// position: relative;
		color: var(--w-bg-light);
		text-shadow: 1px 1px 0 #000;

		.user-info {
			position: absolute;
			padding: .3rem.5rem;
			display: flex;
			border-radius: .3rem;
			left: 1rem;
			width: calc(100vw - 2rem);

			.login {
				padding-left: 1rem;
				display: flex;
				align-items: center;
				color: var(--w-bg-light);
				letter-spacing: .2rem;
			}

			.info {
				flex-grow: 2;
				padding-left: 1rem;
				align-items: flex-start;

				.nickName {
					padding-bottom: .2rem;
					font-size: 1.1rem;
					font-weight: bold;
					color: var(--w-bg-dark);

					.user-type {
						display: inline-block;
						font-size: .6rem;
						font-weight: normal;
						margin-left: .3rem;
						transform: translateY(-.5rem);
						text-shadow: none;
						background-color: #0008;
						padding: .15rem .3rem;
						border-radius: .2rem;
						color: var(--w-warn-light-1);
					}
				}

				.phonenumber {
					font-size: .7rem;
					color: var(--w-bg-dark-1);
				}
			}
		}
	}

}</style>
