<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="设置" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
		</uni-nav-bar>

		<scroll-view class="page" scroll-y>
			<view class="setting-item" v-for="(item, index) in settingList" :key="index" @click="onItemClick(item)">
				<text class="item-title">{{ item.title }}</text>

				<!-- 不同类型的右侧内容 -->
				<view class="item-right" v-if="item.type === 'text'">
					<text :class="item.valueClass || 'item-value'">{{ item.value }}</text>
					<view class="item-arrow"></view>
				</view>

				<switch class="no-cross-switch" v-else-if="item.type === 'switch'" :checked="item.checked"
					@change="onSwitchChange(item, $event)" />

				<view class="item-arrow" v-else></view>
			</view>
		</scroll-view>
		<!-- 底部下一步按钮 -->
		<view class="bottom-btn">
			<button class="logout-btn" @click="logout">退出登录</button>
		</view>


	</view>



</template>

<script>
	export default {
		onReady: function(e) {},
		components: {

		},

		computed: {


		},
		created() {

		},
		onShow() {

		},
		onLoad() {

		},
		mounted() {},
		data() {
			return {
				message: '',
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				cacheSize: 0,
				settingList: [{
						title: '更改手机号码',
						type: 'arrow'
					},
					{
						title: '修改密码',
						type: 'arrow'
					},
					{
						title: '消息通知',
						type: 'switch',
						checked: false
					},
					{
						title: '清除缓存',
						type: 'text',
						value: '9.2M'
					},
					{
						title: '升级版本',
						type: 'text',
						value: '当前版本 2.9.8',
						valueClass: 'item-version'
					}
				]


			}
		},


		methods: {
			onItemClick(item) {
				// console.log('点击了：', item.title,item.title == '更改手机号码')
				if (item.title == '更改手机号码') {
					uni.redirectTo({
						url: '/pages/my/changePhone',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else if (item.title == '修改密码') {
					uni.redirectTo({
						url: '/pages/my/changePwd',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else if (item.title == '清除缓存') {
					uni.clearStorageSync();
					this.message = '清除成功'
					this.settingList[3].value = '0M'
					uni.showLoading({
						title: '清除中...',
						mask: true
					});
					setTimeout(() => {
						uni.showToast({
							title: '清除成功',
							icon: 'success'
						});
					}, 1000);
					setTimeout(() => {
						// 提交成功后跳转列表页
						uni.hideLoading();

					}, 3000);


				}
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出当前账号吗?',
					success: (res) => {
						if (res.confirm) {
							this.message = '退出成功'
							uni.showLoading({
								title: '退出中...',
								mask: true
							});
							setTimeout(() => {
								uni.showToast({
									title: '退出成功',
									icon: 'success'
								});
							}, 1000);
							setTimeout(() => {
								// 登出成功后跳转回登录页
								uni.hideLoading();



							}, 3000);

						}
					}
				})

			},
			onSwitchChange(item, e) {
				item.checked = e.detail.value
			},
			goBack() {
				uni.switchTab({
					url: '/pages/myIndex/myIndex',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

		},


	}
</script>
<style lang="scss">
	page {
		background: #f9f9f9;
	}
</style>
<style lang="scss" scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		background-color: #f9f9f9;
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 20px;
		box-sizing: border-box;
		background-color: #fff;
	}

	/* 底部按钮 */
	.bottom-btn {
		padding: 10px 15px 20px;
		background-color: #fff;
	}
</style>
<style scoped>
	/* 列表项 */
	.setting-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		padding: 15px 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	/* 标题文字 */
	.item-title {
		font-size: 16px;
		color: #333333;
		line-height: 1.4;
	}

	/* 右侧区域（文字+箭头） */
	.item-right {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	/* 右侧数值/版本文字 */
	.item-value {
		font-size: 14px;
		color: #333333;
	}

	.item-version {
		font-size: 14px;
		color: #999999;
	}

	/* 右侧箭头 */
	.item-arrow {
		display: inline-block;
		width: 5px;
		height: 5px;
		border-top: 2rpx solid #999;
		border-right: 2rpx solid #999;
		transform: rotate(45deg);
		margin-left: 10rpx;
		margin-right: 5px;
	}

	/* 开关样式适配 */
	/* switch {
		transform: scale(0.8);
	} */
	/* 底部按钮 */
	.logout-btn {

		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		font-size: 36rpx;
		border-radius: 12rpx;
		color: #666;
		background-color: #F3F3F3;

		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}

	/* 按钮点击态 */
	.logout-btn:active {
		background-color: #f5f5f5;
		opacity: 0.8;
	}


	.status-bar {
		width: 100vw;
		height: 46px;
	}
</style>
<style>
	::v-deep .uni-switch-input:before {
		background-color: #cccccd !important;
	}

	/* 隐藏 switch 关闭状态的 × 号 */
	.no-cross-switch::before {
		display: none !important;

	}

	.no-cross-switch {
		transform: scale(0.85);
		border-radius: 50rpx !important;
	}

	.no-cross-switch>>>.uni-switch-input-checked {
		background-color: #007aff !important;
	}
</style>