<template>
	<view class="page">

		<!-- 用户信息卡片 -->
		<view @click="Service.GoPage('/pages/userFunc/setUserData')" class="user-card">
			<img v-if="userInfo.avatar" :src="Service.GetMateUrlByImg(userInfo.avatar)"
				style="width: 100rpx;  height: 100rpx;  border-radius: 50%;  border: 2rpx solid #fff;  " alt="" />
			
			<view class="user-info">
				<text class="user-name">{{ userInfo.nick }}</text>
				<view  style="color: #fff; font-size: 24rpx; " >{{  phone(userInfo.phone) }}</view>
			</view>
			<u-icon name="arrow-right" size="34rpx" color="#fff"></u-icon>
		</view>

		<!-- 设置列表 -->
		<view class="settings-list">
			<!-- 账户安全 -->
			<view class="settings-section">
				<view class="section-title">账户安全</view>
				<view v-for="(accountItem,accountIndex) in account" :key="accountIndex"
					@click="Service.GoPage(accountItem.path)" class="section-item">
					<view class="" style="display: flex; align-items: center;">
						<view class="icon" style=" ">
							<img class="icon-img" :src="Service.GetpayImg(accountItem.icon)" alt="" />
						</view>
						<text style="margin-left: 14rpx; font-weight: 500; ">{{accountItem.name}}</text>
					</view>

				</view>
			</view>


			<!-- 退出登录按钮 -->
			<view class=""
				style=" width: 100%; position: fixed; bottom: 0;  left: 0; background-color: #f5f5f5; padding: 20rpx 30rpx; ">
				<view class="" @click="handleLogout()"
					style="width: 100%; color: #fff; background-color: #FF6A00; padding: 20rpx ; text-align: center; border-radius: 20rpx; ">
					退出登录
				</view>
			</view>


		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { Service } from '@/Service/Service';
	import { UserService } from "@/Service/api/UserService"
	import { onLoad, onShow } from '@dcloudio/uni-app';

	const userInfo = ref({
		avatar: '',
		nick: '张小明',
		phone: '',
		province: '',
		city: '',
		county: ''
	});


	
	onLoad(()=>{
		getUserInfo();
	})
	

	const getUserInfo = () => {
		UserService.GetUserInfo().then(res => {
			if (res.code == 0) {
				userInfo.value = res.data.info;
			}
		});
	};


	const account = ref([
		{
			name: '修改密码',
			icon: '/static/userFunc/set/change.png',
			path: '/pages/login/changgePassword'
		},
		{
			name: '修改手机号',
			icon: '/static/userFunc/set/phone.png',
			path: '/pages/login/changePhone'
		},
		{
			name: '修改支付密码',
			icon: '/static/userFunc/set/password.png',
			path: '/pages/login/changePay'
		}
	])
	const phone=(data:any)=>{
		return String(data).slice(0, 3) + '****' + String(data).slice(-4)
	}
	
	const handleLogout = () => {
		uni.showModal({
			title: '退出登录',
			content: '确定要退出当前账号吗？',
			success: (res) => {
				if (res.confirm) {
					Service.OffUserToken()
					Service.GoPageDelse('/pages/login/login')
				}
			}
		});
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #f5f5f5;
	}


	// 图标
	.icon {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: #FFEDD5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-img {
		width: 32rpx;
		height: 32rpx;
	}

	/* 用户信息卡片 */
	.user-card {
		margin: 30rpx;
		border-radius: 20rpx;
		background: linear-gradient(to right, #F97316, #FB923C);
		padding: 40rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.user-avatar {
		background-color: #FFFFFF;
		padding: 10rpx;
	}

	.user-info {
		margin-left: 30rpx;
		flex: 1;
	}

	.user-name {
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: 500;
		margin-bottom: 10rpx;
		display: block;
	}

	.user-level {
		width: fit-content;
		font-size: 18rpx;
		color: #fff;
		background-color: rgba(255, 255, 255, 0.2);
		padding: 4rpx 20rpx;
		border-radius: 24rpx;
	}

	/* 设置列表 */
	.settings-list {
		padding: 0 30rpx;
	}

	.settings-section {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		padding: 30rpx;
	}

	.section-title {
		font-size: 28rpx;
		color: #6B7280;
		font-weight: 600;
	}

	.section-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #e2e2e2;

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

	.u-cell {
		height: 100rpx;
		font-size: 32rpx;
		--u-cell-value-color: #999999;
		--u-cell-title-color: #333333;
		--u-cell-arrow-size: 40rpx;
	}

	/* 版本信息 */
	.version-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 60rpx;

	}

	.version-text {
		font-size: 28rpx;
		color: #333333;
	}

	.version-number {
		font-size: 28rpx;
		color: #999999;
		margin-right: 10rpx;
	}

	.check-update {
		font-size: 24rpx;
		color: #FF6600;
		background-color: #FFF7ED;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 6rpx 16rpx;
		border-radius: 15rpx;
	}

	/* 退出登录按钮 */
	.logout-btn {
		margin: 0 30rpx;
	}
</style>