<template>
	<view class="contentStyle" style="">

		<view class="status-bar"></view>
		<uni-nav-bar :title="type+'房屋'" left-icon="left" @clickLeft="goBack" :border="false"
			backgroundColor="transparent">
		</uni-nav-bar>

		<scroll-view class="page" scroll-y="true">
			<!-- 步骤条 -->
			<view class="step-bar">
				<view class="step-item active">
					<view class="step-circle">1</view>
					<text class="step-text active">房屋信息</text>
				</view>
				<view class="step-line" :class="{ active: currentStep == 1}"></view>
				<view class="step-item" :class="{ active: currentStep == 1}">
					<view class="step-circle">2</view>
					<text class="step-text" :class="{ active: currentStep == 1}">住户信息</text>
				</view>
			</view>

			<!-- 表单区域 -->
			<view class="form-container">
				<!-- 第一步 -->
				<view v-if="currentStep==0">
					<!-- 小区选择 -->
					<view class="form-item" @click="selectItem('小区')">
						<text class="item-label">小区</text>
						<text class="item-placeholder"
							:class="{selected:formData.community}">{{ formData.community || '请选择' }}</text>
						<text class="item-arrow"></text>
					</view>

					<!-- 楼栋选择 -->
					<view class="form-item" @click="selectItem('楼栋')">
						<text class="item-label">楼栋</text>
						<text class="item-placeholder"
							:class="{selected:formData.building}">{{ formData.building || '请选择' }}</text>
						<text class="item-arrow"></text>
					</view>

					<!-- 单元选择 -->
					<view class="form-item" @click="selectItem('单元')">
						<text class="item-label">单元</text>
						<text class="item-placeholder"
							:class="{selected:formData.unit}">{{ formData.unit || '请选择' }}</text>
						<text class="item-arrow"></text>
					</view>

					<!-- 楼层选择 -->
					<view class="form-item" @click="selectItem('楼层')">
						<text class="item-label">楼层</text>
						<text class="item-placeholder"
							:class="{selected:formData.floor}">{{ formData.floor || '请选择' }}</text>
						<text class="item-arrow"></text>
					</view>

					<!-- 户号选择 -->
					<view class="form-item" @click="selectItem('户号')">
						<text class="item-label">户号</text>
						<text class="item-placeholder"
							:class="{selected:formData.houseNumber}">{{ formData.houseNumber || '请选择' }}</text>
						<text class="item-arrow"></text>
					</view>

					<!-- 房屋状态选择 -->
					<!-- <view class="form-item">
					<text class="item-label">房屋状态</text>
					<text class="item-placeholder">{{ formData.status || '请选择' }}</text>
					<text class="item-arrow">\u003E</text>
				</view> -->
					<!-- 点击这里弹出下拉选择 -->
					<view class="form-item" @click="showPopup = true">
						<text class="label">房屋状态</text>
						<text class="value" :class="{selected:formData.status}">{{ formData.status || '请选择' }}</text>
						<text class="item-arrow"></text>
					</view>

					<!-- 底部弹出下拉选择框（全端可用） -->
					<view v-if="showPopup" class="mask" @click="showPopup=false"></view>
					<view v-if="showPopup" class="popup">
						<view class="popup-header">
							<text class="title">选择房屋状态</text>
							<text class="close" @click="showPopup = false">✕</text>
						</view>

						<view class="list">
							<view :class="{ active: formData.status === item }" class="item"
								v-for="(item, index) in statusList" :key="index" @click="selectClick(item)">
								{{ item }}
							</view>
						</view>
					</view>

					<!-- 设为默认房屋（开关） -->
					<view class="form-item switch-item">
						<text class="item-label" style="width: 100px;">设为默认房屋</text>
						<switch class="no-cross-switch" :checked="formData.isDefault" color="#1677ff"
							@change="onSwitchChange" />
					</view>
				</view>
				<!-- 第二步 -->
				<view v-if="currentStep==1">
					<!-- 表单 -->
					<scroll-view scroll-y class="form-box">
						<view class="form-item">
							<text class="label">住户名称</text>
							<input class="input" v-model="form.name" placeholder="请输入真实姓名" placeholder-class="ph" />
						</view>

						<view class="form-item">
							<text class="label">住户性别</text>
							<view class="gender-group">
								<view class="gender-item" :class="{ active: form.gender == '男' }"
									@click="form.gender = '男'">
									<view class="radio"></view>
									<text>男</text>
								</view>
								<view class="gender-item" :class="{ active: form.gender == '女' }"
									@click="form.gender = '女'">
									<view class="radio"></view>
									<text>女</text>
								</view>
							</view>
						</view>

						<view class="form-item arrow-item" @click="openCardType">
							<text class="label">证件类型</text>
							<text class="value" :class="{selected:form.cardType}">{{ form.cardType || '请选择' }}</text>
						</view>

						<view class="form-item">
							<text class="label">证件号码</text>
							<input class="input" v-model="form.cardNo" placeholder="请输入证件号码" placeholder-class="ph" />
						</view>

						<view class="form-item arrow-item" @click="openRelation">
							<text class="label">与业主关系</text>
							<text class="value" :class="{selected:form.relation}">{{ form.relation || '请选择' }}</text>
						</view>

						<view class="form-item phone-item">
							<text class="label">手机号码</text>
							<input class="input" v-model="form.phone" placeholder="请输入手机号" placeholder-class="ph"
								type="tel" />
							<button class="code-btn" :disabled="cd>0" @click="sendCode">
								{{ cd > 0 ? cd+'s' : '获取验证码' }}
							</button>
						</view>

						<view class="form-item">
							<text class="label">验证码</text>
							<input class="input" v-model="form.code" placeholder="请输入6位验证码" placeholder-class="ph"
								type="number" />
						</view>

						<!-- 身份证上传 -->
						<view class="upload-section">
							<text class="upload-title">上传本人身份证照片</text>
							<text class="upload-desc">请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀</text>

							<view class="upload-wrap">
								<!-- 身份证人像面 -->
								<view class="upload-item" @click="chooseIdCard('front')">
									<!-- 已上传 → 显示图片 -->
									<image :src="idCardFront?idCardFront:frontSideOfIDcardSrc" class="preview-img"
										mode="aspectFit">
									</image>

								</view>

								<!-- 身份证国徽面 -->
								<view class="upload-item" @click="chooseIdCard('back')">
									<image :src="idCardBack?idCardBack:backSideOfIDcardSrc" class="preview-img"
										mode="aspectFit">
									</image>

								</view>
							</view>
						</view>


					</scroll-view>

				</view>
			</view>



			<!-- 证件类型弹窗 -->
			<view v-if="showCardType" class="mask" @click="showCardType=false"></view>
			<view v-if="showCardType" class="popup">
				<view class="popup-header">
					<text>选择证件类型</text>
					<text class="close" @click="showCardType=false">✕</text>
				</view>
				<view class="popup-list">
					<view :class="{ active: form.cardType === item }" class="item" v-for="item in cardTypes" :key="item"
						@click="selectCard(item)">
						{{item}}
					</view>
				</view>
			</view>

			<!-- 关系弹窗 -->
			<view v-if="showRelation" class="mask" @click="showRelation=false"></view>
			<view v-if="showRelation" class="popup">
				<view class="popup-header">
					<text>选择与业主关系</text>
					<text class="close" @click="showRelation=false">✕</text>
				</view>
				<view class="popup-list">
					<view :class="{ active: form.relation === item }" class="item" v-for="item in relations" :key="item"
						@click="selectRelation(item)">
						{{item}}
					</view>
				</view>
			</view>


		</scroll-view>
		<!-- 底部下一步按钮 -->
		<view class="bottom-btn-wrap">
			<button class="next-btn" @click="goNext" v-if="currentStep==0">下一步</button>
			<button class="next-btn" @click="goSubmit" v-if="currentStep==1">提交审核</button>
		</view>
	</view>



