<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="nav-back" @click="goBack">
				<text class="iconfont">←</text>
			</view>
			<view class="nav-title">分类管理</view>
			<view class="nav-more">
				<text class="iconfont">···</text>
			</view>
		</view>

		<!-- 搜索框 -->
		<view class="search-bar">
			<view class="search-input">
				<text class="search-icon">🔍</text>
				<input type="text" placeholder="搜索分类名称" v-model="searchText" class="input" />
			</view>
		</view>

		<!-- 公告栏 -->
		<view class="notice-bar">
			<view class="notice-icon">ⓘ</view>
			<text class="notice-text">线上渠道分类展示规则公告</text>
			<view class="notice-action" @click="viewNotice">查看 &gt;</view>
		</view>

		<!-- 分类列表主体 -->
		<view class="category-list">
			<!-- 1. 非处方药(OTC) - 系统固定 -->
			<view class="category-item">
				<view class="category-header" @click="toggleExpand('otc')">
					<text class="expand-icon">{{ expanded.otc ? '▼' : '▶' }}</text>
					<text class="category-name">非处方药(OTC)</text>
					<view class="category-actions" @click.stop="showActions('otc', 1)">
						<text class="iconfont">···</text>
					</view>
				</view>
				<view v-if="expanded.otc" class="sub-category-group level2">
					<view class="sub-category-item">
						<text class="sub-category-name">甲类非处方药</text>
						<view class="category-actions" @click.stop="showActions('otc-1', 2)">
							<text class="iconfont">···</text>
						</view>
					</view>
					<view class="sub-category-item">
						<text class="sub-category-name">乙类非处方药</text>
						<view class="category-actions" @click.stop="showActions('otc-2', 2)">
							<text class="iconfont">···</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 2. 处方药(RX) - 系统固定 -->
			<view class="category-item">
				<view class="category-header no-expand">
					<text class="expand-icon placeholder"></text>
					<text class="category-name">处方药(RX)</text>
					<view class="category-actions" @click.stop="showActions('rx', 1)">
						<text class="iconfont">···</text>
					</view>
				</view>
			</view>

			<!-- 3. 兽用非处方药 - 系统固定 -->
			<view class="category-item">
				<view class="category-header no-expand">
					<text class="expand-icon placeholder"></text>
					<text class="category-name">兽用非处方药</text>
					<view class="category-actions" @click.stop="showActions('vetOtc', 1)">
						<text class="iconfont">···</text>
					</view>
				</view>
			</view>

			<!-- 4. 兽用处方药 - 系统固定 -->
			<view class="category-item">
				<view class="category-header no-expand">
					<text class="expand-icon placeholder"></text>
					<text class="category-name">兽用处方药</text>
					<view class="category-actions" @click.stop="showActions('vetRx', 1)">
						<text class="iconfont">···</text>
					</view>
				</view>
			</view>
			
			<!-- 加载状态 -->
			<view v-if="loading" class="loading">
				<text>加载中...</text>
			</view>
			
			<!-- 5. 自定义分类（从API获取） -->
			<view v-for="category in categories" :key="category.id" class="category-item">
				<!-- 一级分类头部 -->
				<view 
					class="category-header" 
					@click="toggleExpand(category.id)"
				>
					<text class="expand-icon">{{ expanded[category.id] ? '▼' : '▶' }}</text>
					<text class="category-name">{{ category.classificationName }}</text>
					<view class="menu-container" style="position: relative;">
						<view class="menu-btn" @click.stop="toggleMenuOptions(category.id, 1)">
							<text class="menu-icon">···</text>
						</view>
						<!-- 菜单选项列表 -->
						<view v-if="showMenuOptions && selectedCategoryId === category.id" class="menu-options">
							<!-- 重命名选项 -->
							<view class="menu-option" @click.stop="showRenameDialog(category.id)">
								<text class="rename-icon">✏️</text>
								<text>重命名</text>
							</view>
							<!-- 删除分类选项 -->
							<view class="menu-option delete-option" @click.stop="showDeleteConfirm(category.id)">
								<text class="trash-icon">🗑️</text>
								<text>删除分类</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 二级分类区域 -->
				<view v-if="expanded[category.id]" class="sub-category-group level2">
					<!-- 循环渲染每一个二级分类 -->
					<view v-for="subCategory in category.children" :key="subCategory.id">
						
						<!-- 二级分类条目 -->
						<view 
							class="sub-category-item"
							@click="toggleExpand(subCategory.id)"
						>
							<text class="expand-icon">{{ expanded[subCategory.id] ? '▼' : '▶' }}</text>
							<text class="sub-category-name">{{ subCategory.classificationName }}</text>
							<view class="menu-container" style="position: relative;">
								<view class="menu-btn" @click.stop="toggleMenuOptions(subCategory.id, 2)">
									<text class="menu-icon">···</text>
								</view>
								<!-- 菜单选项列表 -->
								<view v-if="showMenuOptions && selectedCategoryId === subCategory.id" class="menu-options">
									<!-- 重命名选项 -->
									<view class="menu-option" @click.stop="showRenameDialog(subCategory.id)">
										<text class="rename-icon">✏️</text>
										<text>重命名</text>
									</view>
									<!-- 删除分类选项 -->
									<view class="menu-option delete-option" @click.stop="showDeleteConfirm(subCategory.id)">
										<text class="trash-icon">🗑️</text>
										<text>删除分类</text>
									</view>
								</view>
							</view>
						</view>

						<!-- 🔴 核心修改：三级区域直接放在二级循环内部 -->
						<!-- 这样三级内容就会紧跟在对应的二级分类下面，不会乱跑 -->
						<view v-if="expanded[subCategory.id]" class="sub-category-group level3">
							<!-- 渲染三级分类列表 -->
							<view 
								v-for="thirdCategory in subCategory.children" 
								:key="thirdCategory.id" 
								class="sub-category-item no-expand"
							>
								<text class="expand-icon placeholder"></text>
								<text class="sub-category-name">{{ thirdCategory.classificationName }}</text>
								<view class="menu-container" style="position: relative;">
									<view class="menu-btn" @click.stop="toggleMenuOptions(thirdCategory.id, 3)">
										<text class="menu-icon">···</text>
									</view>
									<!-- 菜单选项列表 -->
									<view v-if="showMenuOptions && selectedCategoryId === thirdCategory.id" class="menu-options">
										<!-- 重命名选项 -->
										<view class="menu-option" @click.stop="showRenameDialog(thirdCategory.id)">
											<text class="rename-icon">✏️</text>
											<text>重命名</text>
										</view>
										<!-- 删除分类选项 -->
										<view class="menu-option delete-option" @click.stop="showDeleteConfirm(thirdCategory.id)">
											<text class="trash-icon">🗑️</text>
											<text>删除分类</text>
										</view>
									</view>
								</view>
							</view>
							
							<!-- 三级添加按钮 -->
							<view class="add-sub-btn" @click="openCreateModal(subCategory.id, 3)">
								<text class="add-icon">+</text>
								<text>添加子分类</text>
							</view>
						</view>
					</view>

					<!-- 二级添加按钮（放在二级循环结束后，作为整个二级区域的最后一项） -->
					<view class="add-sub-btn" @click="openCreateModal(category.id, 2)">
						<text class="add-icon">+</text>
						<text>添加子分类</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加一级分类按钮 -->
		<view class="add-primary-btn" @click="openCreateModal('', 1)">
			<text class="add-icon">+</text>
			<text>添加一级分类</text>
		</view>

		<!-- 创建新分类弹窗 -->
		<view v-if="createModal.show" class="modal-mask" @click="closeCreateModal">
			<view class="modal-content" @click.stop>
				<view class="modal-title">创建新分类</view>
				<view class="modal-input-wrap">
					<input 
						type="text" 
						placeholder="请输入分类名称" 
						v-model="createModal.categoryName"
						class="modal-input"
					/>
				</view>
				<view class="modal-buttons">
					<view class="modal-btn cancel" @click="closeCreateModal">取消</view>
					<view class="modal-btn confirm" @click="createCategory">确定</view>
				</view>
			</view>
		</view>

		<!-- 操作菜单弹窗 -->
		<view v-if="actionSheet.show" class="action-sheet-mask" @click="actionSheet.show = false">
			<view class="action-sheet">
				<view class="action-item" v-for="(action, index) in actionSheet.actions" :key="index" @click="handleActionSelect(index)">
					{{ action.name }}
				</view>
			</view>
		</view>
		
		<!-- 重命名分类弹窗 -->
		<view v-if="renameDialogVisible" class="dialog-overlay">
			<view class="dialog">
				<view class="dialog-title">修改分类名称</view>
				<!-- 输入框 -->
				<view class="input-wrapper">
					<input
						v-model="renameCategoryName"
						type="text"
						class="dialog-input"
						placeholder="请输入分类名称"
					/>
				</view>
				<view class="dialog-buttons">
					<view class="cancel-btn" @click="closeRenameDialog">取消</view>
					<view class="confirm-btn" @click="confirmRename">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { addClassification, getClassificationTree, updateClassification, deleteClassification } from '@/api/product'
