<template>
	<view class="profile-container">
		<!-- 背景图片 - 固定在容器上 -->
		<image class="background-image" src="/static/square/squearbj.png" mode="aspectFill"></image>
		<!-- 可替换背景装饰层 -->
		<!-- <view class="replaceable-bg-layer">
			<image class="replaceable-bg-overlay-image" :src="replaceableBgOverlay" mode="aspectFill"></image>
		</view> -->
		<!-- Header组件 -->
		<view class="nav-back" @tap="goBack">
			<text class="nav-back-icon">←</text>
		</view>
		<view class="profile-scroll">
			<!-- 右上角模块 -->
			<view class="top-right-module">
				<view class="level-box">
					<text class="level-label">LV</text>
					<text class="level-value">{{ fanLevel }}</text>
				</view>
			</view>
			<!-- 上半部分：用户信息卡片 -->
			<view class="top-section">
				<!-- 用户信息卡片 -->
				<view class="user-info-card">
					<!-- 上半部分：头像和用户信息左右布局 -->
					<view class="user-main-info">
						<view @tap="handleAvatarClick" class="avatar-container">
							<Avatar :key="avatarKey" :userId="uid" :size="182.4" :borderWidth="6" :showLevel="false"
								:level="fanLevel" :avatarUrl="userAvatarUrl" />
						</view>
						<view class="user-text-info">
							<!-- 昵称 -->
							<view class="info-row">
								<text
									style="font-size: 30rpx;text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);color: #FFF9E7;min-width: 128rpx;"
									class="info-value">{{ nickname }}</text>
								<view class="edit-btn" @tap="handleChangeNickname">
									<image class="edit-nickname-btn" src="/static/icon/edit-nickname.png"
										mode="aspectFit"></image>
									<view class="edit-nickname-text">
										<text class="edit-nickname-placeholder">修改昵称
										</text>
									</view>
								</view>
							</view>
							<view class="info-row-wrapper">
								<!-- DID -->
								<view class="info-row">
									<text class="info-label">DID</text>
									<view class="address-row">
										<text class="info-value uid-value">{{ uid }}</text>
										<!-- <image class="toggle-icon"
											:src="showBlockNumber ? '/static/icon/show.png' : '/static/icon/hide.png'"
											mode="aspectFit" @tap="copyUid"></image> -->
									</view>
								</view>
								<!-- 链上地址 -->
								<view class="info-row">
									<text class="info-label">链上地址</text>
									<view class="address-row">
										<text class="info-value address-value" @longpress="copyAddress">{{
											displayAddress
										}}</text>
										<view class="toggle-btn" @tap="showBlockNumber = !showBlockNumber">
											<image class="toggle-icon"
												:src="showBlockNumber ? '/static/icon/show.png' : '/static/icon/hide.png'"
												mode="aspectFit"></image>
										</view>
									</view>
								</view>
								<!-- 手机号 -->
								<view class="info-row">
									<text class="info-label">注册手机</text>
									<view class="address-row">
										<text class="info-value" v-if="mobile">{{ displayMobile }}</text>
										<view class="toggle-btn" @tap="toggleMobileDisplay">
											<image class="toggle-icon"
												:src="showMobile ? '/static/icon/show.png' : '/static/icon/hide.png'"
												mode="aspectFit"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 下半部分：白色背景区域 -->
			<view class="bottom-section">
				<view class="content-area">
					<!-- 我的资产 -->
					<view class="section-bg">
						<view class="section-title">我的资产</view>
						<view class="assets-grid">
							<view class="asset-card" @tap="handleAssetClick('myWorks')">
								<image class="asset-icon" src="/static/icon/dazi.png" mode="aspectFit"></image>
								<text class="asset-text">个人中心</text>
								<!-- <text class="arrow">›</text> -->
							</view>
							<view class="asset-card" @tap="handleAssetClick('starbook')">
								<image class="asset-icon" src="/static/icon/starbook.png" mode="aspectFit"></image>
								<text class="asset-text">我的星册</text>
								<!-- <text class="arrow">›</text> -->
							</view>
						</view>
					</view>

					<!-- 服务与工具 -->
					<view class="section-bg">
						<view class="section-title">服务与工具</view>
						<view class="service-buttons-container">
							<!-- 新手指引入口 -->
							<view class="service-button" @tap="handleGuideClick">
								<image class="service-icon" src="/static/icon/onboarding.png" mode="aspectFit"></image>
								<text class="service-text">新手指引</text>
								<text v-if="guideClaimableCount > 0" class="guide-badge">{{ guideClaimableCount
								}}</text>
							</view>
							<view class="service-button" @tap="handleChangeNickname">
								<image class="service-icon" src="/static/icon/edit-nickname.png" mode="aspectFit">
								</image>
								<text class="service-text">修改昵称</text>
							</view>
							<view class="service-button" @tap="handleChangePassword">
								<image class="service-icon" src="/static/icon/edit-password.png" mode="aspectFit">
								</image>
								<text class="service-text">修改密码</text>
							</view>
							<view class="service-button">
								<image class="service-icon" src="/static/icon/edit-password.png" mode="aspectFit">
								</image>
								<text class="service-text">APP介绍</text>
							</view>
							<!-- <view class="service-button" @tap="handleSwitchRole">
							<image class="service-icon" src="/static/icon/switch-account.png" mode="aspectFit"></image>
							<text class="service-text">添加身份</text>
						</view> -->
							<view class="service-button" @tap="handleDeleteAccount">
								<image class="service-icon" src="/static/icon/logout.png" mode="aspectFit"></image>
								<text class="service-text">注销账号</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 修改昵称弹窗 -->
				<view class="nickname-modal" v-if="showNicknameModal" @tap="closeNicknameModal">
					<view class="modal-content" @tap.stop>
						<view class="modal-title">修改昵称</view>
						<input class="modal-input" v-model="newNickname" placeholder="请输入新昵称" maxlength="20" />
						<view class="modal-buttons">
							<button class="modal-btn-cancel" @tap="closeNicknameModal">取消</button>
							<button class="modal-btn-confirm" @tap="confirmChangeNickname">确认</button>
						</view>
					</view>
				</view>

				<!-- 修改密码弹窗 -->
				<view class="password-modal" v-if="showPasswordModal" @tap="closePasswordModal">
					<view class="modal-content" @tap.stop>
						<view class="modal-title">修改密码</view>
						<!-- 旧密码输入框 -->
						<view class="modal-password-wrapper">
							<input class="modal-password-input" :type="showOldPassword ? 'text' : 'password'"
								v-model="oldPassword" placeholder="请输入旧密码" placeholder-class="input-placeholder" />
							<view class="modal-eye-icon" @click="showOldPassword = !showOldPassword">
								<text class="eye-text">{{ showOldPassword ? '👁️' : '👁️‍🗨️' }}</text>
							</view>
						</view>
						<!-- 新密码输入框 -->
						<view class="modal-password-wrapper">
							<input class="modal-password-input" :type="showNewPassword ? 'text' : 'password'"
								v-model="newPassword" placeholder="请输入新密码" placeholder-class="input-placeholder" />
							<view class="modal-eye-icon" @click="showNewPassword = !showNewPassword">
								<text class="eye-text">{{ showNewPassword ? '👁️' : '👁️‍🗨️' }}</text>
							</view>
						</view>
						<view class="modal-buttons">
							<button class="modal-btn-cancel" @tap="closePasswordModal">取消</button>
							<button class="modal-btn-confirm" @tap="confirmChangePassword">确认</button>
						</view>
					</view>
				</view>

				<!-- 添加身份弹窗 -->
				<view class="add-identity-modal" v-if="showAddIdentityModal" @tap="closeAddIdentityModal">
					<view class="modal-content" @tap.stop>
						<view class="modal-title">添加身份</view>
						<view class="modal-subtitle">选择您喜欢的明星，成为TA的粉丝</view>

						<!-- 明星选择列表 -->
						<view class="star-list">
							<view v-for="star in fanIdentitiesList" :key="star.star_id" class="star-item"
								:class="{ 'star-item-selected': selectedStarId === star.star_id }"
								@tap="selectStar(star.star_id)">
								<view class="star-info">
									<text class="star-name">{{ star.name }}</text>
									<text class="star-tag" v-if="star.tag">{{ star.tag }}</text>
								</view>
								<view class="star-radio">
									<view v-if="selectedStarId === star.star_id" class="star-radio-checked"></view>
								</view>
							</view>
						</view>

						<!-- 昵称输入框 -->
						<input class="modal-input" v-model="newIdentityNickname" placeholder="请输入您的新昵称"
							maxlength="20" />

						<view class="modal-buttons">
							<button class="modal-btn-cancel" @tap="closeAddIdentityModal">取消</button>
							<button class="modal-btn-confirm" @tap="confirmAddIdentity">确认</button>
						</view>
					</view>
				</view>

				<!-- 身份切换下拉列表 -->
				<view class="identity-dropdown-modal" v-if="showIdentityDropdown" @tap="closeIdentityDropdown">
					<view class="identity-dropdown-content" @tap.stop>
						<view class="identity-dropdown-title">切换粉丝身份</view>
						<view class="identity-list">
							<view v-for="identity in myFanIdentities" :key="identity.star_id" class="identity-item"
								:class="{
									'identity-item-active': identity.star_id === currentStarId,
									'identity-item-disabled': identity.star_id === currentStarId
								}" @tap="handleSwitchIdentity(identity.star_id)">
								<view class="identity-info">
									<view class="identity-main">
										<text class="identity-star-name">{{ identity.star_name }}</text>
										<text class="identity-star-tag">{{ identity.star_tag }}</text>
									</view>
									<text class="identity-nickname">昵称: {{ identity.nickname }}</text>
								</view>
								<view v-if="identity.star_id === currentStarId" class="identity-current-badge">
									<text class="identity-current-text">当前身份</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 注销账号确认弹窗 -->
				<view class="confirm-modal" v-if="showDeleteAccountModal" @tap="closeDeleteAccountModal">
					<view class="modal-content" @tap.stop>
						<view class="modal-title">注销账号</view>
						<view class="modal-message">注销账号后，您的所有数据将被永久删除且无法恢复。确定要注销账号吗？</view>
						<view class="modal-buttons">
							<button class="modal-btn-cancel" @tap="closeDeleteAccountModal">取消</button>
							<button class="modal-btn-confirm danger" @tap="confirmDeleteAccount">确定注销</button>
						</view>
					</view>
				</view>

				<!-- 退出登录确认弹窗 -->
				<view class="confirm-modal" v-if="showLogoutModal" @tap="closeLogoutModal">
					<view class="modal-content" @tap.stop>
						<view class="modal-title">退出登录</view>
						<view class="modal-message">确定要退出登录吗？</view>
						<view class="modal-buttons">
							<button class="modal-btn-cancel" @tap="closeLogoutModal">取消</button>
							<button class="modal-btn-confirm" @tap="confirmLogout">确定</button>
						</view>
					</view>
				</view>

				<!-- 修改头像弹窗 -->
				<view class="avatar-modal" v-if="showAvatarModal" @tap="closeAvatarModal">
					<view class="modal-content" @tap.stop>
						<view class="modal-title">修改头像</view>

						<!-- 头像预览 -->
						<view class="avatar-preview">
							<Avatar :key="avatarKey" :userId="uid" :size="200" :borderWidth="6"
								:avatarUrl="userAvatarUrl" />
						</view>

						<!-- 上传按钮 -->
						<button class="upload-avatar-btn" @tap="handleUploadAvatar" :disabled="uploadingAvatar">
							{{ uploadingAvatar ? '上传中...' : '上传新头像' }}
						</button>

						<view class="upload-hint">支持JPG、PNG格式，大小不超过10MB</view>

						<view class="modal-buttons">
							<button class="modal-btn-cancel" @tap="closeAvatarModal">取消</button>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 退出登录按钮 -->
		<view class="logout-section" @tap="handleLogout">
			<text class="logout-button">退出登录</text>
		</view>

		<!-- 新手引导弹窗 -->
		<GuideModal :visible="showGuideModal" @close="showGuideModal = false" @updated="handleGuideUpdated" />

		<!-- 全局引导遮罩 -->
		<GuideOverlay />
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { useStore } from 'vuex';
import { onReady } from "@dcloudio/uni-app";
import Header from '../components/Header.vue';
import Avatar from '../components/Avatar.vue';
import { getUserProfileApi, deleteAccountApi, updateNicknameApi, updatePasswordApi, getFanIdentitiesApi, addFanIdentityApi, getMyFanIdentitiesApi, switchFanIdentityApi, getOssSignatureApi, updateAvatarApi } from '@/utils/api';
import { validateNickname } from '@/utils/validator.js';
import { clearAvatarCache } from '@/utils/avatarCache';
import GuideModal from '@/pages/tasks/GuideModal.vue';
import GuideOverlay from '@/components/GuideOverlay.vue';
import {
	getClaimableRewardCount
} from '@/utils/guideConfig.js';

