<template>
	<view class="page">
		<!-- 自定义导航栏 -->
		<!-- 		<custom-navbar 
			title="个人中心" 
			:show-background="true"
			background-image="https://zhgw.028wlkj.com/cdwlMall/zsfwzxt/test/file/static/bg.png"
			@height-change="handleNavbarHeightChange"
		></custom-navbar> -->
		<custom-navbar title="个人中心" :show-background="false" titleColor="#1f2937"
			@height-change="handleNavbarHeightChange" backgroundColor="#fff"></custom-navbar>
		<view class="main">
			<!-- 用户信息卡片 - 结合my.vue样式和me copy.vue功能 -->
			<view class="user-card">
				<view class="user-card-bg"></view>
				<view class="user-card-content">
					<view class="user-main">
						<view class="avatar-container">
							<view class="avatar-ring"></view>
							<!-- 修改切换-->
							<image class="avatar" :src="newuserInfo.avatar || '/static/head.png'" mode="aspectFill">
							</image>
						<!-- 	<image class="avatar" :src="newuserInfo.avatar || '/static/head2.png'" mode="aspectFill">
							</image> -->
						</view>
						<view class="user-info-wrapper">
							<view class="user-name">{{ newuserInfo.realName || newuserInfo.userName || '用户' }}</view>
							<view class="user-meta">
								<view class="role-badge">
									<u-icon name="account" size="14" color="#43a047"></u-icon>
									<text>{{ newuserInfo.gw || '员工' }}</text>
								</view>
								<view class="store-badge">
									<u-icon name="home" size="14" color="#409EFF"></u-icon>
									<text>{{ jsjinfo.storeName || '暂无' }}</text>
								</view>
								<view class="store-badge jsj-badge">
									<u-icon name="star" size="14" color="#ff9800"></u-icon>
									<text>{{ jsjinfo.jsjName || '暂无' }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 业绩数据板块 -->
			<!-- <view class="warpboxs-small-title">
				<view><text class="warpboxs-small-title-line"></text>业绩数据</view>
			</view> -->
			<view class="performance-grid" v-if="getSectionByFullName('数据统计') && newuserInfo.gw != '科技老师'">
				<!-- 左侧：开单金额 - 正方形布局 -->
				<view class="glass-card billing-card">
					<view class="billing-main">
						<view class="stat-content billing-item">
							<view class="stat-icon-small icon-circle-bg-1">
								<image src="/static/home/order.png" mode="aspectFit"></image>
							</view>
							<view class="billing-right">
								<view class="billing-value">¥{{ (performanceData.BillingAmount || 0).toFixed(2) }}</view>
								<view class="card-label">开单金额</view>
							</view>
						</view>
					</view>
					<view class="billing-main">
						<view class="stat-content billing-item">
							<view class="stat-icon-small icon-circle-bg-4">
								<image src="/static/home/refund-card.png" mode="aspectFit"></image>
							</view>
							<view class="billing-right">
								<view class="billing-value">¥{{ (performanceData.RefundAmount || 0).toFixed(2) }}</view>
								<view class="card-label">退卡金额</view>
							</view>
						</view>
					</view>
					<view style="height: 20rpx;"></view>
					<view class="billing-footer">
						<view class="count-item">
							<text class="count-text">{{ performanceData.HeadCount || 0 }} 人头</text>
						</view>
						<view class="count-divider"></view>
						<view class="count-item">
							<text class="count-text">{{ performanceData.PersonCount || 0 }} 人次</text>
						</view>
					</view>
				</view>

				<!-- 右侧：其他数据 - 垂直排列 -->
				<view class="right-column">
					<!-- 消耗金额 -->
					<view class="glass-card stat-card">
						<view class="stat-content stat-item-row">
							<view class="stat-icon-small icon-circle-bg-red">
								<image src="/static/home/reimbursement-audit.png" mode="aspectFit"></image>
							</view>
							<view class="stat-info-right">
								<view class="stat-value">¥{{ (performanceData.ConsumeAmount || 0).toFixed(2) }}</view>
								<view class="card-label">消耗金额</view>
							</view>
						</view>
					</view>

					<!-- 手工费 -->
					<view class="glass-card stat-card">
						<view class="stat-content stat-item-row">
							<view class="stat-icon-small icon-circle-bg-4">
								<image src="/static/home/reimbursement-apply.png" mode="aspectFit"></image>
							</view>
							<view class="stat-info-right">
								<view class="stat-value">¥{{ performanceData.LaborCost || 0 }}</view>
								<view class="card-label">手工费</view>
							</view>
						</view>
					</view>

					<!-- 项目数 -->
					<view class="glass-card stat-card">
						<view class="stat-content stat-item-row">
							<view class="stat-icon-small icon-circle-bg-5">
								<image src="/static/home/dingxuan-order.png" mode="aspectFit"></image>
							</view>
							<view class="stat-info-right">
								<view class="stat-value">{{ performanceData.ConsumeProjectCount || 0 }}</view>
								<view class="card-label">项目数</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 科技老师显示 -->
			<view class="performance-grid" v-if="getSectionByFullName('数据统计') && newuserInfo.gw == '科技老师'">
				<!-- 左侧：开单金额 - 正方形布局 -->
				<view class="glass-card billing-card">
					<view class="billing-main">
						<view class="stat-content billing-item">
							<view class="stat-icon-small icon-circle-bg-1">
								<image src="/static/home/order.png" mode="aspectFit"></image>
							</view>
							<view class="billing-right">
								<view class="billing-value">¥{{ (performanceData.OrderAchievement || 0).toFixed(2) }}</view>
								<view class="card-label">开卡业绩</view>
							</view>
						</view>
					</view>
					<image src="/static/rank/icon2.png" style="width: 80%;margin: 0 auto;" mode="widthFix"></image>
					<!-- <view style="height: 55%;">
						
					</view> -->
				</view>

				<!-- 右侧：其他数据 - 垂直排列 -->
				<view class="right-column">
					<!-- 消耗金额 -->
					<view class="glass-card stat-card">
						<view class="stat-content stat-item-row">
							<view class="stat-icon-small icon-circle-bg-red">
								<image src="/static/home/reimbursement-audit.png" mode="aspectFit"></image>
							</view>
							<view class="stat-info-right">
								<view class="stat-value">¥{{ (performanceData.ConsumeAchievement || 0).toFixed(2) }}</view>
								<view class="card-label">消耗业绩</view>
							</view>
						</view>
					</view>

					<!-- 手工费 -->
					<view class="glass-card stat-card">
						<view class="stat-content stat-item-row">
							<view class="stat-icon-small icon-circle-bg-4">
								<image src="/static/home/reimbursement-apply.png" mode="aspectFit"></image>
							</view>
							<view class="stat-info-right">
								<view class="stat-value">¥{{ performanceData.ConsumeLaborCost || 0 }}</view>
								<view class="card-label">手工费</view>
							</view>
						</view>
					</view>

					<!-- 项目数 -->
					<view class="glass-card stat-card">
						<view class="stat-content stat-item-row">
							<view class="stat-icon-small icon-circle-bg-5">
								<image src="/static/home/dingxuan-order.png" mode="aspectFit"></image>
							</view>
							<view class="stat-info-right">
								<view class="stat-value">{{ performanceData.ConsumeProjectCount || 0 }}</view>
								<view class="card-label">项目数</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
			<!-- 我的数据板块 -->
			<view class="warpboxss" v-if="getSectionByFullName('我的数据')">
				<view class="warpboxs-small-title" style="margin-bottom: 30rpx;">
					<view><text class="warpboxs-small-title-line"></text>我的数据</view>
				</view>
				<!-- 统计数据区域 - 来自me copy.vue -->
				<view class="stats-section">
					<view class="stats-container">
						<view v-if="iskjb" class="stat-item" @click="goToPage('/pages/expansion-list/expansion-list')">
							<view class="stat-icon">
								<image src="/static/me/expansion.png" mode="heightFix"></image>
							</view>
							<view class="stat-info">
								<view class="stat-num">{{ summaryData.expansionCount || 0 }}</view>
								<view class="stat-name">拓客数</view>
							</view>
						</view>
						<view v-if="iskjb" class="stat-item"
							@click="goToPage('/pages/user-invite-list/user-invite-list')">
							<view class="stat-icon">
								<image src="/static/me/invite.png" mode="heightFix"></image>
							</view>
							<view class="stat-info">
								<view class="stat-num">{{ summaryData.inviteCount || 0 }}</view>
								<view class="stat-name">邀约数</view>
							</view>
						</view>
						<view v-if="iskjb" class="stat-item"
							@click="goToPage('/pages/user-appointment-list/user-appointment-list')">
							<view class="stat-icon">
								<image src="/static/me/appointment.png" mode="heightFix"></image>
							</view>
							<view class="stat-info">
								<view class="stat-num">{{ summaryData.appointmentCount || 0 }}</view>
								<view class="stat-name">预约数</view>
							</view>
						</view>
						<view class="stat-item" @click="goToPage('/pages/lx-list/lx-list')">
							<view class="stat-icon">
								<image src="/static/me/order.png" mode="heightFix"></image>
							</view>
							<view class="stat-info">
								<view class="stat-num">{{ summaryData.hkCount || 0 }}</view>
								<view class="stat-name">开单数</view>
							</view>
						</view>
						<view class="stat-item" @click="goToPage('/pages/consume-list/consume-list')">
							<view class="stat-icon">
								<image src="/static/me/consume-card.png" mode="heightFix"></image>
							</view>
							<view class="stat-info">
								<view class="stat-num">{{ summaryData.consumeCount || 0 }}</view>
								<view class="stat-name">耗卡数</view>
							</view>
						</view>
						<view class="stat-item" @click="goToPage('/pages/refund-list/refund-list')">
							<view class="stat-icon">
								<image src="/static/me/refund.png" mode="heightFix"></image>
							</view>
							<view class="stat-info">
								<view class="stat-num">{{ summaryData.refundCount || 0 }}</view>
								<view class="stat-name">退卡数</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 个人服务板块 -->
			<view class="warpboxss settings-section" v-if="getSectionByFullName('个人服务') && getSectionByFullName('个人服务').children">
				<view class="warpboxs-small-title" style="margin-bottom: 12rpx;">
					<view><text class="warpboxs-small-title-line"></text>个人服务</view>
				</view>
				<view class="settings-list">
					<view class="settings-item" v-for="(item, index) in getSectionByFullName('个人服务').children" :key="item.id || index"
						@click="handleMenuItemClick(item)">
						<view class="settings-left">
							<view class="settings-icon-wrapper">
								<image v-if="item.icon" :src="item.icon" mode="aspectFit"></image>
							</view>
							<text class="settings-text">{{ item.fullName }}</text>
						</view>
						<u-icon name="arrow-right" size="16" color="#c0c4cc"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 修改密码弹窗 - 来自me copy.vue -->
		<u-popup :show="showPasswordDialog" @close="cancelChangePassword" mode="center" border-radius="20">
			<view class="password-dialog">
				<view class="dialog-title">修改密码</view>
				<view class="dialog-content">
					<view class="form-item">
						<text class="form-label">原密码</text>
						<input class="form-input" type="password" placeholder="请输入原密码"
							v-model="passwordForm.oldPassword" :password="true" />
					</view>
					<view class="form-item">
						<text class="form-label">新密码</text>
						<input class="form-input" type="password" placeholder="请输入新密码"
							v-model="passwordForm.newPassword" :password="true" />
					</view>
					<view class="form-item">
						<text class="form-label">确认密码</text>
						<input class="form-input" type="password" placeholder="请再次输入新密码"
							v-model="passwordForm.confirmPassword" :password="true" />
					</view>
				</view>
				<view class="dialog-footer">
					<view class="dialog-btn cancel-btn" @click="cancelChangePassword">取消</view>
					<view class="dialog-btn confirm-btn" @click="confirmChangePassword">确定</view>
				</view>
			</view>
		</u-popup>
		<view style="height: 250rpx;"></view>
		<!-- 自定义 tabBar -->
		<custom-tab-bar />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import memberApi from '@/apis/modules/member.js'
	import oauthApi from '@/apis/modules/oauth.js'
	import performanceApi from '@/apis/modules/performance.js'
	import CustomTabBar from '@/components/custom-tab-bar/index.vue'
	import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue'

	export default {
		components: {
			CustomTabBar,
			CustomNavbar
		},
		data() {
			return {
				navbarHeightRpx: 0, // 导航栏高度（rpx）
				scrollTop: 0,
				userInfo: {},
				newuserInfo: {},
				menuData: [], // 从 API 获取的菜单数据
				menuSections: {}, // 解析后的菜单分组数据
				jsjinfo: {
					storeName: '',
					jsjName: ''
				},
				summaryData: {
					appointmentCount: 0,
					inviteCount: 0,
					expansionCount: 0,
					hkCount: 0,
					consumeCount: 0,
					refundCount: 0
				},
				performanceData: {
					InvitationCount: 0,
					InviteCount: 0,
					AppointmentCount: 0,
					BillingCount: 0,
					BillingAmount: 0,
					ConsumeCount: 0,
					ConsumeAmount: 0,
					RefundCount: 0,
					RefundAmount: 0,
					HeadCount: 0,
					PersonCount: 0,
					ConsumeProjectCount: 0,
					LaborCost: 0,
					ConsumeLaborCost: 0,
					OrderAchievement: 0,
					ConsumeAchievement: 0
				},
				showPasswordDialog: false,
				passwordForm: {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				}
			}
		},

		computed: {
			iskjb() {
				if (this.newuserInfo.gw == '科技老师') {
					return false
				}
				return true
			},
			// 主内容区域顶部间距
			mainMarginTop() {
				if (this.navbarHeightRpx > 0) {
					// 小程序：导航栏高度 + 背景图高度 + 额外间距
					return (this.navbarHeightRpx + 290 + 40) + 'rpx'
				}
				// H5/APP：固定间距（背景图高度 + 导航栏高度）
				return '370rpx'
			}
		},

		async onLoad() {
			this.checkLoginStatus()
			await this.init()
			this.loadMenuData()
		},

		async onShow() {
			// 页面显示时刷新数据
			if (this.userInfo && this.userInfo.userId) {
				await this.init()
			}
			// 重新加载菜单数据
			this.loadMenuData()
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},

		methods: {
			// 初始化
			async init() {
				if (!this.userInfo || !this.userInfo.userId) {
					return
				}

				// 获取用户信息
				this.API.getUsers(this.userInfo.userId).then(res => {
					if (res.code === 200) {
						this.newuserInfo = res.data
						if (this.newuserInfo.enabledMark != '1') {
							uni.showToast({
								title: '您的账号已被禁用',
								icon: 'none'
							})
							// 清除本地存储
							uni.clearStorageSync()
							// 跳转到登录页
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}, 1500)
						} else {
							let formattedDate = this.utils.gettime()
							memberApi.getJsjInfoByUserMonth(this.userInfo.userId, formattedDate).then((
								resjsj) => {
									if (resjsj.code == 200 && resjsj.data) {
										this.jsjinfo.storeName = resjsj.data.storeName || ''
										this.jsjinfo.jsjName = resjsj.data.jsjName || ''
									}
								})
							uni.setStorageSync('newuserInfo', this.newuserInfo)
							this.getSummaryData()
							this.getPerformanceData()
						}
					}
				})
			},

			// 处理导航栏高度变化
			handleNavbarHeightChange(heightInfo) {
				this.navbarHeightRpx = heightInfo.rpx || 0
			},

			// 检查登录状态
			checkLoginStatus() {
				const token = uni.getStorageSync('token')

				if (!token) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				} else {
					this.userInfo = uni.getStorageSync('userInfo')
					this.newuserInfo = uni.getStorageSync('newuserInfo') || {}
				}
			},

			// 获取统计数据
			async getSummaryData() {
				try {
					const currentMonthRange = this.utils.getCurrentMonthRange()
					if (this.iskjb) {
						let yyinfo = {
							pageSize: 1,
							currentPage: 1,
							yysj: `${currentMonthRange[0]},${currentMonthRange[1]}`
						}
						let yayinfo = {
							pageSize: 1,
							yysj: `${currentMonthRange[0]},${currentMonthRange[1]}`
						}
						let tkinfo = {
							pageSize: 1,
							expansionTime: `${currentMonthRange[0]},${currentMonthRange[1]}`
						}
						if (this.newuserInfo.gw == '店助' || this.newuserInfo.gw == '店长') {
							yyinfo.djmd = this.newuserInfo.mdid || '暂无'
							yayinfo.storeId = this.newuserInfo.mdid || '暂无'
							tkinfo.storeId = this.newuserInfo.mdid || '暂无'
						} else {
							yyinfo.yyr = this.userInfo.userId
							yayinfo.yyr = this.userInfo.userId
							tkinfo.expansionUserId = this.userInfo.userId
						}
						// 获取预约数
						const appointmentRes = await this.API.getAppointmentList(yyinfo)

						if (appointmentRes.code === 200) {
							this.summaryData.appointmentCount = appointmentRes.data.pagination?.total || 0
						}

						// 获取邀请数
						const inviteRes = await this.API.getInviteList(yayinfo)

						if (inviteRes.code === 200) {
							this.summaryData.inviteCount = inviteRes.data.pagination?.total || 0
						}

						// 获取拓客数
						const expansionRes = await this.API.getExpansionList(tkinfo)

						if (expansionRes.code === 200) {
							this.summaryData.expansionCount = expansionRes.data.pagination?.total || 0
						}
					}
					let kainfo = {
						pageSize: 1,
						kdrq: `${currentMonthRange[0]},${currentMonthRange[1]}`
					}
					let hkinfo = {
						pageSize: 1,
						hksj: `${currentMonthRange[0]},${currentMonthRange[1]}`
					}
					let tkinfonew = {
						pageSize: 1,
						tksj: `${currentMonthRange[0]},${currentMonthRange[1]}`
					}
					if (this.newuserInfo.gw == '科技老师') {
						kainfo.kjblsId = this.userInfo.userId
						hkinfo.kjblsId = this.userInfo.userId
						tkinfonew.kjblsId = this.userInfo.userId
					} else if (this.newuserInfo.gw == '健康师') {
						kainfo.jksId = this.userInfo.userId
						hkinfo.jksId = this.userInfo.userId
						tkinfonew.jksId = this.userInfo.userId
					} else if (this.newuserInfo.gw == '店助' || this.newuserInfo.gw == '店长') {
						kainfo.djmd = this.newuserInfo.mdid || '暂无'
						hkinfo.md = this.newuserInfo.mdid || '暂无'
						tkinfonew.md = this.newuserInfo.mdid || '暂无'
					} else {
						kainfo.CreateUser = this.userInfo.userId
						hkinfo.czry = this.userInfo.userId
						tkinfonew.czry = this.userInfo.userId
					}
					// 获取开单数（本月）
					const hkRes = await this.API.getLxList(kainfo)

					if (hkRes.code === 200) {
						this.summaryData.hkCount = hkRes.data.pagination?.total || 0
					}
					// 获取耗卡数

					const consumeRes = await this.API.getConsumeList(hkinfo)

					if (consumeRes.code === 200) {
						this.summaryData.consumeCount = consumeRes.data.pagination?.total || 0
					}
					// 获取退卡数

					const refundRes = await this.API.getRefundList(tkinfonew)

					if (refundRes.code === 200) {
						this.summaryData.refundCount = refundRes.data.pagination?.total || 0
					}

				} catch (error) {
					console.error('获取统计数据失败:', error)
				}
			},

			// 获取当前月份字符串（yyyymm格式）
			getCurrentMonthStr() {
				const now = new Date()
				return uni.$u.timeFormat(now, 'yyyymm')
			},

			// 格式化日期为 ISO 8601 格式（YYYY-MM-DDTHH:mm:ss）
			formatDateToISO(timestamp) {
				const date = new Date(timestamp)
				return uni.$u.timeFormat(date, 'yyyy-mm-dd hh:MM:ss')
			},

			// 获取业绩数据
			async getPerformanceData() {
				try {
					const statisticsMonth = this.getCurrentMonthStr()
					const currentMonthRange = this.utils.getCurrentMonthRange()
					if (this.newuserInfo.gw == '科技老师') {
						const res = await performanceApi.GetTechTeacherStatistics({
							teacherId: this.userInfo.userId,
							startDate: this.formatDateToISO(currentMonthRange[0]),
							endDate: this.formatDateToISO(currentMonthRange[1])
						})
						if (res.code === 200 && res.data) {
							this.performanceData = res.data.length > 0 ? res.data[0] : {}
						}
					} else {
						const res = await performanceApi.getEmployeePerformanceStatistics({
							userId: this.userInfo.userId,
							statisticsMonth: statisticsMonth
						})
						if (res.code === 200 && res.data) {
							this.performanceData = res.data
						}
					}
				} catch (error) {
					console.error('获取业绩数据失败:', error)
				}
			},

			// 页面跳转
			goToPage(url) {
				uni.navigateTo({
					url: url
				})
			},

			// 显示修改密码弹窗
			showChangePasswordDialog() {
				this.passwordForm = {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				}
				this.showPasswordDialog = true
			},

			// 取消修改密码
			cancelChangePassword() {
				this.showPasswordDialog = false
				this.passwordForm = {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				}
			},

			// 确认修改密码
			confirmChangePassword() {
				// 验证输入
				if (!this.passwordForm.oldPassword) {
					uni.showToast({
						title: '请输入原密码',
						icon: 'none'
					})
					return
				}

				if (!this.passwordForm.newPassword) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					})
					return
				}

				if (this.passwordForm.newPassword.length < 6) {
					uni.showToast({
						title: '新密码长度不能少于6位',
						icon: 'none'
					})
					return
				}

				if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
					uni.showToast({
						title: '两次输入的新密码不一致',
						icon: 'none'
					})
					return
				}

				if (this.passwordForm.oldPassword === this.passwordForm.newPassword) {
					uni.showToast({
						title: '新密码不能与原密码相同',
						icon: 'none'
					})
					return
				}

				// 调用修改密码接口
				this.changePassword()
			},

			// 修改密码
			async changePassword() {
				try {
					uni.showLoading({
						title: '修改中...'
					})

					// 调用修改密码 API
					const res = await oauthApi.changePassword({
						userId: this.userInfo.userId,
						oldPassword: this.passwordForm.oldPassword,
						newPassword: this.passwordForm.newPassword
					})

					uni.hideLoading()

					if (res.code === 200) {
						uni.showToast({
							title: '密码修改成功',
							icon: 'success'
						})
						this.showPasswordDialog = false
						this.passwordForm = {
							oldPassword: '',
							newPassword: '',
							confirmPassword: ''
						}
					} else {
						uni.showToast({
							title: res.msg || '密码修改失败',
							icon: 'none'
						})
					}
				} catch (error) {
					uni.hideLoading()
					console.error('修改密码失败:', error)
					uni.showToast({
						title: '修改密码失败，请稍后重试',
						icon: 'none'
					})
				}
			},

			// 加载菜单数据
			loadMenuData() {
				// 先从本地存储读取
				const cachedData = uni.getStorageSync('appMenuData')
				if (cachedData && Array.isArray(cachedData) && cachedData.length > 0) {
					this.menuData = cachedData
					this.parseMenuData()
					return
				}
				
				// 如果本地没有，则调用 API
				const userInfo = uni.getStorageSync('userInfo')
				if (!userInfo || !userInfo.userId) {
					return
				}
				
				this.API.getAppAuthorize().then(res => {
					if (res.code === 200 && res.data) {
						this.menuData = res.data
						uni.setStorageSync('appMenuData', res.data)
						this.parseMenuData()
					}
				}).catch(err => {
					console.error('获取菜单数据失败:', err)
				})
			},
			
			// 解析菜单数据
			parseMenuData() {
				if (!this.menuData || this.menuData.length === 0) {
					return
				}
				
				// 找到根节点（fullName 为 "app我的" 的节点）
				const rootNode = this.menuData.find(item => item.fullName === 'app我的')
				if (!rootNode || !rootNode.children) {
					return
				}
				
				// 解析每个分组
				this.menuSections = {}
				rootNode.children.forEach(section => {
					if (section.children && section.children.length > 0) {
						// 有子节点的分组（如"个人服务"）
						this.menuSections[section.id] = {
							id: section.id,
							fullName: section.fullName,
							children: section.children.map(item => {
								return {
									id: item.id,
									fullName: item.fullName,
									icon: (item.description || '').trim(),
									sortCode: item.sortCode || 0
								}
							}).sort((a, b) => a.sortCode - b.sortCode)
						}
					} else {
						// 叶子节点（如"数据统计"、"我的数据"）
						this.menuSections[section.id] = {
							id: section.id,
							fullName: section.fullName,
							children: [],
							sortCode: section.sortCode || 0
						}
					}
				})
			},
			
			// 根据分组名称获取分组数据
			getSectionByFullName(fullName) {
				if (!this.menuSections || Object.keys(this.menuSections).length === 0) {
					return null
				}
				
				const section = Object.values(this.menuSections).find(item => item.fullName === fullName)
				return section || null
			},
			
			// 处理菜单项点击
			handleMenuItemClick(item) {
				const handlerMap = {
					'我的工资': () => {
						this.goToPage('/pagesA/salary-query/salary-query')
					},
					'修改密码': () => {
						this.showChangePasswordDialog()
					},
					'退出登录': () => {
						this.handleLogout()
					}
				}
				
				const handler = handlerMap[item.fullName]
				if (handler) {
					handler()
				}
			},
			
			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							this.API.logout().then(res => {
								if (res.code == 200) {
									// 清除本地存储
									uni.clearStorageSync()
									// 跳转到登录页
									uni.reLaunch({
										url: '/pages/login/login'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-y: auto;
		overflow-y: scroll;
	}


	.main {
		position: relative;
		// z-index: 111;
		padding: 0 40rpx;
		top: 90rpx;
		/* #ifdef  MP-WEIXIN */
		top: 120rpx;
		/* #endif */

	}

	/* 用户信息卡片 - 结合my.vue和me copy.vue的设计 */
	.user-card {
		position: relative;
		margin: 30rpx 0;
		// margin-bottom: 40rpx;
		animation: slideDown 0.4s ease-out;
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(20px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		border-radius: 24rpx;
		box-shadow:
			0 8rpx 32rpx rgba(0, 0, 0, 0.08),
			0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		overflow: hidden;
	}

	.user-card-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: transparent;
	}

	.user-card-content {
		position: relative;
		padding: 30rpx;
		background: transparent;
	}

	.user-main {
		display: flex;
		align-items: center;
	}

	.avatar-container {
		position: relative;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.avatar-ring {
		position: absolute;
		top: -3rpx;
		left: -3rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		border: 2rpx solid rgba(67, 160, 71, 0.3);
		animation: rotate 3s linear infinite;
	}

	.avatar {
		width: 94rpx;
		height: 94rpx;
		border-radius: 47rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.9);
		position: relative;
		z-index: 1;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.user-info-wrapper {
		flex: 1;
		min-width: 0;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #303133;
		margin-bottom: 16rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.user-meta {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 16rpx;
		margin-top: 8rpx;
	}

	.role-badge {
		display: inline-flex;
		align-items: center;
		background: rgba(67, 160, 71, 0.1);
		border-radius: 12rpx;
		padding: 6rpx 12rpx;
		border: 1rpx solid rgba(67, 160, 71, 0.2);
		font-size: 24rpx;
		color: #43a047;
		font-weight: 500;
		gap: 6rpx;
		// height: 36rpx;
		box-sizing: border-box;
	}

	.role-badge text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 120rpx;
		// line-height: 24rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.store-badge {
		display: inline-flex;
		align-items: center;
		background: rgba(64, 158, 255, 0.1);
		border-radius: 12rpx;
		padding: 6rpx 12rpx;
		border: 1rpx solid rgba(64, 158, 255, 0.2);
		font-size: 24rpx;
		color: #409EFF;
		font-weight: 500;
		gap: 6rpx;
		// height: 36rpx;
		box-sizing: border-box;
	}

	.store-badge.jsj-badge {
		background: rgba(255, 152, 0, 0.1);
		border: 1rpx solid rgba(255, 152, 0, 0.2);
		color: #ff9800;
	}

	.store-badge text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 120rpx;
		// line-height: 24rpx;
		display: inline-block;
		vertical-align: middle;
	}

	/* 毛玻璃容器样式 - 参考home.vue */
	.warpboxss {
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(20px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		padding: 30rpx;
		border-radius: 24rpx;
		box-shadow:
			0 8rpx 32rpx rgba(0, 0, 0, 0.08),
			0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		margin-bottom: 30rpx;

		.warpboxs-small-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			font-weight: 600;
			color: #1f2937;


			.warpboxs-small-title-line {
				display: inline-block;
				background: linear-gradient(180deg, #43a047 0%, #66bb6a 100%);
				height: 26rpx;
				width: 10rpx;
				margin-right: 12rpx;
				border-radius: 18rpx;
				box-shadow:
					0 2rpx 8rpx rgba(67, 160, 71, 0.4),
					0 0 12rpx rgba(67, 160, 71, 0.3),
					inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
				position: relative;

				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					border-radius: 3rpx;
					background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
					pointer-events: none;
				}
			}
		}
	}

	/* 统计数据区域 */
	.stats-section {
		margin-top: 0;
		animation: slideDown 0.5s ease-out;
	}

	.stats-container {
		background: transparent;
		border-radius: 20rpx;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 14rpx;
	}

	.stat-item {
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(10px) saturate(150%);
		-webkit-backdrop-filter: blur(10px) saturate(150%);
		border-radius: 16rpx;
		padding: 18rpx 14rpx;
		display: flex;
		align-items: center;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		cursor: pointer;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03), 0 2rpx 6rpx rgba(0, 0, 0, 0.02);
	}

	.stat-item:active {
		transform: translateY(-2rpx) scale(0.98);
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05), 0 3rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	.stat-icon {
		width: 56rpx;
		height: 56rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		// margin-right: 12rpx;
		flex-shrink: 0;
		position: relative;

		image {
			height: 56rpx;
			// margin: 0 auto;
			vertical-align: middle;
			// position: relative;
		}
	}

	/* 小图标样式 - 用于卡片中的图标 */
	.stat-icon-small {
		width: 48rpx;
		height: 48rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 8rpx;
		flex-shrink: 0;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 12rpx;
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
			opacity: 1;
			z-index: 1;
		}

		&::after {
			content: '';
			position: absolute;
			top: -50%;
			left: -50%;
			width: 200%;
			height: 200%;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
			transition: transform 0.6s ease;
			transform: scale(0);
			z-index: 2;
		}

		image {
			width: 28rpx;
			height: 28rpx;
			position: relative;
			z-index: 3;
			filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
			transition: transform 300ms ease, opacity 300ms ease;
		}

		&.icon-circle-bg-1 {
			background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%);
			box-shadow:
				0 6rpx 20rpx rgba(30, 136, 229, 0.35),
				0 2rpx 8rpx rgba(30, 136, 229, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-2 {
			background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%);
			box-shadow:
				0 6rpx 20rpx rgba(67, 160, 71, 0.35),
				0 2rpx 8rpx rgba(67, 160, 71, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-3 {
			background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%);
			box-shadow:
				0 6rpx 20rpx rgba(211, 47, 47, 0.35),
				0 2rpx 8rpx rgba(211, 47, 47, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-4 {
			background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%);
			box-shadow:
				0 6rpx 20rpx rgba(0, 131, 143, 0.35),
				0 2rpx 8rpx rgba(0, 131, 143, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-5 {
			background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%);
			box-shadow:
				0 6rpx 20rpx rgba(245, 124, 0, 0.35),
				0 2rpx 8rpx rgba(245, 124, 0, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-6 {
			background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
			box-shadow:
				0 6rpx 20rpx rgba(123, 31, 162, 0.35),
				0 2rpx 8rpx rgba(123, 31, 162, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-7 {
			background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%);
			box-shadow:
				0 6rpx 20rpx rgba(194, 24, 91, 0.35),
				0 2rpx 8rpx rgba(194, 24, 91, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-8 {
			background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%);
			box-shadow:
				0 6rpx 20rpx rgba(249, 168, 37, 0.35),
				0 2rpx 8rpx rgba(249, 168, 37, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-red {
			background: linear-gradient(135deg, #EF5350 0%, #ff6b6b 50%, #e53e3e 100%);
			box-shadow:
				0 6rpx 20rpx rgba(239, 83, 80, 0.35),
				0 2rpx 8rpx rgba(239, 83, 80, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
	}

	/* 计数图标样式 - 用于footer中的图标 */
	.count-icon {
		width: 36rpx;
		height: 36rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 8rpx;
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
			opacity: 1;
			z-index: 1;
		}

		image {
			width: 20rpx;
			height: 20rpx;
			position: relative;
			z-index: 2;
			filter: brightness(1.2) drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.2));
		}

		&.icon-circle-bg-1 {
			background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%);
			box-shadow:
				0 4rpx 12rpx rgba(30, 136, 229, 0.3),
				0 2rpx 6rpx rgba(30, 136, 229, 0.2),
				inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3),
				inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-2 {
			background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%);
			box-shadow:
				0 4rpx 12rpx rgba(67, 160, 71, 0.3),
				0 2rpx 6rpx rgba(67, 160, 71, 0.2),
				inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3),
				inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-3 {
			background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%);
			box-shadow:
				0 4rpx 12rpx rgba(211, 47, 47, 0.3),
				0 2rpx 6rpx rgba(211, 47, 47, 0.2),
				inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3),
				inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-4 {
			background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%);
			box-shadow:
				0 4rpx 12rpx rgba(0, 131, 143, 0.3),
				0 2rpx 6rpx rgba(0, 131, 143, 0.2),
				inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3),
				inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-5 {
			background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%);
			box-shadow:
				0 4rpx 12rpx rgba(245, 124, 0, 0.3),
				0 2rpx 6rpx rgba(245, 124, 0, 0.2),
				inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3),
				inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-6 {
			background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
			box-shadow:
				0 4rpx 12rpx rgba(123, 31, 162, 0.3),
				0 2rpx 6rpx rgba(123, 31, 162, 0.2),
				inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3),
				inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-7 {
			background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%);
			box-shadow:
				0 4rpx 12rpx rgba(194, 24, 91, 0.3),
				0 2rpx 6rpx rgba(194, 24, 91, 0.2),
				inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3),
				inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1);
		}

		&.icon-circle-bg-8 {
			background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%);
			box-shadow:
				0 4rpx 12rpx rgba(249, 168, 37, 0.3),
				0 2rpx 6rpx rgba(249, 168, 37, 0.2),
				inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3),
				inset 0 -1rpx 2rpx rgba(0, 0, 0, 0.1);
		}
	}

	.stat-info {
		flex: 1;
		min-width: 0;
	}

	.stat-num {
		font-size: 28rpx;
		font-weight: 600;
		color: #303133;
		line-height: 1.2;
		margin-bottom: 4rpx;
		text-align: center;
	}

	.stat-name {
		font-size: 24rpx;
		color: #909399;
		text-align: center;
	}

	/* 业绩数据板块样式 */
	.performance-layout {
		display: flex;
		gap: 20rpx;
		margin-bottom: 40rpx;
	}

	.performance-left {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 28rpx;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.9);
	}

	.performance-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.performance-text-item {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);
		position: relative;
	}

	.performance-text-item:last-of-type {
		border-bottom: none;
		padding-bottom: 0;
	}

	.performance-text-item:nth-child(1) {
		padding-top: 0;
	}

	.performance-text-item:nth-child(1) .performance-text-value {
		color: #f57c00;
		font-size: 36rpx;
	}

	.performance-text-item:nth-child(2) .performance-text-value {
		color: #c62828;
		font-size: 36rpx;
	}

	.performance-text-label {
		font-size: 24rpx;
		color: #909399;
		font-weight: 400;
		letter-spacing: 0.5rpx;
	}

	.performance-text-value {
		font-size: 32rpx;
		font-weight: 700;
		line-height: 1.3;
	}

	.performance-radio-group {
		display: flex;
		gap: 16rpx;
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.08);
	}

	.performance-radio-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		padding: 20rpx 12rpx;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 0.6);
		min-height: 120rpx;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.performance-radio-item:nth-child(1) {
		background: linear-gradient(135deg, rgba(224, 247, 250, 0.8) 60%, rgba(178, 235, 242, 0.8) 100%);
		box-shadow: 0 2rpx 12rpx rgba(0, 188, 212, 0.15);
	}

	.performance-radio-item:nth-child(1) .radio-value {
		color: #00838f;
	}

	.performance-radio-item:nth-child(2) {
		background: linear-gradient(135deg, rgba(255, 249, 196, 0.8) 60%, rgba(255, 245, 157, 0.8) 100%);
		box-shadow: 0 2rpx 12rpx rgba(255, 193, 7, 0.15);
	}

	.performance-radio-item:nth-child(2) .radio-value {
		color: #f57f17;
	}

	.radio-value {
		font-size: 36rpx;
		font-weight: 700;
		line-height: 1.2;
	}

	.radio-label {
		font-size: 24rpx;
		color: #606266;
		font-weight: 500;
	}

	.performance-box {
		flex: 1;
		border-radius: 16rpx;
		padding: 24rpx 20rpx;
		backdrop-filter: blur(10rpx);
		-webkit-backdrop-filter: blur(10rpx);
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		min-height: 120rpx;
		justify-content: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.performance-box-label {
		font-size: 26rpx;
		color: #303133;
		font-weight: 500;
	}

	.performance-box-value {
		font-size: 32rpx;
		font-weight: bold;
	}

	.performance-box-1 {
		background: linear-gradient(135deg, rgba(227, 242, 253, 0.7) 60%, rgba(187, 222, 251, 0.7) 100%);
		box-shadow: 0 2rpx 8rpx rgba(33, 150, 243, 0.15);
	}

	.performance-box-1 .performance-box-value {
		color: #1976d2;
	}

	.performance-box-2 {
		background: linear-gradient(135deg, rgba(255, 243, 224, 0.7) 60%, rgba(255, 224, 178, 0.7) 100%);
		box-shadow: 0 2rpx 8rpx rgba(255, 152, 0, 0.15);
	}

	.performance-box-2 .performance-box-value {
		color: #f57c00;
	}

	.performance-box-3 {
		background: linear-gradient(135deg, rgba(232, 245, 233, 0.7) 60%, rgba(200, 230, 201, 0.7) 100%);
		box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.15);
	}

	.performance-box-3 .performance-box-value {
		color: #388e3c;
	}

	.performance-card {
		background: transparent;
		border-radius: 20rpx;
		padding: 0;
		margin-bottom: 40rpx;
	}

	.performance-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		gap: 16rpx;
	}

	.performance-row:last-child {
		margin-bottom: 0;
	}

	.performance-item {
		flex: 1;
		text-align: center;
		padding: 16rpx 8rpx;
		border-radius: 16rpx;
		margin: 0 6rpx;
		backdrop-filter: blur(10rpx);
		-webkit-backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;
	}

	/* 业绩项1 - 蓝色 */
	.performance-item-1 {
		background: linear-gradient(135deg, rgba(227, 242, 253, 0.7) 60%, rgba(187, 222, 251, 0.7) 100%);
		box-shadow: 0 2rpx 8rpx rgba(33, 150, 243, 0.15);
	}

	.performance-item-1 .performance-value {
		color: #1976d2;
	}

	.performance-item-1 .performance-label {
		color: #1565c0;
	}

	/* 业绩项2 - 橙色 */
	.performance-item-2 {
		background: linear-gradient(135deg, rgba(255, 243, 224, 0.7) 60%, rgba(255, 224, 178, 0.7) 100%);
		box-shadow: 0 2rpx 8rpx rgba(255, 152, 0, 0.15);
	}

	.performance-item-2 .performance-value {
		color: #f57c00;
	}

	.performance-item-2 .performance-label {
		color: #e65100;
	}

	/* 业绩项3 - 绿色 */
	.performance-item-3 {
		background: linear-gradient(135deg, rgba(232, 245, 233, 0.7) 60%, rgba(200, 230, 201, 0.7) 100%);
		box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.15);
	}

	.performance-item-3 .performance-value {
		color: #388e3c;
	}

	.performance-item-3 .performance-label {
		color: #2e7d32;
	}

	/* 业绩项4 - 紫色 */
	.performance-item-4 {
		background: linear-gradient(135deg, rgba(243, 229, 245, 0.7) 60%, rgba(225, 190, 231, 0.7) 100%);
		box-shadow: 0 2rpx 8rpx rgba(156, 39, 176, 0.15);
	}

	.performance-item-4 .performance-value {
		color: #7b1fa2;
	}

	.performance-item-4 .performance-label {
		color: #6a1b9a;
	}

	/* 业绩项5 - 红色 */
	.performance-item-5 {
		background: linear-gradient(135deg, rgba(255, 235, 238, 0.7) 60%, rgba(255, 205, 210, 0.7) 100%);
		box-shadow: 0 2rpx 8rpx rgba(244, 67, 54, 0.15);
	}

	.performance-item-5 .performance-value {
		color: #c62828;
	}

	.performance-item-5 .performance-label {
		color: #b71c1c;
	}

	/* 业绩项6 - 青色 */
	.performance-item-6 {
		background: linear-gradient(135deg, rgba(224, 247, 250, 0.7) 60%, rgba(178, 235, 242, 0.7) 100%);
		box-shadow: 0 2rpx 8rpx rgba(0, 188, 212, 0.15);
	}

	.performance-item-6 .performance-value {
		color: #00838f;
	}

	.performance-item-6 .performance-label {
		color: #006064;
	}

	/* 业绩项7 - 黄色 */
	.performance-item-7 {
		background: linear-gradient(135deg, rgba(255, 249, 196, 0.7) 60%, rgba(255, 245, 157, 0.7) 100%);
		box-shadow: 0 2rpx 8rpx rgba(255, 193, 7, 0.15);
	}

	.performance-item-7 .performance-value {
		color: #f57f17;
	}

	.performance-item-7 .performance-label {
		color: #f57c00;
	}

	.performance-value {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 6rpx;
		line-height: 1.2;
	}

	.performance-label {
		font-size: 22rpx;
	}

	/* 个人服务标题样式 */
	.warpboxs-small-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		font-weight: 600;
		color: #1f2937;
		// margin: 24rpx 0 20rpx 0;

		.warpboxs-small-title-line {
			display: inline-block;
			background: linear-gradient(180deg, #43a047 0%, #66bb6a 100%);
			height: 26rpx;
			width: 10rpx;
			margin-right: 12rpx;
			border-radius: 18rpx;
			box-shadow:
				0 2rpx 8rpx rgba(67, 160, 71, 0.4),
				0 0 12rpx rgba(67, 160, 71, 0.3),
				inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
			position: relative;

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border-radius: 3rpx;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
				pointer-events: none;
			}
		}
	}

	/* 账户设置区域 */
	.settings-section {
		margin-top: 0;
		animation: slideDown 0.6s ease-out;
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(20px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		padding: 30rpx;
		border-radius: 24rpx;
		box-shadow:
			0 8rpx 32rpx rgba(0, 0, 0, 0.08),
			0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		margin-bottom: 40rpx;

		.settings-list {
			background: transparent;
		}

		.settings-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 0;
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
			cursor: pointer;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			position: relative;
			border-radius: 12rpx;
			margin: 0 -10rpx;
			padding-left: 10rpx;
			padding-right: 10rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				width: 0;
				background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent);
				transition: width 0.3s ease;
				border-radius: 12rpx;
			}

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

			&:active {
				transform: translateX(4rpx);
				background: rgba(255, 255, 255, 0.05);
			}

			&:active::before {
				width: 100%;
			}
		}

		.settings-left {
			display: flex;
			align-items: center;
			flex: 1;
			position: relative;
			z-index: 1;
		}

		.settings-icon-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 16rpx;
			flex-shrink: 0;
			width: 48rpx;
			height: 48rpx;
			transition: all 0.3s ease;

			image {
				width: 35rpx;
				height: 35rpx;
			}
		}

		.settings-item:active .settings-icon-wrapper {
			transform: scale(1.1);
		}

		.settings-text {
			font-size: 28rpx;
			color: #1f2937;
			line-height: 1.5;
			font-weight: 500;
		}
	}

	/* 动画效果 */
	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	/* 修改密码弹窗样式 */
	.password-dialog {
		padding: 40rpx;
		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
		border-radius: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
		min-width: 600rpx;
	}

	.dialog-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #303133;
		text-align: center;
		margin-bottom: 40rpx;
		position: relative;
		padding-bottom: 20rpx;
	}

	.dialog-title::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background: linear-gradient(90deg, #43a047 0%, #66bb6a 100%);
		border-radius: 2rpx;
	}

	.dialog-content {
		margin-bottom: 40rpx;
	}

	.form-item {
		margin-bottom: 28rpx;
	}

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

	.form-label {
		display: block;
		font-size: 28rpx;
		color: #606266;
		margin-bottom: 12rpx;
		font-weight: 500;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		padding: 0 24rpx;
		border: 2rpx solid #e4e7ed;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #303133;
		box-sizing: border-box;
		background-color: #ffffff;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	}

	.form-input:focus {
		border-color: #43a047;
		background-color: #fff;
		box-shadow: 0 2rpx 12rpx rgba(67, 160, 71, 0.15);
	}

	.dialog-footer {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
		margin-top: 40rpx;
	}

	.dialog-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
	}

	.cancel-btn {
		background-color: #f5f7fa;
		color: #606266;
		border: 1rpx solid #e4e7ed;
	}

	.cancel-btn:active {
		background-color: #e4e7ed;
		transform: scale(0.98);
		box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.confirm-btn {
		background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
		color: #fff;
		border: none;
	}

	.confirm-btn:active {
		background: linear-gradient(135deg, #388e3c 0%, #43a047 100%);
		transform: scale(0.98);
		box-shadow: 0 1rpx 4rpx rgba(67, 160, 71, 0.3);
	}

	/* 优化后的业绩数据样式 */
	.performance-grid {
		display: flex;
		align-items: flex-start;
		gap: 16rpx;
		margin-bottom: 30rpx;
	}

	.glass-card {
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(20px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		border-radius: 20rpx;
		box-shadow:
			0 8rpx 32rpx rgba(0, 0, 0, 0.08),
			0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.glass-card:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}


	.billing-card {
		width: 350rpx;
		height: 350rpx;
		aspect-ratio: 1 / 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 24rpx;
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(20px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		flex-shrink: 0;
		box-sizing: border-box;
	}

	.billing-main {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		width: 100%;
		padding: 0 8rpx;
	}

	.billing-item {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		gap: 20rpx;
	}

	.billing-right {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		flex: 1;
	}

	.billing-card .stat-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		gap: 20rpx;
	}

	.billing-card .card-label {
		font-size: 22rpx;
		font-weight: 500;
		color: #666;
		// margin-top: 8rpx;
	}

	.billing-card .stat-icon-small {
		width: 64rpx;
		height: 64rpx;
		border-radius: 14rpx;
		box-shadow: none !important;
		flex-shrink: 0;
	}

	.billing-card .stat-icon-small image {
		width: 36rpx;
		height: 36rpx;
		filter: none !important;
	}

	.billing-value {
		font-size: 38rpx;
		font-weight: bold;
		color: #1f2937;
		line-height: 1.2;
	}

	.refund-value {
		font-size: 24rpx;
		color: #999999;
		font-style: italic;
		margin-top: 4rpx;
	}

	.billing-footer {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding-top: 16rpx;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
		margin-top: auto;
		gap: 20rpx;
	}

	.count-item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
	}

	.count-divider {
		width: 1rpx;
		height: 32rpx;
		background: rgba(0, 0, 0, 0.1);
		flex-shrink: 0;
	}

	.count-text {
		font-size: 26rpx;
		color: #666666;
		line-height: 1.5;
	}

	.right-column {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		flex: 1;
		height: 350rpx;
		min-width: 0;
		box-sizing: border-box;
	}

	.stat-card {
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		flex: 1;
		min-height: 0;
		height: 200rpx;
	}

	.stat-item-row {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		gap: 12rpx;
	}

	.stat-info-right {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		flex: 1;
	}

	.stat-card .stat-icon-small {
		box-shadow: none !important;
		flex-shrink: 0;
	}

	.stat-card .stat-icon-small image {
		filter: none !important;
	}

	.billing-footer .count-icon {
		box-shadow: none !important;
	}

	.billing-footer .count-icon image {
		filter: none !important;
	}

	.stat-content {
		position: relative;
		z-index: 2;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.stat-card .card-label {
		font-size: 22rpx;
		color: #666;
		// font-weight: 500;
		// margin-top: 8rpx;
	}

	.stat-value {
		font-size: 32rpx;
		font-weight: bold;
		color: #1f2937;
		line-height: 1.2;
	}

	.bg-icon {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		opacity: 0.2;
		z-index: 1;
		pointer-events: none;
	}
</style>