import { getStoreInfo } from '@/utils/auth'

export default {
	onLoad() {
		this.loadClassificationTree();
	},
	data() {
		return {
			searchText: '',
			categories: [],
			loading: false,
			expanded: {
				otc: true
			},
			actionSheet: {
				show: false,
				actions: [],
				current: { key: '', level: 0 }
			},
			createModal: {
				show: false,
				categoryName: '',
				parentKey: '',
				level: 0
			},
			// 菜单选项相关
			showMenuOptions: false,
			selectedCategoryId: null,
			selectedCategoryLevel: null,
			// 重命名弹窗相关
			renameDialogVisible: false,
			renameCategoryId: null,
			renameCategoryName: ''
		};
	},
	methods: {
		initExpandedStates(categories) {
			for (const category of categories) {
				if (!this.expanded[category.id]) {
					this.$set(this.expanded, category.id, true); // 默认展开
				}
				if (category.children && category.children.length > 0) {
					this.initExpandedStates(category.children);
				}
			}
		},
		loadClassificationTree() {
			this.loading = true;
			const storeInfo = getStoreInfo();
			const storeId = storeInfo ? storeInfo.storeId : 1;
			
			getClassificationTree(storeId)
				.then(res => {
					if (res.code === 200) {
						this.categories = res.data || [];
						this.initExpandedStates(this.categories);
					} else {
						uni.showToast({ title: '获取分类数据失败', icon: 'none' });
					}
				})
				.catch(error => {
					console.error('获取分类树失败:', error);
					uni.showToast({ title: '网络请求失败', icon: 'none' });
				})
				.finally(() => {
					this.loading = false;
				});
		},
		goBack() {
			uni.navigateBack();
		},
		viewNotice() {
			uni.showToast({ title: '查看公告详情', icon: 'none' });
		},
		toggleExpand(key) {
			this.$set(this.expanded, key, !this.expanded[key]);
		},
		showActions(key, level) {
			this.actionSheet.current = { key, level };
			const isSystemFixed = ['otc', 'rx', 'vetOtc', 'vetRx'].includes(key);
			const isSystemChild = ['otc-1', 'otc-2'].includes(key);
			let actions = [];

			if (level === 1) {
				actions = [{ name: '编辑' }];
				if (!isSystemFixed) {
					actions.push({ name: '添加子分类' }, { name: '删除' });
				}
			} else if (level === 2) {
				actions = [{ name: '编辑' }];
				if (!isSystemChild) {
					actions.push({ name: '添加子分类' }, { name: '删除' });
				}
			} else if (level === 3) {
				actions = [{ name: '编辑' }, { name: '删除' }];
			}

			this.actionSheet.actions = actions;
			this.actionSheet.show = true;
		},
		handleActionSelect(index) {
			const { key, level } = this.actionSheet.current;
			const action = this.actionSheet.actions[index].name;

			switch (action) {
				case '编辑':
					this.editCategory(key, level);
					break;
				case '添加子分类':
					this.openCreateModal(key, level + 1);
					break;
				case '删除':
					this.deleteCategory(key, level);
					break;
			}
			this.actionSheet.show = false;
		},
		openCreateModal(parentKey, level) {
			this.createModal = {
				show: true,
				categoryName: '',
				parentKey,
				level
			};
		},
		closeCreateModal() {
			this.createModal.show = false;
			this.createModal.categoryName = '';
		},
		createCategory() {
			if (!this.createModal.categoryName.trim()) {
				uni.showToast({ title: '请输入分类名称', icon: 'none' });
				return;
			}

			const { parentKey, level, categoryName } = this.createModal;
			const storeInfo = getStoreInfo();
			const storeId = storeInfo ? storeInfo.storeId : 2;
			
			const params = {
				classificationName: categoryName,
				parentId: parentKey || 0,
				storeId: storeId
			};
			
			addClassification(params)
				.then(res => {
					uni.showToast({ 
						title: `成功创建${level === 1 ? '一级' : level === 2 ? '二级' : '三级'}分类`, 
						icon: 'success' 
					});
					this.closeCreateModal();
					this.loadClassificationTree();
				})
				.catch(error => {
					console.error('创建分类失败:', error);
					uni.showToast({ title: '创建分类失败', icon: 'none' });
				});
		},
		findCategoryName(categories, id) {
			for (const category of categories) {
				if (category.id === id) return category.classificationName;
				if (category.children && category.children.length > 0) {
					const found = this.findCategoryName(category.children, id);
					if (found) return found;
				}
			}
			return '分类名称';
		},
		editCategory(key, level) {
			let oldName;
			const systemCategoryNames = {
				otc: '非处方药(OTC)', rx: '处方药(RX)', vetOtc: '兽用非处方药', vetRx: '兽用处方药',
				'otc-1': '甲类非处方药', 'otc-2': '乙类非处方药'
			};
			
			if (systemCategoryNames[key]) {
				oldName = systemCategoryNames[key];
			} else {
				oldName = this.findCategoryName(this.categories, key);
			}
			
			uni.showModal({
				title: '编辑分类名称',
				editable: true,
				content: oldName,
				success: (res) => {
					if (res.confirm && res.content) {
						uni.showToast({ title: '编辑成功', icon: 'success' });
						// TODO: 调用编辑API
					}
				}
			});
		},
		// 切换菜单选项的显示/隐藏
		toggleMenuOptions(categoryId, level) {
			if (this.showMenuOptions && this.selectedCategoryId === categoryId) {
				// 如果点击的是当前显示选项的分类，关闭选项
				this.showMenuOptions = false;
				this.selectedCategoryId = null;
			} else {
				// 否则显示当前分类的菜单选项
				this.showMenuOptions = true;
				this.selectedCategoryId = categoryId;
				this.selectedCategoryLevel = level;
			}
		},
		// 显示重命名弹窗
		showRenameDialog(categoryId) {
			// 关闭菜单选项
			this.showMenuOptions = false;
			this.selectedCategoryId = null;
			
			// 查找分类名称
			const categoryName = this.findCategoryName(this.categories, categoryId);
			
			// 打开重命名弹窗
			this.renameCategoryId = categoryId;
			this.renameCategoryName = categoryName;
			this.renameDialogVisible = true;
		},
		// 查找分类名称（递归）
		findCategoryName(categories, id) {
			for (const category of categories) {
				if (category.id === id) {
					return category.classificationName;
				}
				if (category.children && category.children.length > 0) {
					const found = this.findCategoryName(category.children, id);
					if (found) {
						return found;
					}
				}
			}
			return '';
		},
		// 显示删除确认弹窗
		showDeleteConfirm(categoryId) {
			// 关闭菜单选项
			this.showMenuOptions = false;
			this.selectedCategoryId = null;
			
			// 使用现有的删除分类方法
			this.deleteCategory(categoryId, this.selectedCategoryLevel);
		},
		// 删除分类
		deleteCategory(key, level) {
			uni.showModal({
				title: '提示',
				content: '确定删除该分类吗？',
				success: (res) => {
					if (res.confirm) {
						// 调用删除API
						deleteClassification(key)
							.then(res => {
								if (res.code === 200) {
									uni.showToast({ title: '删除成功', icon: 'success' });
									// 刷新分类列表
									this.loadClassificationTree();
								} else {
									uni.showToast({ title: res.msg || '删除失败', icon: 'none' });
								}
							})
							.catch(error => {
								console.error('删除分类失败:', error);
								uni.showToast({ title: '网络请求失败', icon: 'none' });
							});
					}
				}
			});
		},
		// 关闭重命名弹窗
		closeRenameDialog() {
			this.renameDialogVisible = false;
			this.renameCategoryId = null;
			this.renameCategoryName = '';
		},
		// 查找分类的parentId（递归）
		findCategoryParentId(categories, id) {
			for (const category of categories) {
				// 检查当前分类的子分类
				if (category.children && category.children.length > 0) {
					for (const child of category.children) {
						if (child.id === id) {
							return category.id; // 返回父分类ID
						}
						// 检查三级分类
						if (child.children && child.children.length > 0) {
							const found = this.findCategoryParentId([child], id);
							if (found) return found;
						}
					}
					// 递归检查二级分类
					const found = this.findCategoryParentId(category.children, id);
					if (found) return found;
				}
			}
			// 如果找不到（说明是一级分类），返回0
			return 0;
		},
		
		// 确认重命名
		confirmRename() {
			if (!this.renameCategoryName.trim()) {
				uni.showToast({ title: '请输入分类名称', icon: 'none' });
				return;
			}
			
			// 获取storeId
			const storeInfo = getStoreInfo();
			const storeId = storeInfo ? storeInfo.storeId : 2;
			
			// 查找分类的parentId
			const parentId = this.findCategoryParentId(this.categories, this.renameCategoryId);
			
			// 构造请求参数
			const params = {
				id: this.renameCategoryId,
				classificationName: this.renameCategoryName,
				parentId: parentId,
				storeId: storeId
			};
			
			// 调用重命名API
			updateClassification(params)
				.then(res => {
					if (res.code === 200) {
						uni.showToast({ title: '重命名成功', icon: 'success' });
						this.closeRenameDialog();
						this.loadClassificationTree();
					} else {
						uni.showToast({ title: res.msg || '重命名失败', icon: 'none' });
					}
				})
				.catch(error => {
					console.error('重命名分类失败:', error);
					uni.showToast({ title: '网络请求失败', icon: 'none' });
				});
		}
	}
};
</script>