const store = useStore();

// 用户信息
const nickname = ref('');
const uid = ref('');
const blockchainAddress = ref('');
const fanLevel = ref(0);
const fanTag = ref('');
const loading = ref(false);

// 修改昵称弹窗
const showNicknameModal = ref(false);
const newNickname = ref('');

// 修改密码弹窗
const showPasswordModal = ref(false);
const oldPassword = ref('');
const newPassword = ref('');
const showOldPassword = ref(false);

// 新手引导
const showGuideModal = ref(false);
const guideClaimableCount = computed(() => getClaimableRewardCount());

// 引导更新回调
const handleGuideUpdated = () => {
	console.log('[Profile] Guide updated');
};
const showNewPassword = ref(false);

// 添加身份弹窗
const showAddIdentityModal = ref(false);
const fanIdentitiesList = ref([]);
const selectedStarId = ref(null);
const newIdentityNickname = ref('');

// 身份切换下拉列表
const showIdentityDropdown = ref(false);
const myFanIdentities = ref([]);
const currentStarId = ref(null);

// 注销账号确认弹窗
const showDeleteAccountModal = ref(false);

// 退出登录确认弹窗
const showLogoutModal = ref(false);

// 修改头像弹窗
const showAvatarModal = ref(false);
const userAvatarUrl = ref('');
const uploadingAvatar = ref(false);
const avatarKey = ref(0); // 用于强制刷新Avatar组件

