<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="绑定房屋" left-icon="left" @clickLeft="goBack" :border="false" backgroundColor="transparent">
		</uni-nav-bar>



		<!-- 表单区域 -->
		<scroll-view class="page" scroll-y="true">

			<!-- 搜索框 -->
			<view class="search-box">
				<input class="search-input" v-model="searchKey" placeholder="请输入名称"
					placeholder-class="input-placeholder" @input="onSearch" />
				<uni-icons type="search" size="20" color="#999" />
			</view>

			<!-- 房屋列表 -->
			<scroll-view class="list-container" scroll>
				<view class="house-card" v-for="(item, index) in filteredList" :key="index"
					@click="selectHouse(item,index)" :class="{ checked: selectedIndex === index }">
					<!-- 小区名称 -->
					<view class="community-name">
						<text class="title-line"></text>
						<text class="title-text">{{ item.community }}</text>
					</view>
					<!-- 选中对勾 -->
					<view class="check-icon" :class="{ checked: selectedIndex === index }"></view>
					<!-- 房屋信息 -->
					<view class="info-row">
						<text class="info-label">房间号</text>
						<text class="info-value">{{ item.roomNo }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">业主</text>
						<text class="info-value">{{ item.owner }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">房屋状态</text>
						<text class="info-value status-text" :style="{ color: statusColor[item.status] }">
							{{ item.status }}
						</text>
					</view>


				</view>
			</scroll-view>

		</scroll-view>

		<!-- 底部确定绑定按钮 -->
		<view class="bottom-btn">
			<button class="confirm-btn" @click="confirmBind">确定绑定</button>
		</view>
	</view>




</template>

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

		},
		computed: {
			// 过滤后的列表（搜索功能）
			filteredList() {
				this.selectedIndex = -1
				if (!this.searchKey.trim()) {
					return this.houseList
				}
				return this.houseList.filter(item =>
					item.community.includes(this.searchKey.trim())
				)
			},


		},


		created() {

		},
		onShow() {

		},
		onUnload() {

		},
		mounted() {},
		data() {
			return {
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				searchKey: "",
				selectedId: '',
				selectedName: '',
				selectedIndex: -1, // 当前选中的索引
				// 房屋状态颜色映射
				statusColor: {
					自住: "#409EFF",
					闲置: "#67C23A",
					租赁: "#E6A23C",
					其他: "#909399",
				},
				// 模拟房屋数据
				houseList: [{
						id: 1,
						community: "北境碧桂园小区（别墅）",
						roomNo: "2号楼2层",
						owner: "张三",
						status: "自住",
					},
					{
						id: 1,
						community: "北境碧桂园小区（别墅）",
						roomNo: "2号楼1层",
						owner: "张三",
						status: "闲置",
					},
				],


			}
		},


		methods: {
			// 搜索输入事件
			onSearch() {
				// 实时过滤，computed 自动处理
			},

			// 选择房屋
			selectHouse(item, index) {
				this.selectedIndex = index;
				this.selectedId = item.id;
				this.selectedName = item.community + item.roomNo;
			},

			// 确定绑定
			confirmBind() {
				if (this.selectedIndex === -1) {
					return uni.showToast({
						title: "请先选择房屋",
						icon: "none",
					});
				}

				uni.showModal({
					title: "确认选择",
					content: `确定绑定 ${this.selectedName} 吗？`,
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '绑定中...',
								mask: true
							});
							setTimeout(() => {
								uni.showToast({
									title: '绑定成功',
									icon: 'success'
								});
							}, 1000);
							setTimeout(() => {
								// 提交成功后跳转列表页
								uni.hideLoading();
								uni.setStorageSync('bindHouseId', this.selectedId);
								uni.setStorageSync('bindHouseName', this.selectedName);
								uni.setStorageSync('checkType', '停车场');
								uni.removeStorageSync('paringLotId');
								uni.removeStorageSync('paringLotName');
								uni.removeStorageSync('parkingSpaceId');
								uni.removeStorageSync('parkingSpaceName');
								this.goNext();
							}, 3000);


						}
					},
				});



			},


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

		},


	}
</script>
<style lang="scss">
	page {
		background: #f9f9f9;
		overflow: hidden;
		// height: 100vh;
	}
</style>

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

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

	/* 底部按钮 */
	.bottom-btn {
		padding: 10px 15px 20px;
	}



	/* 通用输入框样式 */
	.input-item {
		font-size: 30rpx;
		color: #333;
	}

	.input-placeholder {
		color: #999;
		font-size: 30rpx;
	}

	/* 确定按钮 */
	.submit-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #1677ff;
		color: #fff;
		font-size: 32rpx;
		border-radius: 8rpx;
		border: none;
		margin-top: 20rpx;
	}

	/* 成功提示弹窗 */
	.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;
	}
</style>
<style scoped>
	/* 页面整体 */


	/* ====================== 搜索框样式（1:1还原） ====================== */
	/* 搜索框 */
	.search-box {
		display: flex;
		align-items: center;
		background-color: #F3F3F3;
		border-radius: 10px;
		margin: 0px 0px 10px 0rpx;
		padding: 0 30rpx;
		height: 70rpx;
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 30rpx;
		border: none;
		background: transparent;
	}

	.input-placeholder {
		color: #999;
		font-size: 30rpx;
	}

	.search-icon {
		font-size: 36rpx;
		color: #999;
	}

	/* ====================== 列表容器 ====================== */
	.list-container {}

	/* ====================== 房屋卡片 ====================== */
	.house-card {
		border: 1rpx solid #e5e5e5;
		border-radius: 12rpx;
		padding: 10px;
		margin-bottom: 15px;
		position: relative;
		background-color: #fff;
	}

	.house-card.checked {
		background: #f4f7ff;
		border-color: #1677ff;
	}

	.community-name {
		font-size: 16px;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		align-items: center;
	}

	.title-line {
		width: 8rpx;
		height: 36rpx;
		background-color: #007AFF;
		margin-right: 12rpx;
		border-radius: 4rpx;
	}

	.title-text {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.info-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.info-label {
		width: 160rpx;
		font-size: 14px;
		/* font-weight: 600; */
		color: #000;
	}

	.info-value {
		font-size: 14px;
		color: #333;
		/* font-weight: 600; */
	}

	.status-text {
		font-weight: 500;
	}

	/* ====================== 选中对勾 ====================== */
	.check-icon {
		position: absolute;
		right: 10px;
		top: 23px;
		transform: translateY(-50%);
		width: 26px;
		height: 26px;
		border-radius: 50%;
		border: 2rpx solid #ccc;
		/* background-color: #ccc; */
	}

	.check-icon::after {
		content: "✓";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
	}

	/* 选中状态：蓝色背景 */
	.check-icon.checked {
		background-color: #1677ff;
		border-color: #1677ff;
	}

	.confirm-btn {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #1677ff;
		color: #fff;
		font-size: 36rpx;
		border-radius: 12rpx;
		border: none;
	}

	.title-line {
		width: 8rpx;
		height: 36rpx;
		background-color: #007AFF;
		margin-right: 12rpx;
		border-radius: 4rpx;
	}

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