<style scoped>
.container {
	background-color: #F5F5F5;
	min-height: 100vh;
}

.navbar {
	background-color: #E62E24;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 20rpx;
}

.nav-back, .nav-more {
	width: 60rpx;
	text-align: center;
	font-size: 30rpx;
}

.nav-title {
	font-size: 34rpx;
	font-weight: bold;
}

.search-bar {
	padding: 20rpx;
	background-color: #FFFFFF;
}

.search-input {
	display: flex;
	align-items: center;
	background-color: #F5F5F5;
	border-radius: 6rpx;
	padding: 0 20rpx;
	height: 72rpx;
}

.search-icon {
	color: #999999;
	margin-right: 12rpx;
	font-size: 26rpx;
}

.input {
	flex: 1;
	height: 70rpx;
	font-size: 28rpx;
	color: #333333;
	background: transparent;
	border: none;
}

.notice-bar {
	background-color: #FFF9E8;
	display: flex;
	align-items: center;
	padding: 18rpx 20rpx;
	font-size: 26rpx;
	color: #8B572A;
	margin: 0 20rpx 20rpx;
	border-radius: 6rpx;
}

.notice-icon {
	margin-right: 12rpx;
	font-size: 24rpx;
}

.notice-action {
	margin-left: auto;
	color: #E62E24;
	font-weight: 500;
}