// 手机号
const mobile = ref('');

// 显示手机号/地址
const showBlockNumber = ref(false);
const showMobile = ref(false);

// 可替换背景叠加层图片（类似微信更换主页背景）
const replaceableBgOverlay = ref('/static/sucai/image-06.png');


// 更新背景叠加层方法
const updateBgOverlay = (newOverlayImage) => {
	replaceableBgOverlay.value = newOverlayImage;
};

// 显示手机号（根据showMobile状态显示脱敏或未脱敏）
const displayMobile = computed(() => {
	console.log('displayMobile computed, mobile:', mobile.value, 'showMobile:', showMobile.value);
	if (!mobile.value) return '';
	// showMobile为true时显示完整号码，false时显示脱敏号码
	if (showMobile.value) {
		return mobile.value;
	}
	// 脱敏显示：显示前3位和后4位
	const phone = mobile.value;
	return phone.length === 11 ? phone.slice(0, 3) + '****' + phone.slice(-4) : phone;
});

// 显示截断后的区块链地址
const displayAddress = computed(() => {
	const address = blockchainAddress.value;
	console.log('displayAddress computed, address:', address, 'showBlockNumber:', showBlockNumber.value);
	// 如果没有地址，显示默认地址
	if (!address) return '0xabcd...123c';
	// showBlockNumber为true时显示完整地址，false时显示截断地址
	if (showBlockNumber.value) return address;
	if (address.length <= 20) return address;
	// 显示前4个字符和后4个字符
	return address.substring(0, 4) + '...' + address.substring(address.length - 4);
});

// 获取用户信息
const fetchUserInfo = async (forceRefresh = false) => {
	loading.value = true;
	try {
		// 每次进入页面都从API获取最新数据
		const res = await getUserProfileApi();

		if (res.code === 200 && res.data) {
			const apiData = res.data;

			// 读取旧缓存数据（保留某些字段）
			let oldCachedUser = null;
			const oldCachedUserStr = uni.getStorageSync('user');
			if (oldCachedUserStr) {
				try {
					oldCachedUser = JSON.parse(oldCachedUserStr);
				} catch (e) {
					console.error('解析旧缓存失败:', e);
				}
			}

			// 转换API数据结构为缓存格式
			const userForCache = {
				uid: apiData.uid,
				nickname: apiData.nickname,
				avatar_url: apiData.avatar_url || '',
				// 从 current_identity 转换为 fan_identity
				fan_identity: apiData.current_identity ? {
					identity_id: apiData.current_identity.identity_id,
					name: apiData.current_identity.identity_name,
					tag: apiData.current_identity.tag
				} : (oldCachedUser?.fan_identity || null),
				fan_level: apiData.current_identity?.level || 0,
				crystal_balance: apiData.current_identity?.crystal_balance || 0,
				// 保留旧缓存中的其他字段（如果API没有返回）
				blockchain_address: apiData.blockchain_address || oldCachedUser?.blockchain_address || '',
				assets_num: apiData.assets_num !== undefined ? apiData.assets_num : (oldCachedUser?.assets_num || 0),
				slot_limit: apiData.slot_limit !== undefined ? apiData.slot_limit : (oldCachedUser?.slot_limit || 3),
				starbook_limit: apiData.starbook_limit !== undefined ? apiData.starbook_limit : (oldCachedUser?.starbook_limit || 3),
				mobile: apiData.mobile || oldCachedUser?.mobile || ''
			};

			// 覆盖式更新缓存
			uni.setStorageSync('user', JSON.stringify(userForCache));

			// 更新显示
			nickname.value = userForCache.nickname || '';
			uid.value = userForCache.uid || '';
			fanLevel.value = userForCache.fan_level || 0;
			fanTag.value = userForCache.fan_identity?.name || '';
			blockchainAddress.value = userForCache.blockchain_address || '';
			userAvatarUrl.value = userForCache.avatar_url || '';
			mobile.value = userForCache.mobile || uni.getStorageSync('login_mobile') || '';
		}
	} catch (error) {
		console.error('获取用户信息失败:', error);

		// 如果API调用失败，尝试从缓存读取
		const cachedUserStr = uni.getStorageSync('user');
		if (cachedUserStr) {
			try {
				const cachedUser = JSON.parse(cachedUserStr);
				nickname.value = cachedUser.nickname || '';
				uid.value = cachedUser.uid || '';
				fanLevel.value = cachedUser.fan_level || 0;
				fanTag.value = cachedUser.fan_identity?.tag || '';
				blockchainAddress.value = cachedUser.blockchain_address || '';
				userAvatarUrl.value = cachedUser.avatar_url || '';
				mobile.value = cachedUser.mobile || uni.getStorageSync('login_mobile') || '';
			} catch (e) {
				console.error('解析缓存用户信息失败:', e);
			}
		}

		uni.showToast({
			title: error.message || '获取用户信息失败',
			icon: 'none'
		});
	} finally {
		loading.value = false;
	}
};

// 切换手机号显示
const toggleMobileDisplay = () => {
	console.log('toggleMobileDisplay called, showMobile:', showMobile.value);
	showMobile.value = !showMobile.value;
};

// 复制UID
const copyUid = () => {
	if (!uid.value) {
		uni.showToast({ title: 'UID为空', icon: 'none' });
		return;
	}
	uni.setClipboardData({
		data: uid.value,
		success: () => uni.showToast({ title: '已复制UID', icon: 'success' }),
		fail: () => uni.showToast({ title: '复制失败', icon: 'none' })
	});
};

// 查看昵称（复制）
const handleViewNickname = () => {
	uni.setClipboardData({
		data: nickname.value,
		success: () => uni.showToast({ title: '已复制昵称', icon: 'success' }),
		fail: () => uni.showToast({ title: '复制失败', icon: 'none' })
	});
};

// 复制区块链地址
const copyAddress = () => {
	if (!blockchainAddress.value) {
		uni.showToast({
			title: '地址为空',
			icon: 'none'
		});
		return;
	}

	uni.setClipboardData({
		data: blockchainAddress.value,
		success: () => {
			uni.showToast({
				title: '已复制到剪贴板',
				icon: 'success'
			});
		},
		fail: () => {
			uni.showToast({
				title: '复制失败',
				icon: 'none'
			});
		}
	});
};

