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

		<scroll-view class="page" scroll-y>
				<view v-if="dataList.length === 0" class="empty-state">
					<uni-icons type="info" size="60" color="#ccc"></uni-icons>
					<text class="empty-text">暂无数据</text>
				</view>
			<view class="parkingLot-grid">
				<view class="parkingLot-item"
					:class="{ active: (checkType == '停车场' && selectedParkingLot === item.id) || (checkType == '车位编号' && selectedParkingSpace === item.id) }"
					v-for="(item, index) in dataList" :key="index" @click="selectedParking(item)">
					<text class="parkingLot-text">{{ item.name }}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getResidentCarAreaManageAreaListByVillageId,
		getResidentCarAreaManageParkingListByAreaId
	} from '@/pageSubPack/api/apiSub.js'

	const statusBarHeight = ref(20)
	const checkType = ref('')
	const dataList = ref([])
	const selectedParkingLot = ref(uni.getStorageSync('parkingLotId'))
	const selectedParkingSpace = ref(uni.getStorageSync('parkingSpaceId'))

	onMounted(() => {
		checkType.value = uni.getStorageSync('checkType')
		if (checkType.value == '停车场') {
			loadAreaList()
		} else if (checkType.value == '车位编号') {
			loadParkingList()
		}
	})

	const loadAreaList = () => {
		let communityId = uni.getStorageSync('communityId')
		if (!communityId) return
		getResidentCarAreaManageAreaListByVillageId({
			villageId: communityId
		}).then(res => {
			if (res.code === 200) {
				dataList.value = (res.rows || []).map(item => {
					return {
						id: item.id,
						name: item.name || item.areaName || ''
					}
				})
			}else {
				uni.showToast({
					title: `${res.msg}`,
					icon: 'error'
				});
			}
		})
	}

	const loadParkingList = () => {
		let parkingLotId = uni.getStorageSync('parkingLotId')
		if (!parkingLotId) return
		getResidentCarAreaManageParkingListByAreaId({
			areaId: parkingLotId,
			
		}).then(res => {
			if (res.code === 200) {
				dataList.value = (res.rows || []).map(item => {
					console.log(item);
					return {
						id: item.id,
						name: item.name || item.parkingCode || ''
					}
				})
			}else {
				uni.showToast({
					title: `${res.msg}`,
					icon: 'error'
				});
			}
		})
	}

	const selectedParking = (item) => {
		console.log(item);
		if (checkType.value == '停车场') {
			selectedParkingLot.value = item.id
		} else if (checkType.value == '车位编号') {
			selectedParkingSpace.value = item.id
		}

		uni.showModal({
			title: "确认选择",
			content: '确认选择此' + checkType.value + '吗?',
			success: (res) => {
				if (res.confirm) {
					uni.showLoading({
						title: '选择中...',
						mask: true
					})
					setTimeout(() => {
						uni.showToast({
							title: '选择成功',
							icon: 'success'
						})
						console.log(checkType.value);
						
						if (checkType.value == '停车场') {
							uni.setStorageSync('parkingLotId', item.id)
							uni.setStorageSync('parkingLotName', item.name)
							uni.removeStorageSync('parkingSpaceId')
							uni.removeStorageSync('parkingSpaceName')
							uni.setStorageSync('checkType', '车位编号')
						} else if (checkType.value == '车位编号') {
							console.log(item.id);
							uni.setStorageSync('parkingSpaceId', item.id)
							uni.setStorageSync('parkingSpaceName', item.name)
						}
					}, 1000)
					setTimeout(() => {
						uni.hideLoading()
						goFreash()
					}, 2500)
				}
			}
		})
	}

	const goFreash = () => {
		if (checkType.value != '车位编号') {
			uni.redirectTo({
				url: '/pageSubPack/my/selectParingLot'
			})
		} else {
			uni.redirectTo({
				url: '/pageSubPack/my/addParkingSpace'
			})
		}
	}

	const goBackAdd = () => {
		if (checkType.value == '停车场') {
			uni.removeStorageSync('parkingLotId')
			uni.removeStorageSync('parkingLotName')
		} else if (checkType.value == '车位编号') {
			uni.removeStorageSync('parkingSpaceId')
			uni.removeStorageSync('parkingSpaceName')
		}
		uni.redirectTo({
			url: '/pageSubPack/my/addParkingSpace'
		})
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
		overflow: hidden;
		height: 100vh;
	}
</style>

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

	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

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

	.parkingLot-grid {
		display: grid;
		
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		color: #ccc;
	}

	.empty-text {
		font-size: 32rpx;
		color: #999;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}

	.parkingLot-item {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border: 1rpx solid #e5e5e5;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		transition: all 0.2s ease;
	}

	.parkingLot-item.active {
		background-color: #1677ff;
		border-color: #1677ff;
	}

	.parkingLot-item.active .parkingLot-text {
		color: #fff;
	}

	.parkingLot-text {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}
</style>