<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="选择小区" left-icon="left" @clickLeft="goBackAdd" backgroundColor="transparent" :border="false">
		</uni-nav-bar>


		<scroll-view class="page" scroll-y>
			<!-- 搜索框 -->
			<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>
			<!-- 小区列表 -->
			<view class="community-list">
				<view class="community-item" v-for="(item, index) in filteredList" :key="index"
					@click="selectCommunity(item)">
					<text class="community-name">{{ item.name }}</text>
					<text class="item-arrow"></text>
				</view>
			</view>
		</scroll-view>
	</view>



</template>

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

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


		},

		created() {

		},

		onShow() {

		},
		onUnload() {

		},
		onLoad(option) {
			// addHouse
			// addParkingSpace
			this.sourcePage = option.sourcePage;

		},
		mounted() {},
		data() {
			return {

				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				sourcePage: '',
				searchKey: '',
				communityList: [{
						id: 1,
						name: '北境碧桂园小区'
					},
					{
						id: 2,
						name: '东境碧桂园小区'
					},
					{
						id: 3,
						name: '南境碧桂园小区'
					},
					{
						id: 4,
						name: '西境碧桂园小区'
					},




				]


			}
		},


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

			// 选择小区
			selectCommunity(item) {
				uni.setStorageSync('communityId', item.id);
				uni.setStorageSync('communityName', item.name);
				uni.setStorageSync('checkType', '楼栋');
				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('bindHouseId');
				uni.removeStorageSync('bindHouseName');
				uni.removeStorageSync('parkingLotId');
				uni.removeStorageSync('parkingLotName');
				uni.removeStorageSync('parkingSpaceId');
				uni.removeStorageSync('parkingSpaceName');

				if (this.sourcePage == 'addHouse') {
					uni.redirectTo({
						url: '/pages/my/selectBuilding',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else if (this.sourcePage == 'addParkingSpace') {
					uni.redirectTo({
						url: '/pages/my/bindHouse',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else {

				}

			},
			goBackAdd() {
				uni.removeStorageSync('communityId');
				uni.removeStorageSync('communityName');
				if (this.sourcePage == 'addHouse') {
					uni.redirectTo({
						url: '/pages/my/addHouse',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else if (this.sourcePage == 'addParkingSpace') {
					uni.redirectTo({
						url: '/pages/my/addParkingSpace',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else {

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



	/* 搜索框 */
	.search-box {
		display: flex;
		align-items: center;
		background-color: #F3F3F3;
		border-radius: 10px;
		margin: 0rpx 0px 20rpx 0px;
		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;
	}

	/* 小区列表 */
	.community-list {
		/* padding: 0 30rpx; */
	}

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



	.community-name {
		font-size: 32rpx;
		color: #000;
		font-weight: 500;
	}

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

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