// 处理资产按钮点击
const handleAssetClick = (type) => {
	if (type === 'myWorks') {
		// 跳转到展馆页面
		uni.navigateTo({
			url: '/pages/profile/myWorks'
		});
	} else if (type === 'starbook') {
		// 跳转到星册页面
		uni.navigateTo({
			url: '/pages/starbook/index'
		});
	}
};

// 处理修改昵称
const handleChangeNickname = () => {
	newNickname.value = nickname.value; // 初始化输入框为当前昵称
	showNicknameModal.value = true;
};

// 关闭修改昵称弹窗
const closeNicknameModal = () => {
	showNicknameModal.value = false;
	newNickname.value = '';
};

// 确认修改昵称
const confirmChangeNickname = async () => {
	const trimmedNickname = newNickname.value.trim();

	// 验证昵称
	const validation = validateNickname(trimmedNickname);
	if (!validation.valid) {
		uni.showToast({
			title: validation.message,
			icon: 'none'
		});
		return;
	}

	// 校验新昵称和当前昵称是否相同
	if (trimmedNickname === nickname.value) {
		uni.showToast({
			title: '不能使用相同昵称',
			icon: 'none'
		});
		return;
	}

	try {
		// 显示加载提示
		uni.showLoading({
			title: '修改中...',
			mask: true
		});

		// 调用修改昵称API
		const res = await updateNicknameApi(trimmedNickname);

		uni.hideLoading();

		if (res.code === 200) {
			// 修改成功，强制从服务器刷新个人信息
			await fetchUserInfo(true);

			uni.showToast({
				title: '昵称修改成功',
				icon: 'success'
			});

			closeNicknameModal();
		} else {
			// 业务错误
			uni.showToast({
				title: res.message || '修改失败',
				icon: 'none'
			});
		}
	} catch (error) {
		uni.hideLoading();
		// 显示错误信息
		uni.showToast({
			title: error.message || '修改失败，请重试',
			icon: 'none',
			duration: 2000
		});
	}
};

// 处理修改密码
const handleChangePassword = () => {
	oldPassword.value = '';
	newPassword.value = '';
	showOldPassword.value = false;
	showNewPassword.value = false;
	showPasswordModal.value = true;
};

// 关闭修改密码弹窗
const closePasswordModal = () => {
	showPasswordModal.value = false;
	oldPassword.value = '';
	newPassword.value = '';
	showOldPassword.value = false;
	showNewPassword.value = false;
};

// 确认修改密码
const confirmChangePassword = async () => {
	// 验证旧密码
	if (!oldPassword.value.trim()) {
		uni.showToast({
			title: '请输入旧密码',
			icon: 'none'
		});
		return;
	}

	// 验证新密码
	if (!newPassword.value.trim()) {
		uni.showToast({
			title: '请输入新密码',
			icon: 'none'
		});
		return;
	}

	try {
		// 显示加载提示
		uni.showLoading({
			title: '修改中...',
			mask: true
		});

		// 调用修改密码API
		const res = await updatePasswordApi(oldPassword.value.trim(), newPassword.value.trim());

		uni.hideLoading();

		if (res.code === 200) {
			// 修改成功
			uni.showToast({
				title: '修改成功，请重新登录',
				icon: 'success',
				duration: 2000
			});

			// 延迟执行登出和跳转
			setTimeout(() => {
				// 调用store的logout方法
				store.dispatch('user/logout');

				// 清除所有本地缓存
				uni.removeStorageSync('access_token');
				uni.removeStorageSync('user');
				uni.removeStorageSync('nickname');
				// 清除临时注册数据（如果有）
				uni.removeStorageSync('temp_register_mobile');
				uni.removeStorageSync('temp_register_password');
				uni.removeStorageSync('temp_register_nickname');

				// 跳转到登录页
				uni.reLaunch({
					url: '/pages/login/login'
				});
			}, 2000);
		}
	} catch (error) {
		uni.hideLoading();
		// 处理错误，显示错误信息
		const errorMessage = error.message || '修改失败，请重试';
		uni.showToast({
			title: errorMessage,
			icon: 'none',
			duration: 2000
		});
	}
};

// 处理添加身份
const handleSwitchRole = async () => {
	try {
		// 显示加载提示
		uni.showLoading({
			title: '加载中...',
			mask: true
		});

		// 获取可选的粉丝身份列表
		const res = await getFanIdentitiesApi();

		uni.hideLoading();

		if (res.code === 200 && res.data && res.data.items) {
			fanIdentitiesList.value = res.data.items;
			showAddIdentityModal.value = true;
		} else {
			uni.showToast({
				title: res.message || '获取明星列表失败',
				icon: 'none'
			});
		}
	} catch (error) {
		uni.hideLoading();
		console.error('获取明星列表失败:', error);
		uni.showToast({
			title: error.message || '获取明星列表失败',
			icon: 'none'
		});
	}
};

// 选择明星
const selectStar = (starId) => {
	selectedStarId.value = starId;
};

// 关闭添加身份弹窗
const closeAddIdentityModal = () => {
	showAddIdentityModal.value = false;
	selectedStarId.value = null;
	newIdentityNickname.value = '';
	fanIdentitiesList.value = [];
};

// 确认添加身份
const confirmAddIdentity = async () => {
	// 验证是否选择了明星
	if (!selectedStarId.value) {
		uni.showToast({
			title: '请选择您喜欢的明星',
			icon: 'none'
		});
		return;
	}

	// 验证昵称
	const trimmedNickname = newIdentityNickname.value.trim();
	const validation = validateNickname(trimmedNickname);
	if (!validation.valid) {
		uni.showToast({
			title: validation.message,
			icon: 'none'
		});
		return;
	}

	try {
		// 显示加载提示
		uni.showLoading({
			title: '添加中...',
			mask: true
		});

		// 调用添加粉丝身份API
		const res = await addFanIdentityApi(selectedStarId.value, trimmedNickname);

		uni.hideLoading();

		if (res.code === 200) {
			// 添加成功
			uni.showToast({
				title: '添加身份成功',
				icon: 'success'
			});

			// 关闭弹窗
			closeAddIdentityModal();

			// 强制刷新用户信息
			await fetchUserInfo(true);
		} else {
			uni.showToast({
				title: res.message || '添加失败',
				icon: 'none'
			});
		}
	} catch (error) {
		uni.hideLoading();
		console.error('添加身份失败:', error);
		uni.showToast({
			title: error.message || '添加失败，请重试',
			icon: 'none'
		});
	}
};

