<template>
	<view>
		<view class="body">
			<view class="list">
				<view class="list_content">
					<view class="list_item fa sb">
						<view class="list_title">未成年人模式</view>
						<!-- <view class="list_name fa">未开启<image src="/static/images/more.png" mode="widthFix"></image>
						</view> -->
						<view>
							<switch :checked="enabled" color="#CCA2FD" style="transform:scale(0.8)"
								@change="switchChange" />
							{{ enabled ? '已开启' : '已关闭' }}
						</view>
					</view>
					<!-- <view class="list_item fa sb">
						<view class="list_title">实名认证</view>
						<view class="list_name fa">
							<image src="/static/images/more.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="list_item fa sb">
						<view class="list_title">推送通知</view>
						<view class="list_name fa">系统默认开启<image src="/static/images/more.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="list_item fa sb">
						<view class="list_title">互动权限</view>
						<view class="list_name fa">
							<image src="/static/images/more.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="list_item fa sb">
						<view class="list_title">偏好设置</view>
						<view class="list_name fa">
							<image src="/static/images/more.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="list_item fa sb">
						<view class="list_title">云端备份聊天记录</view>
						<view class="list_name fa">
							<image src="/static/images/more.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="list_item fa sb">
						<view class="list_title">下载聊天记录</view>
						<view class="list_name fa">SVIP专属<image src="/static/images/more.png" mode="widthFix"></image>
						</view>
					</view> -->
				</view>
				<!-- <view class="list_content">
					<view class="list_item fa sb">
						<view class="list_title">帮助与反馈</view>
						<view class="list_name fa">
							<image src="/static/images/more.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="list_item fa sb">
						<view class="list_title">检查更新</view>
						<view class="list_name fa">
							<image src="/static/images/more.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="list_item fa sb">
						<view class="list_title">第三方信息共享清单</view>
						<view class="list_name fa">
							<image src="/static/images/more.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="list_item fa sb">
						<view class="list_title">关于自己</view>
						<view class="list_name fa">
							<image src="/static/images/more.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="list_item fa sb">
						<view class="list_title">账户注销</view>
						<view class="list_name fa">
							<image src="/static/images/more.png" mode="widthFix"></image>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="opt">
			<view class="opt_module">
				<view class="opt_data">
					<view class="opt_btn faj" @click="logoutClick">
						退出登录
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed, watchEffect } from 'vue';
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import { useLoginStore } from '@/stores/login';
import { useConversationStore } from '@/stores/conversation';
import { useInformStore } from '@/stores/inform';
import { useMessageStore } from '@/stores/message';
import { EMClient } from '@/EaseIM';
import { emConnect } from '@/EaseIM/imApis';
import {
	Logout
} from '@/utils/api.js'
import notHave from '@/components/not-have.vue';
import topSafety from '@/components/top-safety.vue';
import tabBar from '@/components/tab-bar.vue';
const enabled = ref(false);
const { closeEaseIM } = emConnect();
const loginStore = useLoginStore();
const informStore = useInformStore();
const conversationStore = useConversationStore();
const messageStore = useMessageStore();
const initPinia = async () => {
	loginStore.$reset();
	informStore.$reset();
	conversationStore.$reset();
	messageStore.$reset();
};

const switchChange = (e) => {
	const newEnabled = e.detail.value;
	enabled.value = newEnabled;

	if (newEnabled) {
		// 开启时保存到本地存储
		uni.setStorageSync('underAgeEnabled', true);
	} else {
		// 关闭时删除本地存储
		uni.removeStorageSync('underAgeEnabled');
	}
}

onLoad(() => {
	// 页面加载时从本地存储获取状态
	const storedEnabled = uni.getStorageSync('underAgeEnabled');
	if (storedEnabled !== '') {
		enabled.value = storedEnabled;
	}
});
const logoutClick = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: (res) => {

			if (res.confirm) {
				logout()
			}
		}
	});
}
const logout = () => {
	Logout({}).then(res => {
		if (res.code == 1) {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				position: 'top'
			})
			uni.removeStorageSync('token');
			uni.removeStorageSync('userinfo');
			uni.removeStorageSync('loverBasicList');
			uni.setStorageSync('INFORM', []);
			closeEaseIM();
			initPinia();
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/login/index'
				});
			}, 1000);
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				position: 'top'
			})
		}
	})
};
</script>

<style>
page {
	background: #F6F8FA;
}
</style>
<style>
.body {
	position: relative;
	padding: 38rpx 40rpx;
}

.list {
	position: relative;
}

.list_content {
	position: relative;
	margin: 0 0 30rpx 0;
	padding: 18rpx 40rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
}

.list_item {
	position: relative;
	padding: 15rpx 0;
}

.list_title {
	font-weight: 500;
	font-size: 30rpx;
	color: #333333;
	line-height: 42rpx;
}

.list_name {
	font-weight: 400;
	font-size: 28rpx;
	color: #9E9E9E;
	line-height: 42rpx;
}

.list_name image {
	margin: 0 0 0 10rpx;
	width: 8rpx;
	height: 8rpx;
}

.opt {
	position: relative;
	height: 150rpx;
}

.opt_module {
	position: fixed;
	padding: 5rpx 0 70rpx 0;
	height: 85rpx;
	width: 100%;
	background: #F6F8FA;
	bottom: 0;
	left: 0;
	box-sizing: content-box;
	z-index: 2;
}

.opt_data {
	padding: 5rpx 50rpx;
	font-size: 28rpx;
}

.opt_btn {
	padding: 24rpx 0;
	font-weight: 400;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	background: #CDCDCD;
	border-radius: 12rpx;
}
</style>