.category-list {
	padding: 0 20rpx 20rpx;
}

.category-item {
	background-color: #FFFFFF;
	border-radius: 8rpx;
	margin-bottom: 16rpx;
	box-shadow: 0 1rpx 2rpx rgba(0,0,0,0.05);
}

.category-header {
	display: flex;
	align-items: center;
	padding: 32rpx 28rpx;
	font-size: 30rpx;
	color: #333333;
	border-bottom: 1rpx solid #F0F0F0;
}

.no-expand {
	pointer-events: none;
}
.no-expand .category-actions {
	pointer-events: auto;
}
/* 恢复菜单容器和按钮的点击事件 */
.no-expand .menu-container,
.no-expand .menu-btn {
	pointer-events: auto;
}

.expand-icon {
	width: 32rpx;
	text-align: center;
	margin-right: 14rpx;
	color: #999999;
	font-size: 22rpx;
}
.expand-icon.placeholder {
	visibility: hidden;
}

.category-name {
	flex: 1;
	font-weight: 500;
}

.category-actions {
	color: #999999;
	font-size: 26rpx;
	line-height: 1;
}

/* 层级缩进样式 */
.sub-category-group {
	background-color: #FAFAFA;
}
.level2 {
	padding-left: 56rpx;
}
.level3 {
	padding-left: 112rpx;
}