// 处理粉丝标签点击
const handleFanTagClick = async () => {
	try {
		// 显示加载提示
		uni.showLoading({
			title: '加载中...',
			mask: true
		});

		// 获取用户的所有粉丝身份
		const res = await getMyFanIdentitiesApi();

		uni.hideLoading();

		if (res.code === 200 && res.data && res.data.items) {
			myFanIdentities.value = res.data.items;
			currentStarId.value = res.data.current_star_id;
			showIdentityDropdown.value = true;
		} else {
			uni.showToast({
				title: res.message || '获取身份列表失败',
				icon: 'none'
			});
		}
	} catch (error) {
		uni.hideLoading();
		console.error('获取身份列表失败:', error);
		uni.showToast({
			title: error.message || '获取身份列表失败',
			icon: 'none'
		});
	}
};

// 关闭身份切换下拉列表
const closeIdentityDropdown = () => {
	showIdentityDropdown.value = false;
	myFanIdentities.value = [];
	currentStarId.value = null;
};

// 处理切换身份
const handleSwitchIdentity = async (starId) => {
	// 验证不能切换到当前身份
	if (starId === currentStarId.value) {
		uni.showToast({
			title: '当前已是该身份',
			icon: 'none'
		});
		return;
	}

	try {
		// 显示加载提示
		uni.showLoading({
			title: '切换中...',
			mask: true
		});

		// 调用切换身份API
		const res = await switchFanIdentityApi(starId);

		uni.hideLoading();

		if (res.code === 200 && res.data) {
			// 更新本地缓存的 access_token
			uni.setStorageSync('access_token', res.data.access_token);

			// 更新用户信息
			const currentIdentity = res.data.current_identity;
			if (currentIdentity) {
				// 从当前身份列表中找到完整信息
				const identityInfo = myFanIdentities.value.find(item => item.star_id === starId);
				if (identityInfo) {
					nickname.value = identityInfo.nickname;
				}
				fanTag.value = currentIdentity.tag;
				fanLevel.value = currentIdentity.level;
			}

			// 更新用户缓存
			const newStarId = currentIdentity ? currentIdentity.star_id : starId;
			const cachedUserStr = uni.getStorageSync('user');
			if (cachedUserStr) {
				try {
					const cachedUser = JSON.parse(cachedUserStr);
					cachedUser.nickname = nickname.value;
					cachedUser.fan_level = currentIdentity ? currentIdentity.level : fanLevel.value;
					cachedUser.crystal_balance = currentIdentity ? currentIdentity.crystal_balance : (cachedUser.crystal_balance || 0);
					cachedUser.star_id = newStarId;
					cachedUser.fan_identity = {
						star_id: newStarId,
						identity_id: currentIdentity.identity_id,
						name: currentIdentity.identity_name,
						tag: currentIdentity.tag
					};
					uni.setStorageSync('user', JSON.stringify(cachedUser));
					// 同步更新独立的 star_id key，供 square.vue / RankingModal 直接读取
					uni.setStorageSync('star_id', newStarId);
					store.commit('user/SET_USER_INFO', cachedUser);
				} catch (e) {
					console.error('更新用户缓存失败:', e);
				}
			}

			// 显示成功提示
			uni.showToast({
				title: '切换身份成功',
				icon: 'success'
			});

			// 关闭下拉列表
			closeIdentityDropdown();

			// 先从服务器拉取最新用户信息（含新身份的 avatar_url）
			await fetchUserInfo(true);

			// 拉取完成后通知 Header 用最新缓存刷新
			uni.$emit('userInfoUpdated');
			uni.$emit('avatarUpdated', { avatarUrl: userAvatarUrl.value });
			uni.$emit('balanceUpdated', { crystal_balance: currentIdentity ? currentIdentity.crystal_balance : 0 });
		} else {
			uni.showToast({
				title: res.message || '切换失败',
				icon: 'none'
			});
		}
	} catch (error) {
		uni.hideLoading();
		console.error('切换身份失败:', error);
		uni.showToast({
			title: error.message || '切换失败，请重试',
			icon: 'none'
		});
	}
};

// 处理注销账号
const handleDeleteAccount = () => {
	showDeleteAccountModal.value = true;
};

// 点击新手指引
const handleGuideClick = () => {
	showGuideModal.value = true;
};

// 关闭注销账号弹窗
const closeDeleteAccountModal = () => {
	showDeleteAccountModal.value = false;
};

// 确认注销账号
const confirmDeleteAccount = async () => {
	try {
		// 关闭弹窗
		closeDeleteAccountModal();

		// 显示加载提示
		uni.showLoading({
			title: '注销中...',
			mask: true
		});

		// 调用注销账号接口
		const result = await deleteAccountApi();

		uni.hideLoading();

		if (result.code === 200) {
			// 调用store的logout方法
			store.dispatch('user/logout');

			// 清除所有本地缓存
			uni.removeStorageSync('access_token');
			uni.removeStorageSync('user');
			uni.removeStorageSync('nickname');
			// 清除临时注册数据（如果有）
			uni.removeStorageSync('temp_register_mobile');
			uni.removeStorageSync('temp_register_password');
			uni.removeStorageSync('temp_register_nickname');

			// 显示成功提示
			uni.showToast({
				title: '账号已注销',
				icon: 'success'
			});

			// 延迟跳转到登录页
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/login/login'
				});
			}, 1500);
		} else {
			uni.showToast({
				title: result.message || '注销失败',
				icon: 'none'
			});
		}
	} catch (error) {
		uni.hideLoading();
		console.error('注销账号失败:', error);
		uni.showToast({
			title: '注销失败，请稍后重试',
			icon: 'none'
		});
	}
};

// 处理退出登录
const handleLogout = () => {
	showLogoutModal.value = true;
};

// 关闭退出登录弹窗
const closeLogoutModal = () => {
	showLogoutModal.value = false;
};

