<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<wd-navbar :bordered="false"
			custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(20px) !important;"
			safeAreaInsetTop fixed placeholder>
			<template #left>
				<view class="li-ml-15 li-mt-10 li-flex li-items-center">
					<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
						@click="toPages({type:'nav'})"></text>
					<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
						@click="toPages({type:'home'})"></text>
					<text class="li-text-42">设置</text>
				</view>
			</template>
		</wd-navbar>
		<!-- 导航栏背景 -->
		<view class="nav-bg-layer"></view>

		<!-- 页面背景 -->
		<view class="page-bg"></view>

		<view class="content">
			<!-- 用户信息预览 -->
			<view class="user-preview" @click="handleEditInfo">
				<view class="user-avatar">
					<image v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					<view v-else class="default-avatar">{{userInfo.nickname.substring(0,1)}}</view>
				</view>
				<view class="user-detail">
					<view class="user-name">{{userInfo.nickname || '未设置昵称'}}</view>
					<view class="user-phone">{{formatPhone(userInfo.phone)}}</view>
				</view>
				<text class="ri-arrow-right-s-line arrow-icon"></text>
			</view>

			<view class="setting-section">
				<view class="setting-list">
					<view class="setting-item" @click="clearCache">
						<view class="item-left">
							<text class="ri-delete-bin-5-line item-icon cache-color"></text>
							<text class="item-title">清除缓存</text>
						</view>
						<view class="item-right">
							<text class="cache-size">{{cacheSize}}</text>
						</view>
					</view>
					<view class="setting-item" @click="handlePrivacyPolicy">
						<view class="item-left">
							<text class="ri-file-text-line item-icon privacy-color"></text>
							<text class="item-title">隐私政策</text>
						</view>
						<view class="item-right">
							<text class="ri-arrow-right-s-line arrow-icon"></text>
						</view>
					</view>
					<view class="setting-item" @click="handleUserAgreement">
						<view class="item-left">
							<text class="ri-file-list-3-line item-icon agreement-color"></text>
							<text class="item-title">用户协议</text>
						</view>
						<view class="item-right">
							<text class="ri-arrow-right-s-line arrow-icon"></text>
						</view>
					</view>
					<view class="setting-item" @click="checkUpdate">
						<view class="item-left">
							<text class="ri-information-line item-icon about-color"></text>
							<text class="item-title">关于我们</text>
						</view>
						<view class="item-right">
							<text class="version-text">v{{appVersion}}</text>
							<text class="ri-arrow-right-s-line arrow-icon"></text>
						</view>
					</view>
				</view>
			</view>

			<!-- 退出登录按钮 -->
			<view class="logout-container">
				<button class="logout-btn" @click="handleLogout">退出登录</button>
			</view>
		</view>

		<!-- 确认弹窗 -->
		<wd-dialog v-model="showLogoutDialog" title="退出登录" :show-cancel-button="true" @confirm="confirmLogout">
			<view class="dialog-content">
				确定要退出登录吗？
			</view>
		</wd-dialog>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted } from 'vue';
	import { useNavigation } from '@/hooks/useNavigation';
	import { onLoad } from '@dcloudio/uni-app'


	// 使用导航 composable
	const {
		hasMultiplePages,   // 是否有多个页面在路由栈中
		isTabBarPage,       // 当前页面是否为 tabBar 页面
		checkRouteStack     // 检查当前路由栈状态的方法
	} = useNavigation()

	// 用户信息
	const userInfo = reactive({
		nickname: '里派用户',
		phone: '13800138000',
		avatar: ''
	});

	// 缓存大小
	const cacheSize = ref('4.8MB');

	// 应用版本
	const appVersion = ref('1.0.0');

	// 深色模式
	const isDarkMode = ref(false);

	// 登出对话框
	const showLogoutDialog = ref(false);

	/**
	 * 格式化手机号码为带星号格式
	 */
	const formatPhone = (phone) => {
		if (!phone) return '';
		return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
	};
	
	// 页面跳转
	const toPages = (item : any) => {
		if (item.type === 'nav') {
			uni.navigateBack()
		} else if (item.type === 'home') {
			// 这里是项目内部的跳转逻辑
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}

	/**
	 * 处理修改用户信息
	 */
	const handleEditInfo = () => {
		uni.navigateTo({
			url: '/pagesB/setting/editInfo'
		});
	};




	/**
	 * 清除缓存
	 */
	const clearCache = () => {
		uni.showLoading({
			title: '清理中...'
		});

		// 模拟清理过程
		setTimeout(() => {
			uni.hideLoading();
			cacheSize.value = '0KB';
			uni.showToast({
				title: '缓存已清理',
				icon: 'success'
			});
		}, 1000);
	};

	/**
	 * 查看隐私政策
	 */
	const handlePrivacyPolicy = () => {
		uni.navigateTo({
			url: '/pagesA/other/privacy'
		});
	};

	/**
	 * 查看用户协议
	 */
	const handleUserAgreement = () => {
		uni.navigateTo({
			url: '/pagesA/other/agreement'
		});
	};

	/**
	 * 检查更新
	 */
	const checkUpdate = () => {
		uni.showToast({
			title: '当前已是最新版本',
			icon: 'none'
		});
	};

	/**
	 * 显示退出登录确认框
	 */
	const handleLogout = () => {
		showLogoutDialog.value = true;
	};

	/**
	 * 确认退出登录
	 */
	const confirmLogout = () => {
		uni.showLoading({
			title: '退出中...'
		});

		// 模拟退出过程
		setTimeout(() => {
			uni.hideLoading();

			// 清除登录状态及相关缓存
			uni.removeStorageSync('token');
			uni.removeStorageSync('userInfo');

			// 跳转到登录页
			uni.reLaunch({
				url: '/pages/login/index'
			});
		}, 1000);
	};

	onMounted(() => {
		checkRouteStack()
		// 获取用户信息
		const userInfoStorage = uni.getStorageSync('userInfo');
		if (userInfoStorage) {
			Object.assign(userInfo, JSON.parse(userInfoStorage));
		}

		// 获取缓存大小
		uni.getStorageInfo({
			success: (res) => {
				const size = res.currentSize;
				if (size < 1024) {
					cacheSize.value = size + 'KB';
				} else {
					cacheSize.value = (size / 1024).toFixed(1) + 'MB';
				}
			}
		});

		// 获取应用版本
		// #ifdef APP-PLUS
		plus.runtime.getProperty(plus.runtime.appid, (res) => {
			appVersion.value = res.version;
		});
		// #endif
	});
</script>

<style lang="scss" scoped>
	/* 主容器 */
	.container {
		min-height: 100vh;
		background-color: transparent;
		position: relative;
		font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Segoe UI, Arial, Roboto, PingFang SC, sans-serif;
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* 导航栏背景 */
	.nav-bg-layer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(var(--status-bar-height) + 88rpx);
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
		z-index: -1;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	/* 页面背景 */
	.page-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #f8fafd 0%, #eef2f9 100%);
		z-index: -2;
	}

	/* 内容区域 */
	.content {
		position: relative;
		z-index: 2;
		padding: 30rpx;
	}

	/* 用户信息预览 */
	.user-preview {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

		.user-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			overflow: hidden;
			margin-right: 24rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 60rpx;
			}

			.default-avatar {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(135deg, #4080FF, #5E96FF);
				color: #fff;
				font-size: 60rpx;
				font-weight: bold;
			}
		}

		.user-detail {
			flex: 1;

			.user-name {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 8rpx;
			}

			.user-phone {
				font-size: 28rpx;
				color: #999;
			}
		}

		.arrow-icon {
			font-size: 44rpx;
			color: #ccc;
		}
	}

	/* 设置项区域 */
	.setting-section {
		margin-bottom: 30rpx;

		.section-title {
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 16rpx;
			padding-left: 16rpx;
		}

		.setting-list {
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		}

		.setting-item {
			padding: 28rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			.item-left {
				display: flex;
				align-items: center;

				.item-icon {
					font-size: 44rpx;
					margin-right: 20rpx;

					&.account-color {
						color: #4080FF;
					}

					&.security-color {
						color: #5AC8FA;
					}

					&.notice-color {
						color: #FF9500;
					}

					&.theme-color {
						color: #5E6687;
					}

					&.cache-color {
						color: #FF3B30;
					}

					&.privacy-color {
						color: #34C759;
					}

					&.agreement-color {
						color: #9013FE;
					}

					&.about-color {
						color: #4080FF;
					}
				}

				.item-title {
					font-size: 30rpx;
					color: #333;
				}
			}

			.item-right {
				display: flex;
				align-items: center;

				.arrow-icon {
					font-size: 44rpx;
					color: #ccc;
				}

				.cache-size,
				.version-text {
					font-size: 28rpx;
					color: #999;
					margin-right: 10rpx;
				}
			}
		}
	}

	/* 退出登录按钮 */
	.logout-container {
		margin-top: 60rpx;
		padding: 0 20rpx;
		margin-bottom: 50rpx;

		.logout-btn {
			background-color: #fff;
			color: #FF3B30;
			border: none;
			height: 96rpx;
			line-height: 96rpx;
			font-size: 32rpx;
			border-radius: 16rpx;
			font-weight: 500;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

			&:active {
				background-color: #f8f8f8;
			}
		}
	}

	/* 弹窗内容样式 */
	.dialog-content {
		padding: 30rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333;
	}
</style>