.sub-category-item {
	display: flex;
	align-items: center;
	padding: 26rpx 0;
	font-size: 28rpx;
	color: #333333;
	border-bottom: 1rpx solid #F0F0F0;
	margin: 0 28rpx;
}

/* 添加按钮样式 */
.add-sub-btn {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 26rpx 0;
	color: #1677FF;
	font-size: 28rpx;
	background-color: #FAFAFA;
	margin: 0 28rpx;
	border-radius: 6rpx;
	margin-top: 10rpx;
}

.add-icon {
	margin-right: 8rpx;
	font-size: 24rpx;
}

.add-primary-btn {
	background-color: #E62E24;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32rpx;
	margin: 0 20rpx 20rpx;
	border-radius: 8rpx;
	font-size: 30rpx;
	font-weight: 500;
}

/* 弹窗样式 */
.modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	background: #FFFFFF;
	width: 80%;
	border-radius: 12rpx;
	padding: 40rpx;
}

.modal-title {
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
}

.modal-input-wrap {
	margin-bottom: 40rpx;
}

.modal-input {
	width: 100%;
	height: 70rpx;
	border: 1rpx solid #E5E5E5;
	border-radius: 6rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	outline: none;
	box-sizing: border-box;
}

.modal-buttons {
	display: flex;
	justify-content: space-between;
}