// 确认退出登录
const confirmLogout = () => {
	// 关闭弹窗
	closeLogoutModal();

	// 调用store的logout方法
	store.dispatch('user/logout');

	// 清除所有本地缓存
	uni.removeStorageSync('access_token');
	uni.removeStorageSync('user');
	uni.removeStorageSync('nickname');
	// 清除临时注册数据（如果有）
	uni.removeStorageSync('temp_register_mobile');
	uni.removeStorageSync('temp_register_password');
	uni.removeStorageSync('temp_register_nickname');

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

// 返回上一页
const goBack = () => {
	uni.navigateBack();
};

// 打开头像修改弹窗
const handleAvatarClick = () => {
	showAvatarModal.value = true;
};

// 关闭头像修改弹窗
const closeAvatarModal = () => {
	showAvatarModal.value = false;
};

// 处理头像更新后的操作（更新本地存储、刷新UI）
const handleAvatarUpdateSuccess = async (newAvatarUrl) => {
	// 后端签名接口返回的 key 每次都唯一（avatar_<uuid>.png），
	// URL 字符串天然不同，<image> 会重新拉取，无需再追加 ?t= 兜底
	// 1. 更新本地缓存
	userAvatarUrl.value = newAvatarUrl;
	const userStr = uni.getStorageSync('user');
	if (userStr) {
		const user = JSON.parse(userStr);
		user.avatar_url = newAvatarUrl;
		uni.setStorageSync('user', JSON.stringify(user));
	}

	// 3. 强制刷新Avatar组件
	avatarKey.value += 1;

	// 4. 触发全局事件，通知其他组件刷新头像
	uni.$emit('avatarUpdated', { avatarUrl: newAvatarUrl });

	// 5. 显示成功提示
	uni.hideLoading();
	uni.showToast({
		title: '头像修改成功',
		icon: 'success'
	});

	uploadingAvatar.value = false;
	closeAvatarModal();
};

// 上传头像
const handleUploadAvatar = () => {
	// 选择图片
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: async (res) => {
			const tempFilePath = res.tempFilePaths[0];

			// 获取文件信息验证大小
			uni.getFileInfo({
				filePath: tempFilePath,
				success: async (fileInfo) => {
					// 验证文件大小(10MB = 10 * 1024 * 1024)
					if (fileInfo.size > 10 * 1024 * 1024) {
						uni.showToast({
							title: '图片大小不能超过10MB',
							icon: 'none'
						});
						return;
					}

					// 上传到OSS
					await uploadAvatarToOss(tempFilePath);
				},
				fail: (error) => {
					console.error('获取文件信息失败:', error);
					uni.showToast({
						title: '获取文件信息失败',
						icon: 'none'
					});
				}
			});
		},
		fail: (error) => {
			console.error('选择图片失败:', error);
		}
	});
};

// 上传头像到OSS
const uploadAvatarToOss = async (filePath) => {
	try {
		uploadingAvatar.value = true;
		uni.showLoading({ title: '上传中...', mask: true });
		console.log(filePath)
		// 1. 获取OSS签名
		const signRes = await getOssSignatureApi('avatar');
		if (signRes.code !== 200) {
			throw new Error(signRes.message || '获取签名失败');
		}
		console.log(signRes)
		// 2. 构建FormData并上传到OSS
		// 直接用后端返回的 key（每次唯一），避免覆盖原图、并发竞态、webview 缓存命中老图
		const ossKey = signRes.data.key
		uni.uploadFile({
			url: signRes.data.host,
			filePath: filePath,
			name: 'file',
			formData: {
				key: ossKey,
				policy: signRes.data.policy,
				success_action_status: '200',
				'x-oss-credential': signRes.data.x_oss_credential,
				'x-oss-date': signRes.data.x_oss_date,
				'x-oss-security-token': signRes.data.security_token,
				'x-oss-signature': signRes.data.signature,
				'x-oss-signature-version': signRes.data.x_oss_signature_version
			},
			success: async (uploadRes) => {
				try {
					if (uploadRes.statusCode === 200 || uploadRes.statusCode === 204) {
						// 3. 拼接完整URL（用后端返回的 key，每次唯一）
						const avatarUrl = `${signRes.data.host}/${ossKey}`;

						// 4. 清除旧头像的缓存（如果有）
						if (userAvatarUrl.value) {
							clearAvatarCache(userAvatarUrl.value);
						}
						console.log(avatarUrl)
						// 5. 调用后端更新头像接口
						const updateRes = await updateAvatarApi(avatarUrl);
						console.log('updateAvatarApi 返回:', updateRes);  // 添加这行
						if (updateRes.code === 200) {
							// 6. 处理头像更新成功后的操作
							await handleAvatarUpdateSuccess(avatarUrl);
							console.log('updateAvatarApi 返回:', avatarUrl);
						} else {
							throw new Error(updateRes.message || '更新头像失败');
						}
					} else {
						throw new Error(`上传失败，状态码: ${uploadRes.statusCode}`);
					}
				} catch (error) {
					console.error('处理上传结果失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: error.message || '上传失败',
						icon: 'none',
						duration: 2000
					});
					uploadingAvatar.value = false;
				}
			},
			fail: (error) => {
				console.error('OSS上传失败:', error);
				uni.hideLoading();
				uni.showToast({
					title: '上传失败',
					icon: 'none',
					duration: 2000
				});
				uploadingAvatar.value = false;
			}
		});

	} catch (error) {
		console.error('上传头像失败:', error);
		uni.hideLoading();
		uni.showToast({
			title: error.message || '上传失败',
			icon: 'none',
			duration: 2000
		});
		uploadingAvatar.value = false;
	}
};

onReady(() => {
	// 不再自动触发引导，由用户从引导列表选择后触发
});

// 处理引导跳转参数
onLoad((options) => {
	if (options && options.guide_key) {
		console.log('[Guide] profile 收到引导跳转参数, guide_key:', options.guide_key, 'guide_step:', options.guide_step)
		store.dispatch('guide/resumeGuide', options.guide_key).then(res => {
			console.log('[Guide] profile resumeGuide 结果:', res)
		}).catch(err => {
			console.error('[Guide] profile resumeGuide 失败:', err)
		})
	}
});

onShow(() => {
	// 每次页面显示时都刷新用户信息并通知 Header 更新余额
	fetchUserInfo().then(() => {
		const cachedUserStr = uni.getStorageSync('user');
		if (cachedUserStr) {
			try {
				const cachedUser = JSON.parse(cachedUserStr);
				uni.$emit('balanceUpdated', { crystal_balance: cachedUser.crystal_balance || 0 });
			} catch (e) {
				console.error('解析缓存用户信息失败:', e);
			}
		}
	});
});
</script>

<style scoped>
.profile-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.profile-scroll {
	width: 616rpx;
	height: 955.2rpx;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	border-radius: 86rpx;

	background: linear-gradient(133.78deg, rgba(154, 146, 255) 9.69%, rgba(255, 202, 229) 43.91%, rgba(255, 250, 253, 0.99) 90.13%, rgba(63, 63, 76, 0.19) 99.9%);
	box-shadow: 2px 4px 1.8px 0px rgba(214, 41, 41, 0.12);


}

