<template>
	<view class="create-warehouse-container">
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="title">创建货区</text>
		</view>

		<!-- 步骤指示器 -->
		<view class="steps">
			<view class="step" :class="{ 'active': currentStep >= 1, 'completed': currentStep > 1 }">
				<view class="step-number">1</view>
				<text class="step-text">一级货区</text>
			</view>
			<view class="step-line" :class="{ 'active': currentStep > 1 }"></view>
			<view class="step" :class="{ 'active': currentStep >= 2, 'completed': currentStep > 2 }">
				<view class="step-number">2</view>
				<text class="step-text">二级货区</text>
			</view>
			<view class="step-line" :class="{ 'active': currentStep > 2 }"></view>
			<view class="step" :class="{ 'active': currentStep >= 3 }">
				<view class="step-number">3</view>
				<text class="step-text">三级货区</text>
			</view>
		</view>

		<!-- 一级货区表单 -->
		<view v-if="currentStep === 1" class="form-container">
			<view class="form-title">添加一级货区信息</view>

			<view class="form-item">
				<text class="label required">名称</text>
				<view class="name-unit-container">
					<input class="input with-unit" v-model="firstLevelForm.name" placeholder="请输入名称" />
					<view class="unit-selector" @click="showFirstLevelUnitDropdown = !showFirstLevelUnitDropdown">
						<text class="selected-unit">{{ firstLevelForm.unit || '库' }}</text>
						<text class="dropdown-icon">▼</text>
					</view>
					<view v-if="showFirstLevelUnitDropdown" class="unit-dropdown">
						<view v-for="unit in unitOptions" :key="unit" class="unit-option"
							@click="selectFirstLevelUnit(unit)">
							{{ unit }}
						</view>
					</view>
				</view>
			</view>

			<view class="form-item">
				<text class="label required">货区数量</text>
				<input class="input" v-model="firstLevelForm.sheQuantityMax" type="number"
					placeholder="输入数量(1-255，不得以0开头)" />
			</view>

			<view class="form-item">
				<text class="label required">货区编码</text>
				<input class="input" v-model="firstLevelForm.code" placeholder="格式示例: AA/aa/A1/a1/1A/1a,不能以0开头" />
			</view>

			<view class="form-item">
				<text class="label">货区地址</text>
				<input class="input" v-model="firstLevelForm.address" placeholder="请输入货区地址，例如 贵阳市和平区XXX街XX号" />
			</view>

			<view class="form-item">
				<text class="label">管理员</text>
				<input class="input" v-model="firstLevelForm.manager" placeholder="请输入管理员,不得超过8位" />
			</view>

			<view class="form-item">
				<text class="label">备注</text>
				<input class="input" v-model="firstLevelForm.remark" placeholder="请输入备注" />
			</view>

			<view class="form-item">
				<text class="label required">运费模板</text>
				<view class="name-unit-container">
					<picker class="picker-block" mode="selector" :range="logisticsTemplates" range-key="templateName"
						@change="onTemplatePickerChange">
						<input class="input" :value="selectedTemplateName" placeholder="请选择运费模板" readonly />
					</picker>
				</view>
			</view>

			<button class="btn next-btn" @click="createFirstLevel">下一步</button>
		</view>

		<!-- 二级货区表单 -->
		<view v-if="currentStep === 2" class="form-container">
			<view class="form-title">创建二级货区信息</view>

			<view class="form-item">
				<text class="label">所属一级货区</text>
				<view class="input selected-value">{{ firstLevelForm.name || createdFirstLevel.name }}</view>
			</view>

			<view class="form-item">
				<text class="label required">名称</text>
				<view class="name-unit-container">
					<input class="input with-unit" v-model="secondLevelForm.name" placeholder="请输入货区名称,不得超过10位" />
					<view class="unit-selector" @click="showSecondLevelUnitDropdown = !showSecondLevelUnitDropdown">
						<text class="selected-unit">{{ secondLevelForm.unit || '区' }}</text>
						<text class="dropdown-icon">▼</text>
					</view>
					<view v-if="showSecondLevelUnitDropdown" class="unit-dropdown">
						<view v-for="unit in unitOptions" :key="unit" class="unit-option"
							@click="selectSecondLevelUnit(unit)">
							{{ unit }}
						</view>
					</view>
				</view>
			</view>

			<view class="form-item">
				<text class="label required">货区编码</text>
				<input class="input" v-model="secondLevelForm.code" placeholder="格式示例: AA/aa/A1/a1/1A/1a,不能以0开头" />
			</view>

			<view class="btn-group">
				<button class="btn back-step-btn" @click="goToStep(1)">上一步</button>
				<button class="btn next-btn" @click="createSecondLevel">下一步</button>
			</view>
		</view>

		<!-- 三级货区表单 -->
		<view v-if="currentStep === 3" class="form-container">
			<view class="form-title">创建三级货区信息</view>

			<view class="form-item">
				<text class="label">所属二级货区</text>
				<view class="input selected-value">{{ secondLevelForm.name || createdSecondLevel.name }}</view>
			</view>

			<view class="form-item">
				<text class="label">名称</text>
				<view class="name-unit-container">
					<input class="input with-unit" v-model="thirdLevelForm.name" placeholder="请输入名称" />
					<view class="unit-selector" @click="showThirdLevelUnitDropdown = !showThirdLevelUnitDropdown">
						<text class="selected-unit">{{ thirdLevelForm.unit || '架' }}</text>
						<text class="dropdown-icon">▼</text>
					</view>
					<view v-if="showThirdLevelUnitDropdown" class="unit-dropdown">
						<view v-for="unit in unitOptions" :key="unit" class="unit-option"
							@click="selectThirdLevelUnit(unit)">
							{{ unit }}
						</view>
					</view>
				</view>
			</view>

			<view class="form-item">
				<text class="label required">货区编码</text>
				<input class="input" v-model="thirdLevelForm.code" placeholder="格式示例: AA/aa/A1/a1/1A/1a,不能以0开头" />
			</view>

			<view class="btn-group">
				<button class="btn back-step-btn" @click="goToStep(2)">上一步</button>
				<button class="btn complete-btn" @click="createThirdLevel">完成</button>
			</view>
		</view>

		<!-- 完成页面 -->
		<view v-if="currentStep === 4" class="completion-container">
			<view class="completion-icon">✓</view>
			<text class="completion-title">创建成功</text>
			<text class="completion-message">货区已成功创建</text>

			<view class="completion-details">
				<view class="completion-item">
					<text class="completion-label">一级货区:</text>
					<text class="completion-value">{{ firstLevelForm.name || createdFirstLevel.name }}</text>
				</view>
				<view class="completion-item">
					<text class="completion-label">二级货区:</text>
					<text class="completion-value">{{ secondLevelForm.name || createdSecondLevel.name }}</text>
				</view>
				<view class="completion-item">
					<text class="completion-label">三级货区:</text>
					<text class="completion-value">{{ thirdLevelForm.name || createdThirdLevel.name }}</text>
				</view>
			</view>

			<button class="btn home-btn" @click="goToWarehouseList">返回货区列表</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentStep: 1,
				userId: '',
				phoneNumber: '',
				// 单位选项
				unitOptions: ['库', '区', '架', '层', '位'],
				// 下拉框显示状态
				showFirstLevelUnitDropdown: false,
				showSecondLevelUnitDropdown: false,
				showThirdLevelUnitDropdown: false,
				// 新增：模板选择下拉状态与数据
				showTemplateDropdown: false,
				logisticsTemplates: [],
				selectedTemplateId: '',
				selectedTemplateName: '',
				// 一级货区表单
				firstLevelForm: {
					name: '',
					unit: '库',
					sheQuantityMax: '',
					code: '',
					address: '',
					manager: '',
					remark: ''
				},
				// 创建成功后的一级货区信息
				createdFirstLevel: {},
				// 二级货区表单
				secondLevelForm: {
					name: '',
					unit: '区',
					code: ''
				},
				// 创建成功后的二级货区信息
				createdSecondLevel: {},
				// 三级货区表单
				thirdLevelForm: {
					name: '',
					unit: '架',
					code: ''
				},
				// 创建成功后的三级货区信息
				createdThirdLevel: {}
			}
		},

		onLoad() {
			// 获取用户手机号
			this.phoneNumber = uni.getStorageSync('phoneNumber');

			if (!this.phoneNumber) {
				uni.showToast({
					title: '登录信息无效，请重新登录',
					icon: 'none'
				});

				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/login/index'
					});
				}, 1500);
				return;
			}
			// 新增：页面加载后拉取运费模板
			this.fetchLogisticsTemplates();
		},

		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 跳转到指定步骤
			goToStep(step) {
				this.currentStep = step;
			},

			/**
			 * 拉取运费模板列表
			 * 从后端接口获取当前用户的运费模板，用于创建货区时选择。
			 * 如果模板总数为0，提示用户先去创建运费模板。
			 */
			async fetchLogisticsTemplates() {
				try {
					const userId = uni.getStorageSync('userId');
					const [err, res] = await uni.request({
						url: 'https://api.buzhiyushu.cn/zhishu/logistics/xcx/list',
						method: 'GET',
						data: {
							userId
						}
					});
					if (err) {
						console.error('获取运费模板失败:', err);
						uni.showToast({
							title: '获取运费模板失败',
							icon: 'none'
						});
						return;
					}
					const data = res.data || {};
					this.logisticsTemplates = Array.isArray(data.rows) ? data.rows : [];
					if ((data.total || 0) === 0) {
						uni.showToast({
							title: '请先去创建运费模板后再创建货区',
							icon: 'none'
						});
					}
				} catch (e) {
					console.error('获取运费模板异常:', e);
					uni.showToast({
						title: '获取运费模板异常',
						icon: 'none'
					});
				}
			},

			/**
			 * 选择运费模板
			 * @param {Object} tpl 运费模板对象
			 */
			selectLogisticsTemplate(tpl) {
				this.selectedTemplateId = tpl.id;
				this.selectedTemplateName = tpl.templateName;
				this.firstLevelForm.templateId = tpl.id;
				this.showTemplateDropdown = false;
			},

			/**
			 * picker选择运费模板事件
			 * @param {Object} e 选择事件，e.detail.value为选中索引
			 */
			onTemplatePickerChange(e) {
				const idx = e.detail.value;
				const tpl = this.logisticsTemplates[idx];
				if (!tpl) return;
				this.selectedTemplateId = tpl.id;
				this.selectedTemplateName = tpl.templateName;
				this.firstLevelForm.templateId = tpl.id;
			},

			// 创建一级货区
			async createFirstLevel() {
				// 表单验证
				if (!this.firstLevelForm.name) {
					uni.showToast({
						title: '请输入货区名称',
						icon: 'none'
					});
					return;
				}

				// 验证货区数量
				if (!this.firstLevelForm.sheQuantityMax) {
					uni.showToast({
						title: '请输入货区数量',
						icon: 'none'
					});
					return;
				}
				if (!this.firstLevelForm.unit) {
					uni.showToast({
						title: '请输入单位',
						icon: 'none'
					});
					return;
				}

				// 检查货区数量是否以0开头
				if (this.firstLevelForm.sheQuantityMax.toString().startsWith('0')) {
					uni.showToast({
						title: '货区数量不能以0开头',
						icon: 'none'
					});
					return;
				}

				// 检查货区数量是否超过255
				if (parseInt(this.firstLevelForm.sheQuantityMax) > 255) {
					uni.showToast({
						title: '货区数量不能超过255',
						icon: 'none'
					});
					return;
				}

				// 验证货区编码
				if (!this.firstLevelForm.code) {
					uni.showToast({
						title: '请输入货区编码',
						icon: 'none'
					});
					return;
				}

				// 检查货区编码是否以0开头
				if (this.firstLevelForm.code.startsWith('0')) {
					uni.showToast({
						title: '货区编码不能以0开头',
						icon: 'none'
					});
					return;
				}

				// 验证货区编码格式
				const codeRegex = /^[A-Za-z0-9]+$/;
				if (!codeRegex.test(this.firstLevelForm.code)) {
					uni.showToast({
						title: '货区编码格式不正确',
						icon: 'none'
					});
					return;
				}

				// 校验运费模板是否可用并已选择
				if (!this.logisticsTemplates.length) {
					uni.showToast({
						title: '请先去创建运费模板后再创建货区',
						icon: 'none'
					});
					return;
				}
				if (!this.selectedTemplateId) {
					uni.showToast({
						title: '请选择运费模板',
						icon: 'none'
					});
					return;
				}

				// 显示加载中
				uni.showLoading({
					title: '创建中...'
				});

				// 发送请求创建一级货区
				try {
					const userId = uni.getStorageSync("userId")
					const [err, response] = await uni.request({
						url: 'https://api.buzhiyushu.cn/depot/depot',
						method: 'POST',
						data: {
							userId: userId,
							phoneNumber: this.phoneNumber,
							unit: this.firstLevelForm.unit,
							name: this.firstLevelForm.name,
							sheQuantityMax: this.firstLevelForm.sheQuantityMax,
							code: this.firstLevelForm.code,
							address: this.firstLevelForm.address,
							manager: this.firstLevelForm.manager,
							remark: this.firstLevelForm.remark,
							templateId: this.selectedTemplateId
						}
					});

					if (err) {
						uni.hideLoading();
						console.error('创建一级货区失败:', err);
						uni.showToast({
							title: '创建一级货区失败',
							icon: 'none'
						});
						return;
					}

					if (response.data.code !== 200) {
						uni.hideLoading();
						uni.showToast({
							title: response.data.msg || '创建一级货区失败',
							icon: 'none'
						});
						return;
					}

					// 创建成功后，调用getDepotId接口获取完整信息
					const [getErr, getResponse] = await uni.request({
						url: 'https://api.buzhiyushu.cn/depot/depot/getDepotId',
						method: 'GET',
						data: {
							userId: userId,
							code: this.firstLevelForm.code
						}
					});

					uni.hideLoading();

					if (getErr) {
						console.error('获取一级货区ID失败:', getErr);
						uni.showToast({
							title: '获取一级货区信息失败',
							icon: 'none'
						});
						return;
					}

					if (getResponse.data.code !== 200 || !getResponse.data.rows || getResponse.data.rows.length ===
						0) {
						console.error('获取一级货区信息失败:', getResponse.data);
						uni.showToast({
							title: '获取一级货区信息失败',
							icon: 'none'
						});
						return;
					}

					// 保存创建的一级货区信息
					const depotInfo = getResponse.data.rows[0];
					this.createdFirstLevel = {
						id: depotInfo.id,
						name: depotInfo.name
					};

					console.log('一级货区信息:', this.createdFirstLevel);

					uni.showToast({
						title: '创建一级货区成功',
						icon: 'success'
					});

					// 进入下一步
					this.currentStep = 2;

				} catch (error) {
					uni.hideLoading();
					console.error('创建一级货区异常:', error);
					uni.showToast({
						title: '创建一级货区失败',
						icon: 'none'
					});
				}
			},

			// 创建二级货区
			async createSecondLevel() {
				// 表单验证
				if (!this.secondLevelForm.name) {
					uni.showToast({
						title: '请输入货区名称',
						icon: 'none'
					});
					return;
				}
				if (!this.secondLevelForm.code) {
					uni.showToast({
						title: '请输入货区编码',
						icon: 'none'
					});
					return;
				}

				// 检查货区编码是否以0开头
				if (this.secondLevelForm.code.startsWith('0')) {
					uni.showToast({
						title: '货区编码不能以0开头',
						icon: 'none'
					});
					return;
				}

				// 验证货区编码格式
				const codeRegex = /^[A-Za-z0-9]+$/;
				if (!codeRegex.test(this.secondLevelForm.code)) {
					uni.showToast({
						title: '货区编码格式不正确',
						icon: 'none'
					});
					return;
				}

				// 显示加载中
				uni.showLoading({
					title: '创建中...'
				});

				// 发送请求创建二级货区
				try {
					const userId = uni.getStorageSync("userId")
					const [err, response] = await uni.request({
						url: 'https://api.buzhiyushu.cn/shelves/shelves',
						method: 'POST',
						data: {
							userId: userId,
							phoneNumber: this.phoneNumber,
							depotId: this.createdFirstLevel.id, // 关联的一级货区ID
							name: this.secondLevelForm.name,
							code: this.secondLevelForm.code,
							unit: this.secondLevelForm.unit
						}
					});

					if (err) {
						uni.hideLoading();
						console.error('创建二级货区失败:', err);
						uni.showToast({
							title: '创建二级货区失败',
							icon: 'none'
						});
						return;
					}

					if (response.data.code !== 200) {
						uni.hideLoading();
						uni.showToast({
							title: response.data.msg || '创建二级货区失败',
							icon: 'none'
						});
						return;
					}

					// 创建成功后，调用getShelvesId接口获取完整信息
					const [getErr, getResponse] = await uni.request({
						url: 'https://api.buzhiyushu.cn/shelves/shelves/getShelvesId',
						method: 'GET',
						data: {
							depotId: this.createdFirstLevel.id,
							code: this.secondLevelForm.code
						}
					});

					uni.hideLoading();

					if (getErr) {
						console.error('获取二级货区ID失败:', getErr);
						uni.showToast({
							title: '获取二级货区信息失败',
							icon: 'none'
						});
						return;
					}

					if (getResponse.data.code !== 200 || !getResponse.data.rows || getResponse.data.rows.length ===
						0) {
						console.error('获取二级货区信息失败:', getResponse.data);
						uni.showToast({
							title: '获取二级货区信息失败',
							icon: 'none'
						});
						return;
					}

					// 保存创建的二级货区信息
					const shelvesInfo = getResponse.data.rows[0];
					this.createdSecondLevel = {
						id: shelvesInfo.id,
						name: shelvesInfo.name
					};

					console.log('二级货区信息:', this.createdSecondLevel);

					uni.showToast({
						title: '创建二级货区成功',
						icon: 'success'
					});

					// 进入下一步
					this.currentStep = 3;

				} catch (error) {
					uni.hideLoading();
					console.error('创建二级货区异常:', error);
					uni.showToast({
						title: '创建二级货区失败',
						icon: 'none'
					});
				}
			},

			// 创建三级货区
			async createThirdLevel() {
				// 表单验证
				if (!this.thirdLevelForm.code) {
					uni.showToast({
						title: '请输入货区编码',
						icon: 'none'
					});
					return;
				}

				// 检查货区编码是否以0开头
				if (this.thirdLevelForm.code.startsWith('0')) {
					uni.showToast({
						title: '货区编码不能以0开头',
						icon: 'none'
					});
					return;
				}

				// 验证货区编码格式
				const codeRegex = /^[A-Za-z0-9]+$/;
				if (!codeRegex.test(this.thirdLevelForm.code)) {
					uni.showToast({
						title: '货区编码格式不正确',
						icon: 'none'
					});
					return;
				}

				// 显示加载中
				uni.showLoading({
					title: '创建中...'
				});

				// 发送请求创建三级货区
				try {
					const userId = uni.getStorageSync("userId")
					const [err, response] = await uni.request({
						url: 'https://api.buzhiyushu.cn/zhishu/freight',
						method: 'POST',
						data: {
							userId: userId,
							phoneNumber: this.phoneNumber,
							shelvesId: this.createdSecondLevel.id, // 关联的二级货区ID
							name: this.thirdLevelForm.name,
							unit: this.thirdLevelForm.unit,
							code: this.thirdLevelForm.code
						}
					});

					uni.hideLoading();

					if (err) {
						console.log('创建三级货区失败:', err);
						uni.showToast({
							title: '创建三级货区失败,请检查编码是否有误',
							icon: 'none'
						});
						return;
					}
					if (response.data.code !== 200) {
						uni.showToast({
							title: '创建三级货区失败,请检查编码是否有误',
							icon: 'none'
						});
						return;
					}

					// 保存创建的三级货区信息
					this.createdThirdLevel = {
						id: response.data.data,
						name: this.thirdLevelForm.name || this.thirdLevelForm.code
					};

					uni.showToast({
						title: '创建三级货区成功',
						icon: 'success'
					});

					// 进入完成页面
					this.currentStep = 4;

				} catch (error) {
					uni.hideLoading();
					console.error('创建三级货区异常:', error);
					uni.showToast({
						title: '创建三级货区失败',
						icon: 'none'
					});
				}
			},

			// 返回货区列表
			goToWarehouseList() {
				uni.navigateTo({
					url: '/pages/warehouse/warehouse-select' // 指定目标页面路径
				});
			},

			// 选择一级货区单位
			selectFirstLevelUnit(unit) {
				this.firstLevelForm.unit = unit;
				this.showFirstLevelUnitDropdown = false;
			},

			// 选择二级货区单位
			selectSecondLevelUnit(unit) {
				this.secondLevelForm.unit = unit;
				this.showSecondLevelUnitDropdown = false;
			},

			// 选择三级货区单位
			selectThirdLevelUnit(unit) {
				this.thirdLevelForm.unit = unit;
				this.showThirdLevelUnitDropdown = false;
			}
		}
	}
