<template>
	<view class="page">
		<view class="my-top">
			<view class="head">
				<view class="logo-title"></view>
				<view class="title">个人中心</view>
				<view class="setting-mess"></view>
			</view>
		</view>

		<view class="main">
			<!-- 用户信息卡片 - 科技感设计 -->
			<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="/static/head.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="medal" size="22" color="#43a047"></u-icon> -->
									<text>{{ newuserInfo.gw || '员工' }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="store-info-glass">
						<view class="store-item">
							<view class="store-icon">
								<u-icon name="home" size="24" color="#43a047"></u-icon>
							</view>
							<view class="store-text">
								<text class="store-label">门店</text>
								<text class="store-value">{{ jsjinfo.storeName || '暂无' }}</text>
							</view>
						</view>
						<view class="store-item">
							<view class="store-icon">
								<u-icon name="star" size="24" color="#ff9800"></u-icon>
							</view>
							<view class="store-text">
								<text class="store-label">金三角</text>
								<text class="store-value">{{ jsjinfo.jsjName || '暂无' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 统计数据区域 - 紧凑设计 -->
			<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" style="background-color: #e3f2fd;">
							<u-icon name="man-add" size="32" color="#2196f3"></u-icon>
						</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" style="background-color: #f3e5f5;">
							<u-icon name="account" size="32" color="#9c27b0"></u-icon>
						</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" style="background-color: #e8f5e9;">
							<u-icon name="calendar" size="32" color="#4caf50"></u-icon>
						</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" style="background-color: #fff3e0;">
							<u-icon name="list" size="32" color="#ff9800"></u-icon>
						</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" style="background-color: #e1f5fe;">
							<u-icon name="minus-square-fill" size="32" color="#03a9f4"></u-icon>
						</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" style="background-color: #ffebee;">
							<u-icon name="minus-circle" size="32" color="#f44336"></u-icon>
						</view>
						<view class="stat-info">
							<view class="stat-num">{{ summaryData.refundCount || 0 }}</view>
							<view class="stat-name">退卡数</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 账户设置区域 -->
			<view class="settings-section">
				<view class="settings-card">
					<view class="settings-item" @click="showChangePasswordDialog">
						<view class="settings-left">
							<view class="settings-icon-wrapper" style="background-color: #e8f5e9;">
								<image src="/static/icon1.png" mode="aspectFit"></image>
							</view>
							<text class="settings-text">修改密码</text>
						</view>
						<u-icon name="arrow-right" size="20" color="#c0c4cc"></u-icon>
					</view>
					<view class="settings-item" @click="handleLogout">
						<view class="settings-left">
							<view class="settings-icon-wrapper" style="background-color: #ffebee;">
								<image src="/static/icon2.png" mode="aspectFit"></image>
							</view>
							<text class="settings-text">退出登录</text>
						</view>
						<u-icon name="arrow-right" size="20" color="#c0c4cc"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 修改密码弹窗 -->
		<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>
		
		<!-- 自定义 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 CustomTabBar from '@/components/custom-tab-bar/index.vue'
	
	export default {
		components: {
			CustomTabBar
		},
		data() {
			return {
				statusBarHeight: 0,
				userInfo: {},
				newuserInfo: {},
				jsjinfo: {
					storeName:'',
					jsjName:''
				},
				summaryData: {
					appointmentCount: 0,
					inviteCount: 0,
					expansionCount: 0,
					hkCount: 0,
					consumeCount: 0,
					refundCount: 0
				},
				showPasswordDialog: false,
				passwordForm: {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				}
			}
		},

		computed: {
			iskjb() {
				if (this.newuserInfo.gw == '科技老师') {
					return false
				}
				return true
			}
		},

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

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

		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) {
									this.jsjinfo = resjsj.data
								}
							})
							uni.setStorageSync('newuserInfo', this.newuserInfo)
							this.getSummaryData()
						}
					}
				})
			},

			// 获取系统信息
			getSystemInfo() {
				uni.getSystemInfo({
					success: (res) => {
						this.statusBarHeight = res.statusBarHeight
					}
				})
			},

			// 检查登录状态
			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)
				}
			},

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

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

			// 取消修改密码
			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'
					})
				}
			},

			// 退出登录
			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: absolute;
		width: 100%;
		// height: 100%;
		background-color: #f5f7fa;
		height: 100vh;
		overflow-y: scroll;
	}

	.my-top {
		position: absolute;
		width: 100%;
		height: 300rpx;
		/* #ifdef MP */
		height: 360rpx;
		/* #endif */
		overflow: hidden;
	}

	.head {
		background-color: #fff;
		border-bottom: 1rpx solid #e4e7ed;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100rpx;
		/* #ifdef APP-PLUS */
		height: calc(100rpx + var(--status-bar-height));
		padding-top: var(--status-bar-height);
		/* #endif */
		/* #ifdef MP */
		height: calc(120rpx + var(--status-bar-height));
		padding-top: calc(40rpx + var(--status-bar-height));
		/* #endif */
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	}

	.logo-title {
		width: 8%;
	}

	.head .title {
		width: 94%;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		color: #303133;
	}

	.setting-mess {
		width: 8%;
		display: flex;
		align-items: center;
	}

	.main {
		position: relative;
		padding-bottom: 120rpx;
		top: 120rpx;
		/* #ifdef MP */
		top: 190rpx;
		padding-bottom: 180rpx;
		/* #endif */
		padding: 0 40rpx;
	}

	/* 用户信息卡片 - 商业化紧凑设计 */
	.user-card {
		position: relative;
		margin: 24rpx 0;
		border-radius: 20rpx;
		overflow: hidden;
		animation: slideDown 0.4s ease-out;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.user-card-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, #e8f4f8 0%, #f0e8f5 50%, #f5f0e8 100%);
	}

	.user-card-content {
		position: relative;
		padding: 24rpx;
		background: rgba(255, 255, 255, 0.6);
		backdrop-filter: blur(10rpx);
		-webkit-backdrop-filter: blur(10rpx);
	}

	.user-main {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.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: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

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

	.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;
	}

	.role-badge text {
		margin-left: 6rpx;
	}

	.store-info-glass {
		display: flex;
		gap: 12rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.06);
	}

	.store-item {
		flex: 1;
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(8rpx);
		-webkit-backdrop-filter: blur(8rpx);
		border-radius: 12rpx;
		padding: 12rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.05);
		box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.04);
	}

	.store-icon {
		width: 44rpx;
		height: 44rpx;
		// background: rgba(67, 160, 71, 0.1);
		// border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
		flex-shrink: 0;
	}

	.store-text {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.store-label {
		font-size: 24rpx;
		color: #909399;
		margin-bottom: 4rpx;
	}

	.store-value {
		font-size: 28rpx;
		color: #303133;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

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

	.stats-container {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 18rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.06);
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 14rpx;
	}

	.stat-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 18rpx 14rpx;
		display: flex;
		align-items: center;
		border: 1rpx solid #f0f2f5;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		cursor: pointer;
	}

	.stat-item:active {
		transform: translateY(-2rpx) scale(0.98);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.stat-icon {
		width: 56rpx;
		height: 56rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12rpx;
		flex-shrink: 0;
	}

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

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

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

	/* 账户设置区域 - 商业化设计 */
	.settings-section {
		margin: 24rpx 0;
		animation: slideDown 0.6s ease-out;
	}

	.settings-card {
		background: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		border: 1rpx solid rgba(0, 0, 0, 0.06);
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.settings-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 32rpx;
		border-bottom: 1rpx solid #f0f2f5;
		cursor: pointer;
		transition: all 0.3s ease;
		background-color: #ffffff;
	}

	.settings-item:last-child {
		border-bottom: none;
	}

	.settings-item:active {
		background-color: #f8f9fa;
		transform: translateX(4rpx);
	}

	.settings-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.settings-icon-wrapper {
		width: 72rpx;
		height: 72rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.settings-text {
		font-size: 28rpx;
		color: #303133;
		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);
	}
</style>