/* 隐藏滚动条 */
.profile-scroll::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* 右上角模块 */
.top-right-module {
	position: fixed;
	width: 313.6rpx;
	height: 73.6rpx;
	top: -16rpx;
	right: 0;
	border-top-right-radius: 35.5rpx;
	border-top-left-radius: 7rpx;
	border-bottom-left-radius: 35.5rpx;
	border-bottom-right-radius: 6rpx;
	background: linear-gradient(135deg, #9E90FF 0%, #FFCAD3 100%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.level-box {
	display: flex;
	align-items: flex-end;

}

.level-label {
	color: #fffabd;
	font-size: 24rpx;
	margin-right: 8rpx;
}

.level-value {
	color: #fff;
	font-size: 34rpx;
	font-weight: bold;
	color: #fffabd;
	text-shadow: -1px 1px 4px #ce090984;
}

/* 上半部分：用户信息区域 */
.top-section {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-bottom: 64rpx;

}

.background-image {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	object-fit: cover;
	/* filter: blur(20rpx); */
}

.replaceable-bg-layer {
	position: fixed;
	width: 100%;
	height: 80vh;
	z-index: 1;
	pointer-events: none;
}

.replaceable-bg-overlay-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.background-overlay {
	display: none;
}

.nav-back {
	position: fixed;
	top: 96rpx;
	left: 32rpx;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	/* background: rgba(255,255,255,0.5);
	border-radius: 50%; */
	z-index: 4;
}

.nav-back-icon {
	font-size: 48rpx;
	font-weight: bold;
	color: #fff;
}

.close-icon-img {
	width: 48rpx;
	height: 48rpx;
	position: relative;
	top: 96rpx;
	left: 32rpx;
}

.user-info-card {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	margin-top: 64rpx;
	display: flex;
	flex-direction: row;
}

/* 上半部分：头像和用户信息左右布局 */
.user-main-info {
	display: flex;
	align-items: flex-start;
	/* gap: 30rpx; */
	margin-bottom: 0;
}

.avatar-container {
	position: absolute;
	left: 30rpx;
	top: 32rpx;
}

/* 右侧用户文本信息 */
.user-text-info {
	/* flex: 1; */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8rpx;
	margin-left: 8rpx;
	padding: 24rpx 24rpx 24rpx 224rpx;
	min-width: 356rpx;
}

.info-row-wrapper {
	height: 140.8rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0.71;
	border-top-left-radius: 15px;
	border-bottom-right-radius: 15px;

	background: linear-gradient(133.78deg, rgba(154, 146, 255, 0.46) 4.58%, rgba(255, 202, 229, 0.46) 43.91%, rgba(255, 250, 253, 0.4554) 76.13%, rgba(211, 209, 255, 0.46) 91.61%);

}

.info-row {
	display: flex;
	align-items: center;
	padding: 0 12rpx;

}

.edit-btn {
	min-width: 144rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

}

.edit-nickname-btn {
	width: 46.4rpx;
	height: 46.4rpx;
}

.edit-nickname-text {
	display: flex;
	border-radius: 18rpx;
	background: linear-gradient(100.7deg, rgba(103, 226, 222, 0.68) -3.17%, rgba(185, 78, 238, 0.68) 43.09%, rgba(225, 137, 139, 0.68) 99.19%);

}

.edit-nickname-placeholder {
	font-size: 15rpx;
	color: #FFF9E7;
	padding: 4rpx 12rpx;
	border-radius: 16rpx;
	font-weight: 500;
}

.info-label {
	font-size: 22rpx;
	color: #FFF9E7;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.84);
	min-width: 112rpx;
	font-weight: 400;

}

.address-row {
	display: flex;
	align-items: center;
}

.info-value {
	font-size: 22rpx;
	color: #FFF9E7;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 192rpx;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.84);
	font-weight: 400;
}

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

.info-btn {
	font-size: 20rpx;
	color: #FFD700;
	padding: 4rpx 16rpx;
	border: 2rpx solid rgba(255, 215, 0, 0.5);
	border-radius: 16rpx;
}

.name-wrapper {
	display: flex;
	align-items: center;
	/* gap: 12rpx; */
	flex-wrap: wrap;
	margin-bottom: 24rpx;
}

.level-badge {
	font-size: 24rpx;
	color: #ffffff;
	border-radius: 12rpx;
	margin-right: 12rpx;
}

.user-name {
	font-size: 32rpx;
	color: #ffffff;
	margin-right: 12rpx;
}

.fan-tag-badge {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 16rpx;
	padding: 4rpx 12rpx;
	border: 2rpx solid rgba(255, 255, 255, 0.4);
	display: flex;
	align-items: center;
	gap: 6rpx;
	cursor: pointer;
	transition: all 0.3s;
}

.fan-tag-badge:active {
	opacity: 0.8;
	transform: scale(0.95);
}

.fan-tag-text {
	font-size: 20rpx;
	color: #ffffff;
	font-weight: 500;
}

.fan-tag-arrow {
	width: 20rpx;
	height: 20rpx;
	opacity: 0.8;
}

.user-did {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.85);
}

.user-mobile {
	font-size: 48rpx;
	color: rgba(255, 255, 255, 0.85);
}

.blockchain-address-wrapper {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.blockchain-address-text {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.9);
}

.copy-icon {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.copy-icon-text {
	font-size: 36rpx;
}

/* 下半部分：透明背景区域 */
.bottom-section {
	position: relative;
	width: 100%;
	z-index: 3;
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.content-area {
	flex: 1;
}

.section-bg {
	border-radius: 30rpx;
	padding: 8rpx 30rpx 16rpx;
	background: linear-gradient(133.78deg, rgba(154, 146, 255, 0.46) 4.58%, rgba(255, 202, 229, 0.46) 43.91%, rgba(255, 250, 253, 0.4554) 76.13%, rgba(211, 209, 255, 0.46) 91.61%);
	margin-bottom: 16rpx;
}

.section-title {
	font-size: 32rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.84);
	font-weight: 500;
	color: #FFF9E7;
	margin-bottom: 8rpx;
}

.assets-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20rpx;
	margin-bottom: 0;
	height: 128rpx;
	overflow: hidden;
}

.asset-card {
	background-image: url(/static/rank/activity-support-icon/beijingkuang.png);
	background-size: 100% 125%;
	background-position: center;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 128rpx;
	width: 224rpx;
	box-shadow: 1px 3px 7px 0px #D833336E;
	overflow: hidden;
}

.asset-icon {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: -20%;
	left: 50%;
	transform: translate(-50%, 0%);
	opacity: 0.7;
}

.asset-text {
	font-size: 32rpx;
	color: #fff;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	position: relative;
	z-index: 1;
}

.arrow {
	position: absolute;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
	font-size: 48rpx;
	color: #fff;
	font-weight: bold;
}

/* 服务与工具按钮 */
.service-buttons-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 0;
	flex-wrap: wrap;
}

.service-button {
	background-image: url(/static/rank/activity-support-icon/djbeij.jpg);
	background-size: 100% 100%;
	background-position: center;
	border-radius: 20rpx;
	width: 102rpx;
	height: 102rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16rpx;
	box-sizing: border-box;
	position: relative;
	margin-bottom: 16rpx;
}

.service-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 8rpx;
}

.service-icon-emoji {
	font-size: 16rpx;
	margin-bottom: 6rpx;
	display: block;
}