</script>

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

	.header {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		font-size: 40rpx;
		color: #333;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		flex: 1;
		text-align: center;
		margin-right: 60rpx;
		/* 为了平衡返回按钮的宽度 */
	}

	/* 步骤指示器样式 */
	.steps {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40rpx;
		padding: 0 20rpx;
	}

	.step {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.step-number {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.step.active .step-number {
		background-color: #007AFF;
	}

	.step.completed .step-number {
		background-color: #4cd964;
	}

	.step-text {
		font-size: 24rpx;
		color: #666;
	}

	.step.active .step-text {
		color: #007AFF;
		font-weight: bold;
	}

	.step.completed .step-text {
		color: #4cd964;
	}

	.step-line {
		height: 2rpx;
		background-color: #ddd;
		flex: 1;
		margin: 0 10rpx;
		margin-bottom: 30rpx;
	}

	.step-line.active {
		background-color: #4cd964;
	}

	/* 表单样式 */
	.form-container {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.form-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		text-align: center;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f0f0f0;
	}

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

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

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

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

	.selected-value {
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
	}

	.btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 30rpx;
		border-radius: 8rpx;
		margin-top: 20rpx;
	}

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

	.btn-group {
		display: flex;
		justify-content: space-between;
	}

	.back-step-btn {
		background-color: #f5f5f5;
		color: #666;
		flex: 1;
		margin-right: 20rpx;
	}

	.complete-btn {
		background-color: #4cd964;
		color: #fff;
		flex: 1;
	}

	/* 完成页面样式 */
	.completion-container {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 50rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.completion-icon {
		width: 120rpx;
		height: 120rpx;
		background-color: #4cd964;
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 60rpx;
		margin-bottom: 30rpx;
	}

	.completion-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.completion-message {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 40rpx;
	}

	.completion-details {
		width: 100%;
		background-color: #f8f8f8;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 40rpx;
	}

	.completion-item {
		display: flex;
		margin-bottom: 15rpx;
	}

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

	.completion-label {
		font-size: 28rpx;
		color: #666;
		width: 150rpx;
	}

	.completion-value {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		flex: 1;
	}

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

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

	/* 让picker占满容器宽度，使内部input与备注输入框同宽 */
	.picker-block {
		display: block;
		width: 100%;
	}

	/* 带单位选择器的输入框样式 */
	.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;
		cursor: pointer;
	}

	.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;
		border-radius: 4rpx;
	}

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

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

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