<template>
	<view class="warehouse-select-container">
		<view class="header">
			<view class="title-container">
				<text class="title">选择一级货区</text>
				<text class="subtitle">请选择您要操作的一级货区</text>
			</view>
<!-- 			<view class="add-btn" @click="navigateToCreateWarehouse">
				<text class="add-icon">+</text>
				<text class="add-text">新建</text>
			</view> -->
		</view>

		<!-- 仓库列表 -->
		<view class="warehouse-list">
			<view v-if="loading" class="loading">
				<text>加载中...</text>
			</view>
			<view v-else-if="warehouses.length === 0" class="empty-state">
				<text>暂无可用一级货区</text>
			</view>
			<view v-else>
				<view v-for="(warehouse, index) in warehouses" :key="warehouse.id" class="warehouse-item">
					<!-- 整行可点击区域，除了展开按钮 -->
					<view class="warehouse-row" @click="selectWarehouse(warehouse)">
						<view class="warehouse-info">
							<text class="warehouse-name">{{ warehouse.name + warehouse.unit}}</text>
						</view>
						<view class="warehouse-action">
							<!-- 编辑和删除按钮，只在展开状态下显示 -->
							<view class="action-buttons" v-if="warehouse.expanded">
								<view class="action-btn edit-btn" @click.stop="editWarehouse(warehouse)">
									<text>编辑</text>
								</view>
								<view class="action-btn delete-btn" @click.stop="deleteWarehouse(warehouse)">
									<text>删除</text>
								</view>
							</view>
							<view class="warehouse-arrow">
								<text class="arrow">></text>
							</view>
							<!-- 阻止点击展开按钮时触发整行的点击事件 -->
							<view class="expand-btn" @click.stop="toggleExpand(warehouse, index)">
								<text class="expand-icon">{{ warehouse.expanded ? '收起' : '展开' }}</text>
							</view>
						</view>
					</view>

					<!-- 二级货架 -->
					<view v-if="warehouse.expanded" class="sub-shelves">
						<view class="sub-header">
							<text class="sub-title">二级货架</text>
							<view class="sub-add-btn" @click="addShelf(warehouse)">
								<text>+ 新增</text>
							</view>
						</view>
						<view v-if="warehouse.loadingShelves" class="loading-sub">加载中...</view>
						<view v-else-if="warehouse.shelves && warehouse.shelves.length === 0" class="empty-sub">暂无二级货架
						</view>
						<view v-else>
							<view v-for="(shelf, shelfIndex) in warehouse.shelves" :key="shelf.id" class="shelf-item">
								<view class="shelf-row">
									<view class="shelf-info">
										<text class="shelf-name">{{ shelf.name }}</text>
									</view>
									<view class="shelf-action">
										<view class="action-buttons">
											<view class="action-btn edit-btn" @click="editShelf(warehouse, shelf)">
												<text>编辑</text>
											</view>
											<view class="action-btn delete-btn" @click="deleteShelf(warehouse, shelf)">
												<text>删除</text>
											</view>
										</view>
										<view class="expand-btn"
											@click="toggleExpandShelf(warehouse, index, shelf, shelfIndex)">
											<text class="expand-icon">{{ shelf.expanded ? '收起' : '展开' }}</text>
										</view>
									</view>
								</view>

								<!-- 三级货架 -->
								<view v-if="shelf.expanded" class="freight-shelves">
									<view class="sub-header">
										<text class="sub-title">三级货架</text>
										<view class="sub-add-btn" @click="addFreight(warehouse, shelf)">
											<text>+ 新增</text>
										</view>
									</view>
									<view v-if="shelf.loadingFreights" class="loading-sub">加载中...</view>
									<view v-else-if="shelf.freights && shelf.freights.length === 0" class="empty-sub">
										暂无三级货架</view>
									<view v-else>
										<view v-for="freight in shelf.freights" :key="freight.id" class="freight-item">
											<view class="freight-info">
												<text class="freight-name">{{ freight.name }}</text>
											</view>
											<view class="freight-action">
												<view class="action-buttons">
													<view class="action-btn edit-btn"
														@click="editFreight(warehouse, shelf, freight)">
														<text>编辑</text>
													</view>
													<view class="action-btn delete-btn"
														@click="deleteFreight(warehouse, shelf, freight)">
														<text>删除</text>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加编辑弹窗 -->
		<uni-popup ref="editPopup" type="center">
			<view class="edit-popup-container">
				<view class="edit-popup-header">
					<text class="edit-popup-title">修改一级货区信息设置</text>
					<text class="edit-popup-close" @click="closeEditPopup">×</text>
				</view>
				<view class="edit-popup-content">
					<view class="edit-form-item">
						<text class="edit-form-label required">名称</text>
						<view class="name-unit-container">
							<input class="edit-form-input with-unit" v-model="editForm.name" placeholder="请输入名称" />
							<view class="unit-selector" @click="toggleUnitDropdown">
								<text class="selected-unit">{{ editForm.unit || '库' }}</text>
								<text class="dropdown-icon">▼</text>
							</view>
						</view>
						<!-- 单位下拉选择框 -->
						<view class="unit-dropdown" v-if="showUnitDropdown">
							<view class="unit-option" v-for="unit in unitOptions" :key="unit" @click="selectUnit(unit)"
								:class="{'unit-option-active': editForm.unit === unit}">
								<text>{{ unit }}</text>
							</view>
						</view>
					</view>
					<view class="edit-form-item">
						<text class="edit-form-label required">货区数量</text>
						<input class="edit-form-input" v-model="editForm.sheQuantityMax" placeholder="请输入货区数量"
							type="number" />
					</view>
					<view class="edit-form-item">
						<text class="edit-form-label required">货区编码</text>
						<input class="edit-form-input" v-model="editForm.code" placeholder="请输入货区编码" />
					</view>
					<view class="edit-form-item">
						<text class="edit-form-label">货区状态</text>
						<view class="edit-form-radio">
							<view class="radio-item" @click="editForm.status = '0'">
								<view class="radio-circle" :class="{'radio-active': editForm.status === '0'}"></view>
								<text class="radio-text">正常</text>
							</view>
							<view class="radio-item" @click="editForm.status = '1'">
								<view class="radio-circle" :class="{'radio-active': editForm.status === '1'}"></view>
								<text class="radio-text">停止</text>
							</view>
						</view>
					</view>
					<view class="edit-form-item">
						<text class="edit-form-label">货区地址</text>
						<input class="edit-form-input" v-model="editForm.address" placeholder="请输入货区地址" />
					</view>
					<view class="edit-form-item">
						<text class="edit-form-label required">管理员</text>
						<input class="edit-form-input" v-model="editForm.manager" placeholder="请输入管理员" />
					</view>
					<view class="edit-form-item">
						<text class="edit-form-label">备注</text>
						<input class="edit-form-input" v-model="editForm.remark" placeholder="请输入备注" />
					</view>
				</view>
				<view class="edit-popup-footer">
					<button class="btn-cancel" @click="closeEditPopup">取消</button>
					<button class="btn-confirm" @click="submitEditForm">确定</button>
				</view>
			</view>
		</uni-popup>

		<!-- 二级货架编辑弹窗 -->
		<uni-popup ref="editShelfPopup" type="center">
			<view class="edit-popup-container">
				<view class="edit-popup-header">
					<text class="edit-popup-title">修改二级货区信息</text>
					<text class="edit-popup-close" @click="closeEditShelfPopup">×</text>
				</view>
				<view class="edit-popup-content">
					<view class="edit-form-item">
						<text class="edit-form-label">货区名称</text>
						<input class="edit-form-input" v-model="editShelfForm.depotName" placeholder="货区名称" disabled />
					</view>
					<view class="edit-form-item">
						<text class="edit-form-label required">名称</text>
						<view class="name-unit-container">
							<input class="edit-form-input with-unit" v-model="editShelfForm.name" placeholder="请输入名称" />
							<view class="unit-selector" @click="toggleShelfUnitDropdown">
								<text class="selected-unit">{{ editShelfForm.unit || '区' }}</text>
								<text class="dropdown-icon">▼</text>
							</view>
						</view>
						<!-- 单位下拉选择框 -->
						<view class="unit-dropdown" v-if="showShelfUnitDropdown">
							<view class="unit-option" v-for="unit in unitOptions" :key="unit"
								@click="selectShelfUnit(unit)"
								:class="{'unit-option-active': editShelfForm.unit === unit}">
								<text>{{ unit }}</text>
							</view>
						</view>
					</view>
					<view class="edit-form-item">
						<text class="edit-form-label">货区编码</text>
						<input class="edit-form-input" v-model="editShelfForm.code" placeholder="货区编码" disabled />
					</view>
				</view>
				<view class="edit-popup-footer">
					<button class="btn-cancel" @click="closeEditShelfPopup">取消</button>
					<button class="btn-confirm" @click="submitEditShelfForm">确定</button>
				</view>
			</view>
		</uni-popup>

		<!-- 二级货架新增弹窗 -->
		<uni-popup ref="addShelfPopup" type="center">
			<view class="edit-popup-container">
				<view class="edit-popup-header">
					<text class="edit-popup-title">创建二级货区信息</text>
					<text class="edit-popup-close" @click="closeAddShelfPopup">×</text>
				</view>
				<view class="edit-popup-content">
					<view class="edit-form-item">
						<text class="edit-form-label">货区名称</text>
						<input class="edit-form-input" v-model="addShelfForm.depotName" placeholder="货区名称" disabled />
					</view>
					<view class="edit-form-item">
						<text class="edit-form-label required">名称</text>
						<view class="name-unit-container">
							<input class="edit-form-input with-unit" v-model="addShelfForm.name" placeholder="请输入名称" />
							<view class="unit-selector" @click="toggleAddShelfUnitDropdown">
								<text class="selected-unit">{{ addShelfForm.unit || '区' }}</text>
								<text class="dropdown-icon">▼</text>
							</view>
						</view>
						<!-- 单位下拉选择框 -->
						<view class="unit-dropdown" v-if="showAddShelfUnitDropdown">
							<view class="unit-option" v-for="unit in unitOptions" :key="unit"
								@click="selectAddShelfUnit(unit)"
								:class="{'unit-option-active': addShelfForm.unit === unit}">
								<text>{{ unit }}</text>
							</view>
						</view>
					</view>
					<view class="edit-form-item">
						<text class="edit-form-label required">货区编码</text>
						<input class="edit-form-input" v-model="addShelfForm.code"
							placeholder="请输入货区编码(数字或字母+数字),例如: 0-99-A0-Z9" />
					</view>
				</view>
				<view class="edit-popup-footer">
					<button class="btn-cancel" @click="closeAddShelfPopup">取消</button>
					<button class="btn-confirm" @click="submitAddShelfForm">确定</button>
				</view>
			</view>
		</uni-popup>

		<!-- 三级货架新增弹窗 -->
		<uni-popup ref="addFreightPopup" type="center">
			<view class="edit-popup-container">
				<view class="edit-popup-header">
					<text class="edit-popup-title">创建三级货区信息</text>
					<text class="edit-popup-close" @click="closeAddFreightPopup">×</text>
				</view>
				<view class="edit-popup-content">
					<view class="edit-form-item">
						<text class="edit-form-label">货架名称</text>
						<input class="edit-form-input" v-model="addFreightForm.sheName" placeholder="货架名称" disabled />
					</view>
					<view class="edit-form-item">
						<text class="edit-form-label required">名称</text>
						<view class="name-unit-container">
							<input class="edit-form-input with-unit" v-model="addFreightForm.name"
								placeholder="请输入名称" />
							<view class="unit-selector" @click="toggleAddFreightUnitDropdown">
								<text class="selected-unit">{{ addFreightForm.unit || '架' }}</text>
								<text class="dropdown-icon">▼</text>
							</view>
						</view>
						<!-- 单位下拉选择框 -->
						<view class="unit-dropdown" v-if="showAddFreightUnitDropdown">
							<view class="unit-option" v-for="unit in unitOptions" :key="unit"
								@click="selectAddFreightUnit(unit)"
								:class="{'unit-option-active': addFreightForm.unit === unit}">
								<text>{{ unit }}</text>
							</view>
						</view>
					</view>
					<view class="edit-form-item">
						<text class="edit-form-label required">货区编码</text>
						<input class="edit-form-input" v-model="addFreightForm.code"
							placeholder="请输入货区编码(数字或字母+数字),例如: 0-99-A0-Z9" />
					</view>
				</view>
				<view class="edit-popup-footer">
					<button class="btn-cancel" @click="closeAddFreightPopup">取消</button>
					<button class="btn-confirm" @click="submitAddFreightForm">确定</button>
				</view>
			</view>
		</uni-popup>

		<!-- 三级货架编辑弹窗 -->
		<uni-popup ref="editFreightPopup" type="center">
			<view class="edit-popup-container">
				<view class="edit-popup-header">
					<text class="edit-popup-title">修改三级货区信息</text>
					<text class="edit-popup-close" @click="closeEditFreightPopup">×</text>
				</view>
				<view class="edit-popup-content">
					<view class="edit-form-item">
						<text class="edit-form-label">货架名称</text>
						<input class="edit-form-input" v-model="editFreightForm.sheName" placeholder="货架名称" disabled />
					</view>
					<view class="edit-form-item">
						<text class="edit-form-label required">名称</text>
						<view class="name-unit-container">
							<input class="edit-form-input with-unit" v-model="editFreightForm.name"
								placeholder="请输入名称" />
							<view class="unit-selector" @click="toggleEditFreightUnitDropdown">
								<text class="selected-unit">{{ editFreightForm.unit || '架' }}</text>
								<text class="dropdown-icon">▼</text>
							</view>
						</view>
						<!-- 单位下拉选择框 -->
						<view class="unit-dropdown" v-if="showEditFreightUnitDropdown">
							<view class="unit-option" v-for="unit in unitOptions" :key="unit"
								@click="selectEditFreightUnit(unit)"
								:class="{'unit-option-active': editFreightForm.unit === unit}">
								<text>{{ unit }}</text>
							</view>
						</view>
					</view>
					<view class="edit-form-item">
						<text class="edit-form-label">货区编码</text>
						<input class="edit-form-input" v-model="editFreightForm.code" placeholder="货区编码" disabled />
					</view>
				</view>
				<view class="edit-popup-footer">
					<button class="btn-cancel" @click="closeEditFreightPopup">取消</button>
					<button class="btn-confirm" @click="submitEditFreightForm">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				warehouses: [],
				loading: true,
				phoneNumber: '',
				userName: '',
				userId: '', // 添加userId字段
				// 添加编辑表单数据
				editForm: {
					id: '',
					name: '',
					sheQuantityMax: '',
					code: '',
					status: '0',
					address: '',
					manager: '',
					remark: '',
					unit: '库' // 添加单位字段
				},
				// 二级货架编辑表单数据
				editShelfForm: {
					id: '',
					depotId: '',
					depotName: '',
					name: '',
					code: '',
					unit: '区'
				},
				// 二级货架新增表单数据
				addShelfForm: {
					depotId: '',
					depotName: '',
					name: '',
					code: '',
					unit: '区'
				},
				// 三级货架新增表单数据
				addFreightForm: {
					sheId: '',
					sheName: '',
					name: '',
					code: '',
					depotId: '',
					unit: '架'
				},
				// 三级货架编辑表单数据
				editFreightForm: {
					id: '',
					sheId: '',
					sheName: '',
					name: '',
					code: '',
					depotId: '',
					unit: '架'
				},
				showUnitDropdown: false, // 控制一级货区单位下拉框显示
				showShelfUnitDropdown: false, // 控制二级货架编辑单位下拉框显示
				showAddShelfUnitDropdown: false, // 控制二级货架新增单位下拉框显示
				showAddFreightUnitDropdown: false, // 控制三级货架新增单位下拉框显示
				showEditFreightUnitDropdown: false, // 控制三级货架编辑单位下拉框显示
				unitOptions: ['库', '区', '架', '层', '位'], // 单位选项
				currentWarehouseIndex: -1, // 当前编辑的一级货区索引
				currentShelfIndex: -1, // 当前编辑的二级货架索引
				// 添加编码验证规则
				codeValidationRules: {
					depot: {
						regex: /^[1-9A-Z][0-9A-Z]$/,
						message: '一级货区编码必须为两位，且不能以0开头'
					},
					shelf: {
						default: {
							regex: /^[A-Z][0-9A-Z]$/,
							message: '二级货区编码必须为两位，且首位必须为字母'
						},
						layer: {
							regex: /^[1-9]$/,
							message: '当二级货区为层时，编码必须为一位数字(1-9)'
						}
					},
					freight: {
						default: {
							regex: /^[0-9A-Z]$/,
							message: '三级货区编码必须为一位数字或字母'
						},
						layer: {
							regex: /^([A-Z][0-9]|[0-9]{2})$/,
							message: '当二级货区为层时，三级编码必须为字母+数字组合或两位纯数字'
						}
					}
				}
			};
		},

		onLoad() {
			// 从本地存储获取手机号和用户ID
			this.phoneNumber = uni.getStorageSync('phoneNumber') || uni.getStorageSync('rememberedPhoneNumber');
			this.userId = uni.getStorageSync('userId'); // 获取用户ID

			if (!this.phoneNumber) {
				uni.showToast({
					title: '登录信息无效，请重新登录',
					icon: 'none',
					duration: 2500
				});
				uni.redirectTo({
					url: '/pages/login/index'
				});
				return;
			}

			// 加载仓库列表
			this.fetchWarehouses();
		},

		methods: {
			// 获取仓库列表
			async fetchWarehouses() {
				try {
					console.log('开始获取仓库列表，手机号:', this.phoneNumber);
					this.loading = true;

					const [err, response] = await uni.request({
						url: 'https://api.buzhiyushu.cn/shelves/shelves/namelist',
						method: 'GET',
						data: {
							phoneNumber: this.phoneNumber
						}
					});
					console.log("response111", response)
					this.loading = false;

					if (err) {
						console.error('请求发生错误:', err);
						uni.showToast({
							title: '获取仓库列表失败',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					console.log('API响应完整数据:', response);

					if (!response || !response.data) {
						console.error('响应数据为空');
						uni.showToast({
							title: '获取仓库列表失败',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					console.log('响应数据:', response.data);

					if (!response.data.rows) {
						console.error('rows数据为空');
						uni.showToast({
							title: '暂无可用仓库',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 初始化仓库数据，添加expanded属性
					this.warehouses = (response.data.rows || []).map(warehouse => {
						return {
							...warehouse,
							expanded: false,
							shelves: [],
							loadingShelves: false
						};
					});
					console.log('解析后的仓库数据:', this.warehouses);
				} catch (error) {
					console.error('获取仓库列表失败:', error);
					this.loading = false;
					uni.showToast({
						title: '获取仓库列表失败',
						icon: 'none',
						duration: 2500
					});
				}
			},

			// 展开/收起一级货区
			async toggleExpand(warehouse, index) {
				// 切换展开状态
				this.$set(this.warehouses[index], 'expanded', !warehouse.expanded);

				// 如果是展开且还没有加载过二级货架数据，则加载数据
				if (this.warehouses[index].expanded && (!warehouse.shelves || warehouse.shelves.length === 0)) {
					await this.fetchShelves(warehouse.id, index);
				}
			},

			// 获取二级货架数据
			async fetchShelves(depotId, warehouseIndex) {
				try {
					this.$set(this.warehouses[warehouseIndex], 'loadingShelves', true);

					const [err, response] = await uni.request({
						url: 'https://api.buzhiyushu.cn/shelves/shelves/sheNamelist',
						method: 'GET',
						data: {
							depotId: depotId
						}
					});

					this.$set(this.warehouses[warehouseIndex], 'loadingShelves', false);

					if (err) {
						console.error('获取二级货架失败:', err);
						uni.showToast({
							title: '获取二级货架失败',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					if (!response || !response.data || !response.data.rows) {
						console.error('二级货架数据为空');
						this.$set(this.warehouses[warehouseIndex], 'shelves', []);
						return;
					}

					// 初始化二级货架数据
					const shelves = (response.data.rows || []).map(shelf => {
						return {
							...shelf,
							expanded: false,
							freights: [],
							loadingFreights: false
						};
					});

					this.$set(this.warehouses[warehouseIndex], 'shelves', shelves);
					console.log('二级货架数据:', shelves);
				} catch (error) {
					console.error('获取二级货架失败:', error);
					this.$set(this.warehouses[warehouseIndex], 'loadingShelves', false);
					uni.showToast({
						title: '获取二级货架失败',
						icon: 'none',
						duration: 2500
					});
				}
			},

			// 展开/收起二级货架
			async toggleExpandShelf(warehouse, warehouseIndex, shelf, shelfIndex) {
				// 切换展开状态
				this.$set(this.warehouses[warehouseIndex].shelves[shelfIndex], 'expanded', !shelf.expanded);

				// 如果是展开且还没有加载过三级货架数据，则加载数据
				if (this.warehouses[warehouseIndex].shelves[shelfIndex].expanded &&
					(!shelf.freights || shelf.freights.length === 0)) {
					await this.fetchFreights(shelf.id, warehouseIndex, shelfIndex);
				}
			},

			// 获取三级货架数据
			async fetchFreights(sheId, warehouseIndex, shelfIndex) {
				try {
					this.$set(this.warehouses[warehouseIndex].shelves[shelfIndex], 'loadingFreights', true);

					const [err, response] = await uni.request({
						url: 'https://api.buzhiyushu.cn/shelves/shelves/freNamelist',
						method: 'GET',
						data: {
							sheId: sheId
						}
					});

					this.$set(this.warehouses[warehouseIndex].shelves[shelfIndex], 'loadingFreights', false);

					if (err) {
						console.error('获取三级货架失败:', err);
						uni.showToast({
							title: '获取三级货架失败',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					if (!response || !response.data || !response.data.rows) {
						console.error('三级货架数据为空');
						this.$set(this.warehouses[warehouseIndex].shelves[shelfIndex], 'freights', []);
						return;
					}

					// 设置三级货架数据
					this.$set(this.warehouses[warehouseIndex].shelves[shelfIndex], 'freights', response.data.rows ||
					[]);
					console.log('三级货架数据:', response.data.rows);
				} catch (error) {
					console.error('获取三级货架失败:', error);
					this.$set(this.warehouses[warehouseIndex].shelves[shelfIndex], 'loadingFreights', false);
					uni.showToast({
						title: '获取三级货架失败',
						icon: 'none',
						duration: 2500
					});
				}
			},

			// 选择仓库
			selectWarehouse(warehouse) {
				console.log('选择仓库:', warehouse);
				uni.removeStorageSync('selectedWarehouse', warehouse);

				// 将选中的仓库信息存储到本地
				uni.setStorageSync('selectedWarehouse', warehouse);
				// 跳转到首页
				uni.switchTab({
					url: '/pages/index/index',
					success: () => {
						console.log('成功跳转到首页');
					},
					fail: (err) => {
						console.error('跳转到首页失败:', err);
						// 如果switchTab失败，尝试使用navigateTo
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
				});
			},

			// 跳转到新建货区页面
			navigateToCreateWarehouse() {
				uni.navigateTo({
					url: '/pages/warehouse/create-warehouse',
					success: () => {
						console.log('成功跳转到创建货区页面');
					},
					fail: (err) => {
						console.error('跳转创建货区页面失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none',
							duration: 2500
						});
					}
				});
			},

			// 修改编辑一级货区方法
			editWarehouse(warehouse) {
				console.log('编辑一级货区:', warehouse);
				// 填充表单数据
				this.editForm = {
					id: warehouse.id,
					name: warehouse.name || '',
					sheQuantityMax: warehouse.sheQuantityMax || '',
					code: warehouse.code || '',
					status: warehouse.status || '0',
					address: warehouse.address || '',
					manager: warehouse.manager || '',
					remark: warehouse.remark || '',
					unit: warehouse.unit || '库'
				};
				// 打开弹窗
				this.$refs.editPopup.open();
			},

			// 关闭编辑弹窗
			closeEditPopup() {
				this.showUnitDropdown = false;
				this.$refs.editPopup.close();
			},

			// 验证货区编码
			validateCode(type, code, unitType) {
				// 检查编码是否为空
				if (!code) {
					return {
						valid: false,
						message: '编码不能为空'
					};
				}

				let regex, message;

				// 根据货区类型选择验证规则
				switch (type) {
					case 'depot': // 一级货区
						regex = this.codeValidationRules.depot.regex;
						message = this.codeValidationRules.depot.message;
						break;
					case 'shelf': // 二级货区
						// 如果是"层"，使用特殊规则
						if (unitType === '层') {
							regex = this.codeValidationRules.shelf.layer.regex;
							message = this.codeValidationRules.shelf.layer.message;
						} else {
							regex = this.codeValidationRules.shelf.default.regex;
							message = this.codeValidationRules.shelf.default.message;
						}
						break;
					case 'freight': // 三级货区
						// 检查对应的二级货区是否为"层"
						if (unitType === '层') {
							regex = this.codeValidationRules.freight.layer.regex;
							message = this.codeValidationRules.freight.layer.message;
						} else {
							regex = this.codeValidationRules.freight.default.regex;
							message = this.codeValidationRules.freight.default.message;
						}
						break;
					default:
						return {
							valid: false,
								message: '未知货区类型'
						};
				}

				// 执行验证
				if (regex.test(code)) {
					return {
						valid: true,
						message: '验证通过'
					};
				} else {
					return {
						valid: false,
						message: message
					};
				}
			},

			// 提交编辑表单
			async submitEditForm() {
				try {
					// 表单验证
					if (!this.editForm.name) {
						uni.showToast({
							title: '请输入名称',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					if (!this.editForm.sheQuantityMax) {
						uni.showToast({
							title: '请输入货区数量',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					if (!this.editForm.code) {
						uni.showToast({
							title: '请输入货区编码',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 验证一级货区编码
					const codeValidation = this.validateCode('depot', this.editForm.code);
					if (!codeValidation.valid) {
						uni.showToast({
							title: codeValidation.message,
							icon: 'none',
							duration: 2500
						});
						return;
					}

					if (!this.editForm.manager) {
						uni.showToast({
							title: '请输入管理员',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 构造请求参数
					const params = {
						id: this.editForm.id,
						name: this.editForm.name,
						sheQuantityMax: this.editForm.sheQuantityMax,
						code: this.editForm.code,
						status: this.editForm.status,
						address: this.editForm.address,
						manager: this.editForm.manager,
						remark: this.editForm.remark,
						unit: this.editForm.unit
					};

					// 调用接口更新数据
					const [err, res] = await uni.request({
						url: 'https://api.buzhiyushu.cn/depot/depot',
						method: 'PUT',
						data: params,
						header: {
							'Content-Type': 'application/json'
						}
					});

					if (err) {
						console.error('更新货区信息失败:', err);
						uni.showToast({
							title: '更新失败',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 检查响应
					if (res.data && res.data.code === 200) {
						// 更新成功
						uni.showToast({
							title: '更新成功',
							icon: 'success',
							duration: 2500
						});
						// 关闭弹窗
						this.closeEditPopup();
						// 刷新列表
						this.fetchWarehouses();
					} else {
						// 更新失败
						uni.showToast({
							title: res.data.msg || '更新失败',
							icon: 'none',
							duration: 2500
						});
					}
				} catch (error) {
					console.error('更新货区信息失败:', error);
					uni.showToast({
						title: '更新失败',
						icon: 'none',
						duration: 2500
					});
				}
			},

			// 删除一级货区
			deleteWarehouse(warehouse) {
				uni.showModal({
					title: '确认删除',
					content: `确定要删除"${warehouse.name}"吗？`,
					success: async (res) => {
						if (res.confirm) {
							console.log('确认删除一级货区:', warehouse);
							// 获取userId
							const userId = uni.getStorageSync('userId');
							if (!userId) {
								uni.showToast({
									title: '用户未登录，请先登录',
									icon: 'none',
									duration: 2500
								});
								return;
							}

							// 调用删除一级货区的API请求
							try {
								const [err, response] = await uni.request({
									url: `https://api.buzhiyushu.cn/depot/depot/${warehouse.id}?LocalUserId=${userId}`,
									method: 'DELETE'
								});

								if (err) {
									console.error('删除一级货区失败:', err);
									uni.showToast({
										title: '删除失败',
										icon: 'none',
										duration: 2500
									});
									return;
								}

								// 检查响应
								if (response.data && response.data.code === 200) {
									// 删除成功
									uni.showToast({
										title: '删除成功',
										icon: 'success',
										duration: 2500
									});
									// 删除成功后刷新列表
									this.fetchWarehouses();
								} else {
									// 删除失败
									uni.showToast({
										title: response.data?.msg || '删除失败',
										icon: 'none',
										duration: 2500
									});
								}
							} catch (error) {
								console.error('删除一级货区出错:', error);
								uni.showToast({
									title: '删除失败',
									icon: 'none',
									duration: 2500
								});
							}
						}
					}
				});
			},

			// 添加二级货架
			addShelf(warehouse) {
				console.log('添加二级货架到一级货区:', warehouse);
				// 填充表单数据
				this.addShelfForm = {
					depotId: warehouse.id,
					depotName: warehouse.name + warehouse.unit,
					name: '',
					code: '',
					unit: '区'
				};
				// 记录当前编辑的仓库索引
				this.currentWarehouseIndex = this.warehouses.findIndex(w => w.id === warehouse.id);
				// 打开弹窗
				this.$refs.addShelfPopup.open();
			},

			// 关闭二级货架新增弹窗
			closeAddShelfPopup() {
				this.$refs.addShelfPopup.close();
			},

			// 提交二级货架新增表单
			async submitAddShelfForm() {
				try {
					// 表单验证
					if (!this.addShelfForm.name) {
						uni.showToast({
							title: '请输入名称',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					if (!this.addShelfForm.code) {
						uni.showToast({
							title: '请输入货区编码',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 获取当前一级货区的单位
					const parentWarehouse = this.warehouses.find(w => w.id === this.addShelfForm.depotId);
					const parentUnit = parentWarehouse ? parentWarehouse.unit : '库';

					// 验证二级货区编码
					const codeValidation = this.validateCode('shelf', this.addShelfForm.code, parentUnit);
					if (!codeValidation.valid) {
						uni.showToast({
							title: codeValidation.message,
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 构造请求参数
					const params = {
						name: this.addShelfForm.name,
						code: this.addShelfForm.code,
						depotId: this.addShelfForm.depotId,
						userId: this.userId, // 添加用户ID
						unit: this.addShelfForm.unit
					};

					// 调用接口添加数据
					const [err, res] = await uni.request({
						url: 'https://api.buzhiyushu.cn/shelves/shelves',
						method: 'POST',
						data: params,
						header: {
							'Content-Type': 'application/json'
						}
					});

					if (err) {
						console.error('新增二级货架失败:', err);
						uni.showToast({
							title: '新增失败',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 检查响应
					if (res.data && res.data.code === 200) {
						// 新增成功
						uni.showToast({
							title: '新增成功',
							icon: 'success',
							duration: 2500
						});
						// 关闭弹窗
						this.closeAddShelfPopup();
						// 刷新二级货架列表
						if (this.currentWarehouseIndex !== -1) {
							this.fetchShelves(this.addShelfForm.depotId, this.currentWarehouseIndex);
						}
					} else {
						// 新增失败
						uni.showToast({
							title: res.data.msg || '新增失败',
							icon: 'none',
							duration: 2500
						});
					}
				} catch (error) {
					console.error('新增二级货架失败:', error);
					uni.showToast({
						title: '新增失败',
						icon: 'none',
						duration: 2500
					});
				}
			},

			// 编辑二级货架
			editShelf(warehouse, shelf) {
				console.log('编辑二级货架:', shelf, '所属一级货区:', warehouse);
				// 填充表单数据
				this.editShelfForm = {
					id: shelf.id,
					depotId: warehouse.id,
					depotName: warehouse.name + warehouse.unit,
					name: shelf.name || '',
					code: shelf.code || '',
				};
				// 记录当前编辑的仓库索引
				this.currentWarehouseIndex = this.warehouses.findIndex(w => w.id === warehouse.id);
				// 打开弹窗
				this.$refs.editShelfPopup.open();
			},

			// 关闭二级货架编辑弹窗
			closeEditShelfPopup() {
				this.$refs.editShelfPopup.close();
			},

			// 提交二级货架编辑表单
			async submitEditShelfForm() {
				try {
					// 表单验证
					if (!this.editShelfForm.name) {
						uni.showToast({
							title: '请输入名称',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 构造请求参数
					const params = {
						id: this.editShelfForm.id,
						name: this.editShelfForm.name,
						unit: this.editShelfForm.unit
					};

					// 调用接口更新数据
					const [err, res] = await uni.request({
						url: 'https://api.buzhiyushu.cn/shelves/shelves',
						method: 'PUT',
						data: params,
						header: {
							'Content-Type': 'application/json'
						}
					});

					if (err) {
						console.error('更新二级货架信息失败:', err);
						uni.showToast({
							title: '更新失败',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 检查响应
					if (res.data && res.data.code === 200) {
						// 更新成功
						uni.showToast({
							title: '更新成功',
							icon: 'success',
							duration: 2500
						});
						// 关闭弹窗
						this.closeEditShelfPopup();
						// 刷新二级货架列表
						if (this.currentWarehouseIndex !== -1) {
							this.fetchShelves(this.editShelfForm.depotId, this.currentWarehouseIndex);
						}
					} else {
						// 更新失败
						uni.showToast({
							title: res.data.msg || '更新失败',
							icon: 'none',
							duration: 2500
						});
					}
				} catch (error) {
					console.error('更新二级货架信息失败:', error);
					uni.showToast({
						title: '更新失败',
						icon: 'none',
						duration: 2500
					});
				}
			},

			// 删除二级货架
			deleteShelf(warehouse, shelf) {
				uni.showModal({
					title: '确认删除',
					content: `确定要删除"${shelf.name}"吗？`,
					success: async (res) => {
						if (res.confirm) {
							console.log('确认删除二级货架:', shelf);
							// 获取userId
							const userId = uni.getStorageSync('userId');
							if (!userId) {
								uni.showToast({
									title: '用户未登录，请先登录',
									icon: 'none',
									duration: 2500
								});
								return;
							}

							// 调用删除二级货架的API请求
							try {
								const [err, response] = await uni.request({
									url: `https://api.buzhiyushu.cn/shelves/shelves/${shelf.id}?LocalUserId=${userId}`,
									method: 'DELETE'
								});

								if (err) {
									console.error('删除二级货架失败:', err);
									uni.showToast({
										title: '删除失败',
										icon: 'none',
										duration: 2500
									});
									return;
								}

								// 检查响应
								if (response.data && response.data.code === 200) {
									// 删除成功
									uni.showToast({
										title: '删除成功',
										icon: 'success',
										duration: 2500
									});
									// 删除成功后刷新当前一级货区的二级货架列表
									const index = this.warehouses.findIndex(w => w.id === warehouse.id);
									if (index !== -1) {
										this.fetchShelves(warehouse.id, index);
									}
								} else {
									// 删除失败
									uni.showToast({
										title: response.data?.msg || '删除失败',
										icon: 'none',
										duration: 2500
									});
								}
							} catch (error) {
								console.error('删除二级货架出错:', error);
								uni.showToast({
									title: '删除失败',
									icon: 'none',
									duration: 2500
								});
							}
						}
					}
				});
			},

			// 添加三级货架
			addFreight(warehouse, shelf) {
				console.log('添加三级货架到二级货架:', shelf, '所属一级货区:', warehouse);
				// 填充表单数据
				this.addFreightForm = {
					sheId: shelf.id,
					sheName: shelf.name,
					depotId: warehouse.id,
					name: '',
					code: '',
					unit: '架'
				};
				// 记录当前编辑的仓库和货架索引
				this.currentWarehouseIndex = this.warehouses.findIndex(w => w.id === warehouse.id);
				this.currentShelfIndex = this.warehouses[this.currentWarehouseIndex].shelves.findIndex(s => s.id === shelf
					.id);
				// 打开弹窗
				this.$refs.addFreightPopup.open();
			},

			// 关闭三级货架新增弹窗
			closeAddFreightPopup() {
				this.$refs.addFreightPopup.close();
			},

			// 提交三级货架新增表单
			async submitAddFreightForm() {
				try {
					// 表单验证
					if (!this.addFreightForm.name) {
						uni.showToast({
							title: '请输入名称',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					if (!this.addFreightForm.code) {
						uni.showToast({
							title: '请输入货区编码',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 获取对应的二级货架信息
					const parentWarehouse = this.warehouses.find(w => w.id === this.addFreightForm.depotId);
					if (!parentWarehouse) {
						uni.showToast({
							title: '找不到对应的一级货区',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 找到当前二级货架
					const parentShelf = parentWarehouse.shelves.find(s => s.id === this.addFreightForm.sheId);
					if (!parentShelf) {
						uni.showToast({
							title: '找不到对应的二级货架',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 获取一级货区的单位，用于确定验证规则
					const parentUnit = parentWarehouse.unit;

					// 验证三级货区编码
					const codeValidation = this.validateCode('freight', this.addFreightForm.code, parentUnit);
					if (!codeValidation.valid) {
						uni.showToast({
							title: codeValidation.message,
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 构造请求参数
					const params = {
						name: this.addFreightForm.name,
						code: this.addFreightForm.code,
						shelvesId: this.addFreightForm.sheId, // 修改参数名称为shelves_id
						userId: this.userId, // 添加用户ID
						unit: this.addFreightForm.unit
					};

					console.log('新增三级货架请求参数:', params);

					// 调用接口添加数据
					const [err, res] = await uni.request({
						url: 'https://api.buzhiyushu.cn/zhishu/freight',
						method: 'POST',
						data: params,
						header: {
							'Content-Type': 'application/json'
						}
					});

					if (err) {
						console.error('新增三级货区失败:', err);
						uni.showToast({
							title: '新增失败',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 检查响应
					if (res.data && res.data.code === 200) {
						// 新增成功
						uni.showToast({
							title: '新增成功',
							icon: 'success',
							duration: 2500
						});
						// 关闭弹窗
						this.closeAddFreightPopup();
						// 刷新三级货架列表
						if (this.currentWarehouseIndex !== -1 && this.currentShelfIndex !== -1) {
							this.fetchFreights(
								this.addFreightForm.sheId,
								this.currentWarehouseIndex,
								this.currentShelfIndex
							);
						}
					} else {
						// 新增失败
						uni.showToast({
							title: res.data.msg || '新增失败',
							icon: 'none',
							duration: 2500
						});
					}
				} catch (error) {
					console.error('新增三级货区失败:', error);
					uni.showToast({
						title: '新增失败',
						icon: 'none',
						duration: 2500
					});
				}
			},

			// 编辑三级货架
			editFreight(warehouse, shelf, freight) {
				console.log('编辑三级货架:', freight, '所属二级货架:', shelf, '所属一级货区:', warehouse);
				// 填充表单数据
				this.editFreightForm = {
					id: freight.id,
					sheId: shelf.id,
					sheName: shelf.name,
					depotId: warehouse.id,
					name: freight.name || '',
					code: freight.code || '',
				};
				// 记录当前编辑的仓库和货架索引
				this.currentWarehouseIndex = this.warehouses.findIndex(w => w.id === warehouse.id);
				this.currentShelfIndex = this.warehouses[this.currentWarehouseIndex].shelves.findIndex(s => s.id === shelf
					.id);
				// 打开弹窗
				this.$refs.editFreightPopup.open();
			},

			// 关闭三级货架编辑弹窗
			closeEditFreightPopup() {
				this.$refs.editFreightPopup.close();
			},

			// 提交三级货架编辑表单
			async submitEditFreightForm() {
				try {
					// 表单验证
					if (!this.editFreightForm.name) {
						uni.showToast({
							title: '请输入名称',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 编辑时不验证编码，因为编码是禁用的

					// 构造请求参数
					const params = {
						id: this.editFreightForm.id,
						name: this.editFreightForm.name,
						shelvesId: this.editFreightForm.sheId
					};

					console.log('编辑三级货架请求参数:', params);

					// 调用接口更新数据
					const [err, res] = await uni.request({
						url: 'https://api.buzhiyushu.cn/zhishu/freight',
						method: 'PUT',
						data: params,
						header: {
							'Content-Type': 'application/json'
						}
					});

					if (err) {
						console.error('更新三级货架失败:', err);
						uni.showToast({
							title: '更新失败',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 检查响应
					if (res.data && res.data.code === 200) {
						// 更新成功
						uni.showToast({
							title: '更新成功',
							icon: 'success',
							duration: 2500
						});
						// 关闭弹窗
						this.closeEditFreightPopup();
						// 刷新三级货架列表
						if (this.currentWarehouseIndex !== -1 && this.currentShelfIndex !== -1) {
							this.fetchFreights(
								this.editFreightForm.sheId,
								this.currentWarehouseIndex,
								this.currentShelfIndex
							);
						}
					} else {
						// 更新失败
						uni.showToast({
							title: res.data.msg || '更新失败',
							icon: 'none',
							duration: 2500
						});
					}
				} catch (error) {
					console.error('更新三级货架失败:', error);
					uni.showToast({
						title: '更新失败',
						icon: 'none',
						duration: 2500
					});
				}
			},

			// 删除三级货架
			deleteFreight(warehouse, shelf, freight) {
				uni.showModal({
					title: '确认删除',
					content: `确定要删除"${freight.name}"吗？`,
					success: async (res) => {
						if (res.confirm) {
							console.log('确认删除三级货架:', freight);
							// 获取userId
							const userId = uni.getStorageSync('userId');
							if (!userId) {
								uni.showToast({
									title: '用户未登录，请先登录',
									icon: 'none',
									duration: 2500
								});
								return;
							}

							// 调用删除三级货架的API请求
							try {
								const [err, response] = await uni.request({
									url: `https://api.buzhiyushu.cn/zhishu/freight/${freight.id}?LocalUserId=${userId}`,
									method: 'DELETE'
								});

								if (err) {
									console.error('删除三级货架失败:', err);
									uni.showToast({
										title: '删除失败',
										icon: 'none',
										duration: 2500
									});
									return;
								}

								// 检查响应
								if (response.data && response.data.code === 200) {
									// 删除成功
									uni.showToast({
										title: '删除成功',
										icon: 'success',
										duration: 2500
									});
									// 删除成功后刷新当前二级货架的三级货架列表
									const warehouseIndex = this.warehouses.findIndex(w => w.id === warehouse
										.id);
									if (warehouseIndex !== -1) {
										const shelfIndex = this.warehouses[warehouseIndex].shelves.findIndex(
											s => s.id === shelf.id);
										if (shelfIndex !== -1) {
											this.fetchFreights(shelf.id, warehouseIndex, shelfIndex);
										}
									}
								} else {
									// 删除失败
									uni.showToast({
										title: response.data?.msg || '删除失败',
										icon: 'none',
										duration: 2500
									});
								}
							} catch (error) {
								console.error('删除三级货架出错:', error);
								uni.showToast({
									title: '删除失败',
									icon: 'none',
									duration: 2500
								});
							}
						}
					}
				});
			},

			// 切换单位下拉框显示状态
			toggleUnitDropdown() {
				this.showUnitDropdown = !this.showUnitDropdown;
			},

			// 选择单位
			selectUnit(unit) {
				this.editForm.unit = unit;
				this.showUnitDropdown = false;
			},

			// 切换二级货架编辑单位下拉框
			toggleShelfUnitDropdown() {
				this.showShelfUnitDropdown = !this.showShelfUnitDropdown;
			},

			// 选择二级货架编辑单位
			selectShelfUnit(unit) {
				this.editShelfForm.unit = unit;
				this.showShelfUnitDropdown = false;
			},

			// 切换二级货架新增单位下拉框
			toggleAddShelfUnitDropdown() {
				this.showAddShelfUnitDropdown = !this.showAddShelfUnitDropdown;
			},

			// 选择二级货架新增单位
			selectAddShelfUnit(unit) {
				this.addShelfForm.unit = unit;
				this.showAddShelfUnitDropdown = false;
			},

			// 切换三级货架新增单位下拉框
			toggleAddFreightUnitDropdown() {
				this.showAddFreightUnitDropdown = !this.showAddFreightUnitDropdown;
			},

			// 选择三级货架新增单位
			selectAddFreightUnit(unit) {
				this.addFreightForm.unit = unit;
				this.showAddFreightUnitDropdown = false;
			},

			// 切换三级货架编辑单位下拉框
			toggleEditFreightUnitDropdown() {
				this.showEditFreightUnitDropdown = !this.showEditFreightUnitDropdown;
			},

			// 选择三级货架编辑单位
			selectEditFreightUnit(unit) {
				this.editFreightForm.unit = unit;
				this.showEditFreightUnitDropdown = false;
			},
		}
	};
</script>

<style>
	.warehouse-select-container {
		padding: 30rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.header {
		margin-bottom: 40rpx;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title-container {
		flex: 1;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: #666;
		display: block;
	}

	/* 新建按钮样式 */
	.add-btn {
		display: flex;
		align-items: center;
		background-color: #007AFF;
		color: #fff;
		padding: 15rpx 25rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
	}

	.add-icon {
		font-size: 32rpx;
		margin-right: 6rpx;
		font-weight: bold;
	}

	.add-text {
		font-size: 28rpx;
	}

	.warehouse-list {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.warehouse-item {
		padding: 0 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

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

	.warehouse-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		position: relative;
	}

	.warehouse-row:active {
		background-color: #f5f5f5;
	}

	.warehouse-info {
		flex: 1;
	}

	.warehouse-name {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 6rpx;
	}

	.warehouse-action {
		display: flex;
		align-items: center;
	}

	.action-buttons {
		display: flex;
		margin-right: 15rpx;
	}

	.action-btn {
		padding: 6rpx 12rpx;
		margin-right: 10rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
	}

	.edit-btn {
		background-color: #f0f0f0;
		color: #007AFF;
	}

	.delete-btn {
		background-color: #f0f0f0;
		color: #FF3B30;
	}

	.warehouse-arrow {
		width: 40rpx;
		text-align: right;
		margin-right: 20rpx;
	}

	.arrow {
		font-size: 32rpx;
		color: #999;
	}

	.expand-btn {
		background-color: #f0f0f0;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
	}

	.expand-icon {
		font-size: 24rpx;
		color: #666;
	}

	.loading,
	.empty-state {
		padding: 60rpx 0;
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}

	/* 二级货架样式 */
	.sub-shelves {
		margin-top: 20rpx;
		margin-left: 30rpx;
		padding: 10rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
	}

	.sub-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 10rpx 20rpx 10rpx;
		border-bottom: 1rpx solid #eee;
	}

	.sub-title {
		font-size: 26rpx;
		color: #666;
		font-weight: bold;
	}

	.sub-add-btn {
		font-size: 24rpx;
		color: #007AFF;
		background-color: #f0f0f0;
		padding: 6rpx 12rpx;
		border-radius: 20rpx;
	}

	.shelf-item {
		padding: 10rpx;
		border-bottom: 1rpx solid #eee;
	}

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

	.shelf-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
	}

	.shelf-info {
		flex: 1;
	}

	.shelf-name {
		font-size: 28rpx;
		color: #444;
	}

	.shelf-action {
		display: flex;
		align-items: center;
	}

	/* 三级货架样式 */
	.freight-shelves {
		width: 100%;
		margin-top: 10rpx;
		/* margin-left: 30rpx; */
		padding: 10rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
	}

	.freight-item {
		padding: 16rpx 10rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

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

	.freight-info {
		flex: 1;
	}

	.freight-name {
		font-size: 26rpx;
		color: #555;
	}

	.freight-action {
		display: flex;
		align-items: center;
	}

	.loading-sub,
	.empty-sub {
		padding: 20rpx 0;
		text-align: center;
		color: #999;
		font-size: 24rpx;
	}

	/* 添加弹窗样式 */
	.edit-popup-container {
		width: 650rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.edit-popup-header {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.edit-popup-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.edit-popup-close {
		font-size: 40rpx;
		color: #999;
		padding: 0 10rpx;
	}

	.edit-popup-content {
		padding: 20rpx 30rpx;
		max-height: 700rpx;
		overflow-y: auto;
	}

	.edit-form-item {
		margin-bottom: 20rpx;
		position: relative;
	}

	.edit-form-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.required:before {
		content: '* ';
		color: #FF3B30;
	}

	.edit-form-input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.edit-form-unit {
		position: absolute;
		right: 20rpx;
		top: 40rpx;
		font-size: 28rpx;
		color: #666;
	}

	.edit-form-radio {
		display: flex;
		margin-top: 10rpx;
	}

	.radio-item {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
	}

	.radio-circle {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 1rpx solid #ddd;
		margin-right: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.radio-active {
		border-color: #007AFF;
	}

	.radio-active:after {
		content: '';
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background-color: #007AFF;
	}

	.radio-text {
		font-size: 28rpx;
		color: #333;
	}

	.edit-popup-footer {
		display: flex;
		border-top: 1rpx solid #f0f0f0;
	}

	.btn-cancel,
	.btn-confirm {
		flex: 1;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		border: none;
		border-radius: 0;
	}

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

	.btn-confirm {
		background-color: #007AFF;
		color: #fff;
	}

	/* 名称和单位容器样式 */
	.name-unit-container {
		display: flex;
		position: relative;
	}

	/* 带单位选择器的输入框样式 */
	.edit-form-input.with-unit {
		flex: 1;
		padding-right: 70rpx;
		/* 为单位选择器留出空间 */
	}

	/* 单位选择器样式 */
	.unit-selector {
		position: absolute;
		right: 0;
		top: 0;
		height: 80rpx;
		padding: 0 20rpx;
		background-color: #f8f8f8;
		border-left: 1rpx solid #ddd;
		display: flex;
		align-items: center;
		min-width: 60rpx;
	}

	.selected-unit {
		font-size: 28rpx;
		color: #333;
		margin-right: 6rpx;
	}

	.dropdown-icon {
		font-size: 24rpx;
		color: #666;
	}

	/* 下拉选项样式 */
	.unit-dropdown {
		position: absolute;
		right: 0;
		top: 80rpx;
		width: 100rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		z-index: 10;
		border: 1rpx solid #eee;
	}

	.unit-option {
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.unit-option:active,
	.unit-option-active {
		background-color: #f0f0f0;
		color: #007AFF;
	}

	.unit-option:last-child {
		border-bottom: none;
	}
</style>