.service-text {
	font-size: 16rpx;
	color: #fff;
	text-align: center;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.guide-badge {
	position: absolute;
	top: 10rpx;
	right: 20rpx;
	background: #ff6b6b;
	color: #fff;
	font-size: 20rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.logout-section {
	width: 6rem;
	height: 2rem;
	display: flex;
	position: fixed;
	bottom: 160rpx;
	left: 50%;
	transform: translate(-50%, 0);
	border-radius: 40rpx;
	background: linear-gradient(115.98deg, #F6E9B4 -19.66%, #F08399 70.92%, rgba(213, 107, 109, 0.83521) 138.79%, rgba(105, 209, 230, 0.69) 198.61%);
	justify-content: center;
    align-items: center;
}

/* 使用 ::after 伪元素绘制完美的圆角横线 */
/* .logout-section::after {
	content: '';
	position: absolute;
	top: -6rpx;
	left: 0;
	right: 0;
	height: 8rpx;
	background: linear-gradient(to bottom right,
			#F0E4B1 0%,
			#F08399 50%,
			#B94E73 100%);
	border-radius: 8rpx;
	width: calc(100% - 60rpx);
	transform: translateX(30rpx);
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
} */

.logout-button {
	font-size: 30rpx;
	color: #fff;
	font-weight: 500;
}


.logout-button::after {
	border: none;
}

.logout-button:active {
	background: #f5f5f5;
}

/* 修改昵称弹窗 */
.nickname-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	width: 80%;
	max-width: 600rpx;
	/* background: #ffffff; */
	background-image: url('/static/starbookcontent/beijing.png');
	background-size: cover;
	background-position: center bottom;
	border-radius: 30rpx;
	padding: 60rpx 40rpx;
	box-sizing: border-box;
}

.modal-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	text-align: center;
	margin-bottom: 40rpx;
}

.modal-input {
	width: 100%;
	height: 88rpx;
	background: #f5f5f5;
	border-radius: 20rpx;
	padding: 0 30rpx;
	font-size: 32rpx;
	color: #333333;
	margin-bottom: 40rpx;
	box-sizing: border-box;
}

.modal-buttons {
	display: flex;
	gap: 20rpx;
}

.modal-btn-cancel,
.modal-btn-confirm {
	flex: 1;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: 500;
	border: none;
}

.modal-btn-cancel {
	background: #f5f5f5;
	color: #666666;
}

.modal-btn-cancel::after {
	border: none;
}

.modal-btn-confirm {
	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
	color: #ffffff;
}

.modal-btn-confirm::after {
	border: none;
}

.modal-btn-cancel:active {
	background: #e0e0e0;
}

.modal-btn-confirm:active {
	opacity: 0.9;
}

/* 修改密码弹窗 */
.password-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-password-wrapper {
	position: relative;
	width: 100%;
	height: 88rpx;
	margin-bottom: 40rpx;
	background: #f5f5f5;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	padding-right: 100rpx;
	box-sizing: border-box;
}

.modal-password-input {
	flex: 1;
	height: 100%;
	font-size: 32rpx;
	color: #333333;
}

.modal-eye-icon {
	position: absolute;
	right: 30rpx;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.eye-text {
	font-size: 40rpx;
}

.input-placeholder {
	color: #999999;
}

/* 确认弹窗（注销账号、退出登录） */
.confirm-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-message {
	font-size: 28rpx;
	color: #666666;
	text-align: center;
	line-height: 1.6;
	margin-bottom: 40rpx;
}

.modal-btn-confirm.danger {
	background: #ff3b30;
}

.modal-btn-confirm.danger:active {
	background: #e6342a;
}

/* 添加身份弹窗 */
.add-identity-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-subtitle {
	font-size: 28rpx;
	color: #666666;
	text-align: center;
	margin-bottom: 30rpx;
}

.star-list {
	max-height: 400rpx;
	overflow-y: auto;
	overflow-x: hidden;
	margin-bottom: 30rpx;
	border-radius: 20rpx;
	background: #f5f5f5;
	padding: 10rpx;
}

.star-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background: #ffffff;
	border-radius: 16rpx;
	margin-bottom: 10rpx;
	cursor: pointer;
	transition: all 0.3s;
}

.star-item:last-child {
	margin-bottom: 0;
}

.star-item-selected {
	background: linear-gradient(165deg, rgba(240, 228, 177, 0.2) 0%, rgba(240, 131, 153, 0.2) 50%, rgba(185, 78, 115, 0.2) 90%, rgba(131, 75, 158, 0.2) 100%);
	border: 2rpx solid #F08399;
}

.star-item:active {
	transform: scale(0.98);
}

.star-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.star-name {
	font-size: 32rpx;
	color: #333333;
	font-weight: 500;
}

.star-tag {
	font-size: 24rpx;
	color: #999999;
}

.star-radio {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	border: 2rpx solid #cccccc;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
}

.star-item-selected .star-radio {
	border-color: #F08399;
	background: #F08399;
}

.star-radio-checked {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background: #ffffff;
}

/* 身份切换下拉列表 */
.identity-dropdown-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.identity-dropdown-content {
	width: 85%;
	max-width: 650rpx;
	max-height: 70vh;
	background: #ffffff;
	border-radius: 30rpx;
	padding: 40rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.identity-dropdown-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	text-align: center;
	margin-bottom: 30rpx;
}

.identity-list {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
}

.identity-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 20rpx;
	background: #f5f5f5;
	border-radius: 20rpx;
	margin-bottom: 16rpx;
	cursor: pointer;
	transition: all 0.3s;
}

.identity-item:last-child {
	margin-bottom: 0;
}

.identity-item-active {
	background: linear-gradient(165deg, rgba(240, 228, 177, 0.3) 0%, rgba(240, 131, 153, 0.3) 50%, rgba(185, 78, 115, 0.3) 90%, rgba(131, 75, 158, 0.3) 100%);
	border: 2rpx solid #F08399;
}

.identity-item-disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.identity-item:not(.identity-item-disabled):active {
	transform: scale(0.98);
}

.identity-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.identity-main {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.identity-star-name {
	font-size: 32rpx;
	color: #333333;
	font-weight: 600;
}

.identity-star-tag {
	font-size: 24rpx;
	color: #666666;
	background: rgba(217, 156, 180, 0.3);
	padding: 2rpx 10rpx;
	border-radius: 10rpx;
}

.identity-nickname {
	font-size: 26rpx;
	color: #999999;
}

.identity-current-badge {
	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
	border-radius: 16rpx;
	padding: 6rpx 12rpx;
}

.identity-current-text {
	font-size: 22rpx;
	color: #ffffff;
	font-weight: 500;
}

/* 修改头像弹窗 */
.avatar-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.avatar-preview {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40rpx;
}

.upload-avatar-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
	border-radius: 44rpx;
	color: #ffffff;
	font-size: 32rpx;
	font-weight: 500;
	border: none;
	margin-bottom: 20rpx;
}

.upload-avatar-btn::after {
	border: none;
}

.upload-avatar-btn:disabled {
	opacity: 0.6;
}

.upload-hint {
	font-size: 24rpx;
	color: #999999;
	text-align: center;
	margin-bottom: 40rpx;
}
</style>