.modal-btn {
	width: 48%;
	height: 70rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6rpx;
	font-size: 30rpx;
}

.modal-btn.cancel {
	background: #F5F5F5;
	color: #333333;
}

.modal-btn.confirm {
	background: #E62E24;
	color: #FFFFFF;
}

/* 菜单容器 */
.menu-container {
	position: relative;
}

/* 菜单按钮 */
.menu-btn {
	font-size: 24rpx;
	color: #999;
	letter-spacing: 4rpx;
}

/* 菜单选项列表 */
.menu-options {
	position: absolute;
	top: 100%;
	right: 0;
	background-color: #fff;
	border: 1rpx solid #f0f0f0;
	border-radius: 8rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	z-index: 1000;
	margin-top: 10rpx;
	min-width: 200rpx;
}

/* 菜单项 */
.menu-option {
	display: flex;
	align-items: center;
	gap: 10rpx;
	font-size: 28rpx;
	padding: 20rpx 30rpx;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s;
}

/* 菜单项 hover 效果 */
.menu-option:active {
	background-color: #f5f5f5;
}

/* 重命名选项 */
.menu-option:not(.delete-option) {
	color: #333;
}

/* 重命名图标 */
.rename-icon {
	font-size: 24rpx;
}

/* 删除分类选项 */
.menu-option.delete-option {
	color: #e62318;
	border-top: 1rpx solid #f0f0f0;
}

/* 垃圾桶图标 */
.menu-option .trash-icon {
	font-size: 24rpx;
}

/* 加载状态样式 */
.loading {
	text-align: center;
	padding: 60rpx;
	color: #999999;
	font-size: 28rpx;
}

/* 弹窗样式 */
.dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.dialog {
	background-color: #fff;
	border-radius: 12rpx;
	width: 85%;
	max-width: 650rpx;
	padding: 40rpx 50rpx;
	box-sizing: border-box;
	position: relative;
	z-index: 1001;
}

.dialog-title {
	font-size: 34rpx;
	font-weight: 600;
	text-align: center;
	margin-bottom: 40rpx;
	color: #333;
}

/* 输入框样式 */
.input-wrapper {
	position: relative;
	margin-bottom: 40rpx;
	width: 100%;
}

.dialog-input {
	border: 1rpx solid #e5e5e5;
	border-radius: 8rpx;
	padding: 22rpx;
	font-size: 30rpx;
	width: 100%;
	box-sizing: border-box;
	outline: none;
	background-color: #fff;
	height: 88rpx;
	line-height: normal;
}

.dialog-input:focus {
	border-color: #e62318;
	box-shadow: 0 0 0 2rpx rgba(230, 35, 24, 0.1);
}

/* 弹窗按钮 */
.dialog-buttons {
	display: flex;
	gap: 24rpx;
}

.cancel-btn {
	flex: 1;
	background-color: #f5f5f5;
	color: #666;
	text-align: center;
	padding: 24rpx;
	border-radius: 8rpx;
	font-size: 30rpx;
	cursor: pointer;
}

.cancel-btn:active {
	background-color: #e8e8e8;
}

.confirm-btn {
	flex: 1;
	background-color: #e62318;
	color: #fff;
	text-align: center;
	padding: 24rpx;
	border-radius: 8rpx;
	font-size: 30rpx;
	cursor: pointer;
}

.confirm-btn:active {
	background-color: #d11f15;
}

.action-sheet-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.4);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 999;
}

.action-sheet {
	background: #FFFFFF;
	width: 100%;
	border-radius: 12rpx 12rpx 0 0;
}

.action-item {
	padding: 30rpx;
	text-align: center;
	font-size: 30rpx;
	color: #333333;
	border-bottom: 1rpx solid #F0F0F0;
}
</style>