<template>
	<view class="content">
		<!-- 导航栏 -->
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="设置与帮助"
			@clickLeft="goBack"
			fixed
			color="#8B2316"
			height="140rpx"
			:border="false"
			backgroundColor="#eeeeee"
		></uni-nav-bar>
		
		
		
		<!-- 设置选项列表 -->
		<view class="settings-list">
			<!-- 消息通知 -->
			<view class="setting-item" @click="toggleNotification">
				<text class="setting-text">消息通知</text>
				<view class="setting-right">
					<text class="setting-status">已开启</text>
					
				</view>
			</view>
			
			<!-- 修改登录密码 -->
			<view class="setting-item" @click="goToChangePassword">
				<text class="setting-text">修改登录密码</text>
				<uni-icons type="right" size="20" color="#999"></uni-icons>
			</view>
			
			<!-- 更换手机号 -->
			<view class="setting-item" @click="goToChangeMobile">
				<text class="setting-text">更换手机号</text>
				<uni-icons type="right" size="20" color="#999"></uni-icons>
			</view>
			
			<!-- 版本更新 -->
			<view class="setting-item" @click="checkUpdate">
				<text class="setting-text">版本更新</text>
				<uni-icons type="right" size="20" color="#999"></uni-icons>
			</view>
			
			<!-- 关于肝胆相照 -->
			<view class="setting-item" @click="goToAbout">
				<text class="setting-text">关于肝胆相照</text>
				<uni-icons type="right" size="20" color="#999"></uni-icons>
			</view>
			
			<!-- 分享肝胆相照APP -->
			<view class="setting-item" @click="shareApp">
				<text class="setting-text">分享肝胆相照APP</text>
				<uni-icons type="right" size="20" color="#999"></uni-icons>
			</view>
			
			<!-- 肝胆相照直播群 -->
			<view class="setting-item" @click="goToLiveGroup">
				<text class="setting-text">肝胆相照直播群</text>
				<uni-icons type="right" size="20" color="#999"></uni-icons>
			</view>
			
			<!-- 微信关联 -->
			<view class="setting-item" @click="goToWechatLink">
				<text class="setting-text">微信关联</text>
				<uni-icons type="right" size="20" color="#999"></uni-icons>
			</view>
			
			<!-- 清除缓存 -->
			<view class="setting-item" @click="clearCache">
				<text class="setting-text">清除缓存</text>
				<view class="setting-right">
					<text class="cache-size">1.39MB</text>
					<uni-icons type="right" size="20" color="#999"></uni-icons>
				</view>
			</view>
			
			<!-- 意见反馈 -->
			<view class="setting-item" @click="goToFeedback">
				<text class="setting-text">意见反馈</text>
				<uni-icons type="right" size="20" color="#999"></uni-icons>
			</view>
			
			<!-- 注销账户 -->
			<view class="setting-item" @click="goToDeleteAccount">
				<text class="setting-text">注销账户</text>
				<uni-icons type="right" size="20" color="#999"></uni-icons>
			</view>
			
			<!-- 注册协议 -->
			<view class="setting-item" @click="goToAgreement">
				<text class="setting-text">注册协议</text>
				<uni-icons type="right" size="20" color="#999"></uni-icons>
			</view>
			
			<!-- 隐私政策 -->
			<view class="setting-item" @click="goToPrivacy">
				<text class="setting-text">隐私政策</text>
				<uni-icons type="right" size="20" color="#999"></uni-icons>
			</view>
		</view>
		
		<!-- 退出登录按钮 -->
		<view class="logout-section">
			<button class="logout-btn" @click="logout">退出登录</button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow } from "@dcloudio/uni-app";
	
	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};
	
	// 切换消息通知
	const toggleNotification = () => {
		// 实现消息通知开关逻辑
		uni.showToast({
			title: '消息通知设置',
			icon: 'none'
		});
	};
	
	// 跳转到修改密码页面
	const goToChangePassword = () => {
		uni.navigateTo({
			url: '/pages_app/changePassword/index'
		});
	};
	
	// 跳转到更换手机号页面
	const goToChangeMobile = () => {
		uni.navigateTo({
			url: '/pages_app/changeMobile/changeMobile'
		});
	};
	
	// 检查版本更新
	const checkUpdate = () => {
		uni.showToast({
			title: '检查版本更新',
			icon: 'none'
		});
	};
	
	// 跳转到关于页面
	const goToAbout = () => {
		uni.showToast({
			title: '关于肝胆相照',
			icon: 'none'
		});
	};
	
	// 分享APP
	const shareApp = () => {
		uni.showToast({
			title: '分享APP',
			icon: 'none'
		});
	};
	
	// 跳转到直播群页面
	const goToLiveGroup = () => {
		uni.navigateTo({
			url: '/pages_app/groupMsg/groupMsg'
		});
	};
	
	// 跳转到微信关联页面
	const goToWechatLink = () => {
		uni.navigateTo({
			url: '/pages_app/wechatContact/wechatContact'
		});
	};
	
	// 清除缓存
	const clearCache = () => {
		uni.showModal({
			title: '提示',
			content: '确定要清除缓存吗？',
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '缓存已清除',
						icon: 'success'
					});
				}
			}
		});
	};
	
	// 跳转到意见反馈页面
	const goToFeedback = () => {
		uni.showToast({
			title: '意见反馈',
			icon: 'none'
		});
	};
	
	// 跳转到注销账户页面
	const goToDeleteAccount = () => {
		uni.showModal({
			title: '注销账户',
			content: '确定要注销账户吗？此操作不可逆！',
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '注销账户',
						icon: 'none'
					});
				}
			}
		});
	};
	
	// 跳转到注册协议页面
	const goToAgreement = () => {
		uni.showToast({
			title: '注册协议',
			icon: 'none'
		});
	};
	
	// 跳转到隐私政策页面
	const goToPrivacy = () => {
		uni.showToast({
			title: '隐私政策',
			icon: 'none'
		});
	};
	
	// 退出登录
	const logout = () => {
		uni.showModal({
			title: '退出登录',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					// 清除登录状态
					uni.clearStorageSync();
					// 跳转到登录页面
					uni.reLaunch({
						url: '/pages_app/login/login'
					});
				}
			}
		});
	};
