<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar :title="type+'车位'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
			:border="false">
		</uni-nav-bar>

		<scroll-view class="page" scroll-y="true">


			<!-- 表单区域 -->
			<view class="form-container">
				<!-- 第一步 -->
				<view>
					<!-- 小区选择 -->
					<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.bindHouse}">{{ formData.bindHouse || '请选择' }}</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.parkingLot}">{{ formData.parkingLot || '请选择' }}</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.parkingSpaceNum}">{{ formData.parkingSpaceNum || '请选择' }}</text>
						<text class="item-arrow"></text>
					</view>

					<!-- 车位状态选择 -->

					<view class="form-item">
						<text class="label">车位状态</text>
						<view class="parkingSpaceStatus-group">
							<view class="parkingSpaceStatus-item"
								:class="{ active: formData.parkingSpaceStatus == '自用' }"
								@click="formData.parkingSpaceStatus = '自用'">
								<view class="radio"></view>
								<text>自用</text>
							</view>
							<view class="parkingSpaceStatus-item"
								:class="{ active: formData.parkingSpaceStatus == '租赁' }"
								@click="formData.parkingSpaceStatus = '租赁'">
								<view class="radio"></view>
								<text>租赁</text>
							</view>
						</view>
					</view>
					<!-- 绑定车辆选择 -->
					<view class="form-item" @click="bindCarClick('绑定车辆')">
						<text class="item-label">绑定车辆</text>
						<text class="item-placeholder"
							:class="{selected:formData.bindCar}">{{ formData.bindCar || '请选择' }}</text>
						<text class="item-arrow"></text>
					</view>
				</view>

			</view>



		</scroll-view>
		<!-- 底部下一步按钮 -->
		<view class="bottom-btn-wrap">
			<button class="next-btn" @click="goSubmit">提交审核</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.bindHouse = '01栋';
				this.formData.parkingLot = '地下停车场';
				this.formData.parkingSpaceNum = 'B1-02';
				this.formData.bindCar = '宝马';
				this.formData.communityId = '1';
				this.formData.bindHouseId = '2';
				this.formData.parkingLotId = '3';
				this.formData.parkingSpaceId = '4';
				this.formData.bindCarId = '自用';
				this.formData.parkingSpaceStatus = '租赁';
			} else if (uni.getStorageSync('operationType') == 'add') {
				this.id = undefined;
				this.type = '添加';
			}

		},

		onUnload() {},
		mounted() {},
		data() {
			return {
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				id: undefined,
				type: '',
				formData: {
					community: uni.getStorageSync('communityName'),
					communityId: uni.getStorageSync('communityId'),
					bindHouse: uni.getStorageSync('bindHouseName'),
					bindHouseId: uni.getStorageSync('bindHouseId'),
					parkingLot: uni.getStorageSync('parkingLotName'),
					parkingLotId: uni.getStorageSync('parkingLotId'),
					parkingSpaceNum: uni.getStorageSync('parkingSpaceName'),
					parkingSpaceId: uni.getStorageSync('parkingSpaceId'),
					parkingSpaceStatus: '自用',
					bindCar: uni.getStorageSync('bindCarName'),
					bindCarId: uni.getStorageSync('bindCarId'),
				},
			}
		},


		methods: {
			// 完整校验
			goSubmit() {
				if (!this.formData.community) return uni.showToast({
					title: '请选择小区',
					icon: 'none'
				})
				if (!this.formData.bindHouse) return uni.showToast({
					title: '请绑定房屋',
					icon: 'none'
				})
				if (!this.formData.parkingLot) return uni.showToast({
					title: '请选择停车场',
					icon: 'none'
				})
				if (!this.formData.parkingSpaceNum) return uni.showToast({
					title: '请选择车位编号',
					icon: 'none'
				})
				if (!this.formData.bindCar) return uni.showToast({
					title: '请选择绑定车辆',
					icon: 'none'
				})
				uni.showModal({
					title: '确认提交',
					content: '提交后进入审核',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...',
								mask: true
							});
							setTimeout(() => {
								uni.showToast({
									title: '提交成功',
									icon: 'success'
								});
							}, 1000);
							setTimeout(() => {
								// 提交成功后跳转列表页
								uni.hideLoading();
								this.goBack();
							}, 3000);
						}
					}
				})
			},

			selectClick(item) {
				this.formData.status = item;
				uni.setStorageSync('houseStatus', item)
				this.showPopup = false;
			},
			bindCarClick() {
				uni.redirectTo({
					url: '/pages/my/bindCar',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 选择项点击事件（可替换为picker/弹窗选择）
			selectItem(type) {

				if (type === '小区') {
					uni.redirectTo({
						url: '/pages/my/selectResidentialCommunity?sourcePage=' + 'addParkingSpace',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				if (type === '绑定房屋') {
					if (!this.formData.community) {
						uni.showToast({
							title: '请先选择上级',
							icon: 'none'
						})

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

				}
				if (type === '停车场') {
					if (!this.formData.community) {
						uni.showToast({
							title: '请先选择上级',
							icon: 'none'
						})

					} else {
						uni.setStorageSync('checkType', '停车场')
						uni.redirectTo({
							url: '/pages/my/selectParingLot',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}

				}
				if (type === '车位编号') {
					if (!this.formData.community) {
						uni.showToast({
							title: '请先选择上级',
							icon: 'none'
						})

					} else {
						uni.setStorageSync('checkType', '车位编号')
						uni.redirectTo({
							url: '/pages/my/selectParingLot',
							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('bindHouseId');
				uni.removeStorageSync('bindHouseName');
				uni.removeStorageSync('checkType');
				uni.removeStorageSync('parkingLotId');
				uni.removeStorageSync('parkingLotName');
				uni.removeStorageSync('parkingSpaceId');
				uni.removeStorageSync('parkingSpaceName');
				uni.removeStorageSync('bindCarId');
				uni.removeStorageSync('bindCarName');

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

		},


	}
</script>
<style lang="scss">
	page {
		background: #f9f9f9;
	}
</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: #f9f9f9;
	}

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


	/* 步骤条 */
	.step-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 30rpx 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;
	}

	/* 表单容器 */
	.form-container {}

	/* 表单项 */
	.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 {
		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;

	}

	/* 开关项 */
	.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>
	/* 表单项 —— 和你页面保持一致 */
	.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;
	}
</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;
	}

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

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

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

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

	.parkingSpaceStatus-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: #f5f7fa; */
		color: #1677ff;
		font-size: 26rpx;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
	}

	/* 上传区域 */
	.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: #eff0ff;
		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;
	}

	/* 成功提示弹窗 */
	.toast-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		z-index: 9999;
	}

	.toast-content {
		background-color: rgba(0, 0, 0, 0.8);
		padding: 40rpx 60rpx;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.toast-icon {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 50%;
		background-color: #fff;
		color: #1677ff;
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.toast-text {
		color: #fff;
		font-size: 28rpx;
	}

	.status-bar {
		width: 100vw;
		height: 46px;
	}
</style>