</template>

<script>
	export default {
		onReady: function(e) {},
		components: {

		},

		computed: {

		},

		created() {

		},
		onShow() {

		},
		onLoad(option) {
			if (uni.getStorageSync('operationType') == 'update') {
				this.id = option.id;
				this.type = '修改';
				//根据id获取回显数据
				this.formData.community = '北境碧桂园小区';
				this.formData.building = '01栋';
				this.formData.unit = '01单元';
				this.formData.floor = '01层';
				this.formData.houseNumber = '01';
				this.formData.communityId = '1';
				this.formData.buildingId = '1';
				this.formData.unitId = '1';
				this.formData.floorId = '1';
				this.formData.houseNumberId = '1';
				this.formData.status = '租赁';
				this.formData.isDefault = true;
				this.form.name = '王芳';
				this.form.gender = '女';
				this.form.cardType = '身份证';
				this.form.cardNo = '370203200000000911';
				this.form.relation = '本人';
				this.form.phone = '17711111111';
				this.form.code = '';


			} else if (uni.getStorageSync('operationType') == 'add') {
				this.id = undefined;
				this.type = '添加';
			}

		},

		onUnload() {
			clearInterval(this.timer)
		},
		mounted() {},
		data() {
			return {
				frontSideOfIDcardSrc: 'http://47.104.199.163:9090/images/propertyImgs/frontSideOfIDcard.png',
				backSideOfIDcardSrc: 'http://47.104.199.163:9090/images/propertyImgs/backSideOfIDcard.png',
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				id: undefined,
				type: '',
				currentStep: 0,
				showPopup: false,
				statusList: ["自住", "闲置", "租赁", "其他"],
				formData: {
					community: uni.getStorageSync('communityName'),
					building: uni.getStorageSync('buildingName'),
					unit: uni.getStorageSync('unitName'),
					floor: uni.getStorageSync('floorName'),
					houseNumber: uni.getStorageSync('houseNumberName'),
					communityId: uni.getStorageSync('communityId'),
					buildingId: uni.getStorageSync('buildingId'),
					unitId: uni.getStorageSync('unitId'),
					floorId: uni.getStorageSync('floorId'),
					houseNumberId: uni.getStorageSync('houseNumberId'),
					status: uni.getStorageSync('houseStatus'),
					isDefault: uni.getStorageSync('houseIsDefault') == true ? true : false, // 开关默认开启

				},
				form: {
					name: '',
					gender: '男',
					cardType: '',
					cardNo: '',
					relation: '',
					phone: '',
					code: ''
				},
				cd: 0,
				timer: null,
				showCardType: false,
				showRelation: false,
				cardTypes: ['居民身份证', '护照', '其他'],
				relations: ['本人', '配偶', '父母', '子女', '亲属', '租户', '其他'],
				// 身份证图片路径
				idCardFront: '', // 人像面
				idCardBack: '' // 国徽面
			}
		},


		methods: {

			chooseIdCard(type) {
				uni.chooseImage({
					count: 1, // 每次只选1张
					sizeType: ['compressed'], // 压缩
					sourceType: ['camera', 'album'], // 相机+相册
					success: (res) => {
						const tempPath = res.tempFilePaths[0]

						// 赋值回显
						if (type === 'front') {
							this.idCardFront = tempPath
						} else {
							this.idCardBack = tempPath
						}
					}
				})
			},
			openCardType() {
				this.showCardType = true
			},
			openRelation() {
				this.showRelation = true
			},
			selectCard(v) {
				this.form.cardType = v
				this.showCardType = false
			},
			selectRelation(v) {
				this.form.relation = v
				this.showRelation = false
			},

			sendCode() {
				if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
					return uni.showToast({
						title: '手机号格式错误',
						icon: 'none'
					})
				}
				this.cd = 60
				this.timer = setInterval(() => {
					this.cd--
					if (this.cd <= 0) clearInterval(this.timer)
				}, 1000)
			},
			// 完整校验
			goSubmit() {
				if (!this.form.name) return uni.showToast({
					title: '请输入住户姓名',
					icon: 'none'
				})
				if (!this.form.gender) return uni.showToast({
					title: '请选择住户性别',
					icon: 'none'
				})
				if (!this.form.cardType) return uni.showToast({
					title: '请选择证件类型',
					icon: 'none'
				})
				if (!this.form.cardNo) return uni.showToast({
					title: '请输入证件号',
					icon: 'none'
				})
				if (!this.form.relation) return uni.showToast({
					title: '请选择关系',
					icon: 'none'
				})
				if (!/^1[3-9]\d{9}$/.test(this.form.phone)) return uni.showToast({
					title: '手机号错误',
					icon: 'none'
				})
				if (!this.form.code || this.form.code.length !== 6) return uni.showToast({
					title: '请输入6位验证码',
					icon: 'none'
				})
				if (!this.idCardFront) return uni.showToast({
					title: '请上传身份证人像面',
					icon: 'none'
				})
				if (!this.idCardBack) return uni.showToast({
					title: '请上传身份证国徽面',
					icon: 'none'
				})

				uni.showModal({
					title: '确认提交',
					content: '提交后进入审核',
					mask: true,
					success: (res) => {

						uni.showLoading({
							title: '提交中...',
							mask: true
						});
						setTimeout(() => {
							uni.showToast({
								title: '提交成功',
								icon: 'success'
							});
						}, 1000);
						setTimeout(() => {
							// 提交成功后跳转列表页
							uni.hideLoading();
							this.goBack();
						}, 2500);
					}
				})
			},

			selectClick(item) {
				this.formData.status = item;
				uni.setStorageSync('houseStatus', item)
				this.showPopup = false;
			},
			// 选择项点击事件（可替换为picker/弹窗选择）
			selectItem(type) {
				console.log(type);
				console.log(uni.getStorageSync('checkType'));
				if (type === '小区') {
					uni.redirectTo({
						url: '/pages/my/selectResidentialCommunity?sourcePage=' + 'addHouse',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else if (type === '楼栋') {
					if (!this.formData.community) {
						uni.showToast({
							title: '请先选择上级',
							icon: 'none'
						})

					} else {
						uni.setStorageSync('checkType', '楼栋');
						uni.redirectTo({
							url: '/pages/my/selectBuilding',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}

				} else if (type === '单元') {
					if (!this.formData.community || !this.formData.building) {
						uni.showToast({
							title: '请先选择上级',
							icon: 'none'
						})

					} else {
						uni.setStorageSync('checkType', '单元');
						uni.redirectTo({
							url: '/pages/my/selectBuilding',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
				} else if (type === '楼层') {
					if (!this.formData.community || !this.formData.building || !this.formData.unit) {
						uni.showToast({
							title: '请先选择上级',
							icon: 'none'
						})

					} else {
						uni.setStorageSync('checkType', '楼层');
						uni.redirectTo({
							url: '/pages/my/selectBuilding',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
				} else if (type === '户号') {
					if (!this.formData.community || !this.formData.building || !this.formData.unit || !this.formData
						.floor) {
						uni.showToast({
							title: '请先选择上级',
							icon: 'none'
						})

					} else {
						uni.setStorageSync('checkType', '户号');
						uni.redirectTo({
							url: '/pages/my/selectBuilding',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
				}
			},

			// 开关切换
			onSwitchChange(e) {
				this.formData.isDefault = e.detail.value
				uni.setStorageSync('houseIsDefault', e.detail.value)
			},

			// 下一步
			goNext() {
				// 基础校验
				if (!this.formData.community) {
					uni.showToast({
						title: '请选择小区',
						icon: 'none'
					})
					return
				}
				if (!this.formData.building) {
					uni.showToast({
						title: '请选择楼栋',
						icon: 'none'
					})
					return
				}
				if (!this.formData.unit) {
					uni.showToast({
						title: '请选择单元',
						icon: 'none'
					})
					return
				}
				if (!this.formData.floor) {
					uni.showToast({
						title: '请选择楼层',
						icon: 'none'
					})
					return
				}
				if (!this.formData.houseNumber) {
					uni.showToast({
						title: '请选择户号',
						icon: 'none'
					})
					return
				}
				if (!this.formData.status) {
					uni.showToast({
						title: '请选择房屋状态',
						icon: 'none'
					})
					return
				}
				this.currentStep = 1
				//跳转
			},
			goBack() {
				uni.removeStorageSync('communityId');
				uni.removeStorageSync('communityName');
				uni.removeStorageSync('buildingId');
				uni.removeStorageSync('buildingName');
				uni.removeStorageSync('unitId');
				uni.removeStorageSync('unitName');
				uni.removeStorageSync('floorId');
				uni.removeStorageSync('floorName');
				uni.removeStorageSync('houseNumberId');
				uni.removeStorageSync('houseNumberName');
				uni.removeStorageSync('houseStatus')
				uni.removeStorageSync('houseIsDefault')

				uni.redirectTo({
					url: '/pages/my/myHouseIndex',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

		},


	}
</script>
<style lang="scss">
	page {
		background: #fff;
	}
</style>

<style>
	/* 全局样式：去掉switch的×号，保证开关纯净 */
	.my-switch::before {
		display: none !important;
	}

	.my-switch {
		background-color: #e5e5e5 !important;
		border: none !important;
		width: 90rpx !important;
		height: 48rpx !important;
		border-radius: 50rpx !important;
	}

	.my-switch[checked="true"] {
		background-color: #1677ff !important;
	}

	.my-switch::after {
		width: 44rpx !important;
		height: 44rpx !important;
		border-radius: 50% !important;
		margin: 2rpx !important;
	}
</style>

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		background-color: #fff;
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 40rpx;
		box-sizing: border-box;
	}




	/* 步骤条 */
	.step-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0px 20rpx;
	}

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

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

	.step-item.active .step-circle {
		background-color: #1677ff;
	}

	.step-text {
		font-size: 28rpx;
		color: #999;
	}

	.step-item.active .step-text {
		color: #1677ff;
		font-weight: 500;
	}

	.step-line {
		width: 150rpx;
		height: 4rpx;
		background-color: #ccc;
		margin: 0 20rpx;
		margin-bottom: 40rpx;
	}

	.step-line.active {
		background-color: #1677ff;
	}

	/* 表单容器 */
	.form-container {
		/* padding: 0 30rpx; */

	}

	/* 表单项 */
	.form-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.item-label {
		font-size: 28rpx;
		color: #000;
		width: 90px;
		font-weight: 600;
	}

	.item-placeholder {
		flex: 1;
		font-size: 28rpx;
		color: #999;
	}

	.item-placeholder.selected {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	/* .item-arrow {
		font-size: 40rpx;
		color: #ccc;
		margin-left: 20rpx;
	} */

	/* 开关项 */
	.switch-item {
		justify-content: space-between;
	}

	/* 底部按钮区 */
	.bottom-btn-wrap {
		padding: 20rpx 30rpx 40rpx;
		display: flex;
		gap: 20rpx;

		/* background-color: #fff; */
	}

	.next-btn {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #1677ff;
		color: #fff;
		font-size: 36rpx;
		border-radius: 12rpx;
		border: none;
	}
</style>
<style>
	/* 注意：这里不能加 scoped！必须写全局样式 */
	::v-deep .uni-switch-input:before {

		background-color: #cccccd !important;


	}

	/* 隐藏 switch 关闭状态的 × 号 */
	.no-cross-switch::before {
		display: none !important;
	}

	.no-cross-switch {
		transform: scale(0.85);
		border-radius: 50rpx !important;
	}

	.no-cross-switch>>>.uni-switch-input-checked {
		background-color: #007aff !important;
	}
</style>
<style scoped>
	.status-bar {
		width: 100vw;
		height: 46px;
	}

	/* 表单项 —— 和你页面保持一致 */
	.form-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.label {
		font-size: 28rpx;
		color: #000;
		width: 90px;
		font-weight: 600;
	}

	.value {
		flex: 1;
		text-align: left;
		font-size: 28rpx;
		color: #999;
		margin-right: 10rpx;
	}

	.value.selected {
		font-size: 28rpx;
		color: #333;
	}

	.arrow {
		font-size: 28rpx;
		color: #ccc;
	}

	/* 遮罩 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 99;
	}

	/* 底部弹出框 */
	.popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 100;
		max-height: 60vh;
	}

	.popup-header {
		padding: 30rpx;
		text-align: center;
		border-bottom: 1rpx solid #f0f0f0;
		position: relative;
	}

	.title {
		font-size: 32rpx;
		font-weight: 500;
	}

	.close {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 36rpx;
		color: #666;
	}

	/* 选项列表 */
	.list {
		padding: 0 30rpx;
	}

	.item {
		padding: 30rpx 0;
		text-align: center;
		font-size: 28rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

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

	.item.active {
		color: #337eff;
		font-weight: 500;
		background-color: #f8f9fa;
	}
</style>
<style scoped>
	/* 表单 */


	.form-item {
		display: flex;
		align-items: center;
		padding: 28rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
		position: relative;
	}

	.label {
		width: 180rpx;
		font-size: 28rpx;
		color: #333;
	}

	.input {
		flex: 1;
		font-size: 28rpx;
		text-align: left;
		color: #333;
	}

	.ph {
		color: #999 !important;
	}

	.arrow-item::after {
		content: '>';
		position: absolute;
		right: 0;
		color: #ccc;
		font-size: 28rpx;
	}

	.value {
		flex: 1;
		text-align: left;
		font-size: 28rpx;
		color: #999;
		padding-right: 40rpx;
	}

	/* 性别 */
	.gender-group {
		flex: 1;
		display: flex;
		justify-content: flex-start;
		gap: 40rpx;
	}

	.gender-item {
		display: flex;
		align-items: center;
		gap: 12rpx;
		font-size: 28rpx;
		color: #666;
	}

	.gender-item.active {
		color: #1677ff;
	}

	.radio {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 2rpx solid #ddd;
		position: relative;
	}

	.gender-item.active .radio::after {
		content: '';
		width: 18rpx;
		height: 18rpx;
		background: #1677ff;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* 手机验证码 */
	.phone-item .input {
		padding-right: 200rpx;
	}

	.code-btn {
		position: absolute;
		right: 0;
		background: #2F77FD;
		color: #fff;
		font-size: 26rpx;
		padding:6rpx 30rpx;
		border: 2rpx solid #efefef;
		/* border-radius: 99px; */
	}

	/* 上传区域 */
	.upload-section {
		margin-top: 30rpx;
	}

	.upload-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 12rpx;
		display: block;
		font-weight: 600;
	}

	.upload-desc {
		font-size: 24rpx;
		color: #666666;
		line-height: 1.5;
		margin-bottom: 30rpx;
	}

	/* 两列布局 */
	.upload-wrap {
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.upload-item {
		/* flex: 1; */
		height: 200px;
		border-radius: 16rpx;
		overflow: hidden;
		background: #f3f3f3;
		position: relative;
	}

	/* 上传按钮 */
	.upload-box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.plus {
		font-size: 50rpx;
		color: #ccc;
		margin-bottom: 12rpx;
	}

	.txt {
		font-size: 26rpx;
		color: #999;
	}

	/* 预览图 */
	.preview-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}


	/* 弹窗遮罩 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 99;
	}

	.popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 100;
		max-height: 60vh;
	}

	.popup-header {
		padding: 30rpx;
		text-align: center;
		border-bottom: 1rpx solid #eee;
		font-size: 32rpx;
		font-weight: 500;
		position: relative;
	}

	.close {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 36rpx;
		color: #666;
	}

	.popup-list {
		padding: 0 30rpx;
		max-height: 40vh;
		overflow-y: auto;
	}

	.item {
		padding: 30rpx 0;
		text-align: center;
		font-size: 28rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	

	.item.active {
		color: #337eff;
		font-weight: 600;
		background-color: #f8f9fa;
	}

	.item-arrow {
		display: inline-block;
		width:10rpx;
		height:10rpx;
		border-top: 2rpx solid #999;
		border-right: 2rpx solid #999;
		transform: rotate(45deg);
		margin-left: 10rpx;
		margin-right:10rpx;
	}
</style>