</script>

<style scoped>
	.content {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 160rpx; /* 为固定的退出登录按钮留出空间 */
	}
	
	/* 导航栏样式 */
	.nav-bar {
		display: flex;
		align-items: center;
		height: 88rpx;
		background-color: #ffffff;
		padding: 0 30rpx;
		position: relative;
	}
	
	.nav-left {
		position: absolute;
		left: 30rpx;
		z-index: 1;
	}
	
	.nav-icon {
		font-size: 40rpx;
		color: #ff0000;
		font-weight: bold;
	}
	
	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		color: #ff0000;
		font-weight: 500;
	}
	
	/* 设置列表样式 */
	.settings-list {
		background-color: transparent;
		
	}
	
	.setting-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background-color: #ffffff;
	}
	.setting-item:nth-child(2){
		margin-top: 20rpx;
	}
	.setting-item:last-child {
		border-bottom: none;
	}
	
	.setting-text {
		font-size: 32rpx;
		color: #333333;
	}
	
	.setting-right {
		display: flex;
		align-items: center;
	}
	
	.setting-status {
		font-size: 28rpx;
		color: #666666;
		margin-right: 20rpx;
	}
	
	.cache-size {
		font-size: 28rpx;
		color: #666666;
		margin-right: 20rpx;
	}
	
	.setting-arrow {
		font-size: 32rpx;
		color: #cccccc;
	}
	
	/* 退出登录按钮样式 */
	.logout-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx;
		background-color: #fff;
		border-top: 1rpx solid #e0e0e0;
		z-index: 999;
	}
	
	.logout-btn {
		width: 100%;
		height: 88rpx;
		background-color: #ffffff;
		border: 2rpx solid #8B2316;
		border-radius: 10rpx;
		color: #8B2316;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.logout-btn:active {
		background-color: #fff0f0;
	}
</style>
