<template>
	<view class="contentStyle">
		<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 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="parkingStatus-group">
						<view class="parkingStatus-item" :class="{ active: formData.parkingStatus == '0' }"
							@click="changeParkingStatus('0')">
							<view class="radio"></view>
							<text>闲置</text>
						</view>
						<view class="parkingStatus-item" :class="{ active: formData.parkingStatus == '1' }"
							@click="changeParkingStatus('1')">
							<view class="radio"></view>
							<text>自用</text>
						</view>
						<view class="parkingStatus-item" :class="{ active: formData.parkingStatus == '2' }"
							@click="changeParkingStatus('2')">
							<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>
		</scroll-view>
		<view class="bottom-btn-wrap">
			<button class="next-btn" @click="goSubmit">提交审核</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onReachBottom,
		onPullDownRefresh,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		postCarBind,
		getParkingDetail
	} from '@/pageSubPack/api/apiSub.js'

	const statusBarHeight = ref(20)
	const id = ref(undefined)
	const type = ref('')
	const formData = ref({
		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'),
		parkingStatus: uni.getStorageSync('parkingStatus') || '0',
		bindCar: uni.getStorageSync('bindCarName'),
		bindCarId: uni.getStorageSync('bindCarId'),
	})

	onShow(() => {
		console.log(uni.getStorageSync('bindCarName'));
		formData.value.community = uni.getStorageSync('communityName')
		formData.value.communityId = uni.getStorageSync('communityId')
		// formData.value.bindHouse = uni.getStorageSync('bindHouseName')
		// formData.value.bindHouseId = uni.getStorageSync('bindHouseId')
		formData.value.parkingLot = uni.getStorageSync('parkingLotName')
		formData.value.parkingLotId = uni.getStorageSync('parkingLotId')
		formData.value.parkingSpaceNum = uni.getStorageSync('parkingSpaceName')
		formData.value.parkingSpaceId = uni.getStorageSync('parkingSpaceId')
		formData.value.parkingStatus = uni.getStorageSync('parkingStatus') || '0',
			formData.value.bindCar = uni.getStorageSync('bindCarName')
		formData.value.bindCarId = uni.getStorageSync('bindCarId')
	})
	onLoad((option) => {
		if (uni.getStorageSync('operationType') == 'update') {
			if (option.id) {
				id.value = option.id
				uni.setStorageSync('parkingSpaceId', option.id)
				loadParkingSpaceDetail()
			} else {
				id.value = uni.getStorageSync('parkingSpaceId')
			}
			type.value = '修改'
		} else if (uni.getStorageSync('operationType') == 'add') {
			id.value = undefined
			type.value = '添加'
		}

	})
	onMounted(() => {

	})

	const changeParkingStatus = (type) => {
		formData.value.parkingStatus = type
		uni.setStorageSync('parkingStatus', type)
	}
	const goSubmit = () => {
		if (!formData.value.community) return uni.showToast({
			title: '请选择小区',
			icon: 'none'
		})
		// if (!formData.value.bindHouse) return uni.showToast({
		// 	title: '请绑定房屋',
		// 	icon: 'none'
		// })
		if (!formData.value.parkingLot) return uni.showToast({
			title: '请选择停车场',
			icon: 'none'
		})
		if (!formData.value.parkingSpaceNum) return uni.showToast({
			title: '请选择车位编号',
			icon: 'none'
		})
		// if (!formData.value.bindCar) return uni.showToast({
		// 	title: '请选择绑定车辆',
		// 	icon: 'none'
		// })
		console.log(formData);
		uni.showModal({
			title: '确认提交',
			content: '提交后进入审核',
			success: (res) => {
				if (res.confirm) {
					uni.showLoading({
						title: '提交中...',
						mask: true
					})
					postCarBind({
						// villageId: formData.value.communityId,
						// villageName: formData.value.community,
						// houseId: formData.value.bindHouseId,
						parkingId: formData.value.parkingSpaceId,
						parkingStatus: formData.value.parkingStatus,
						carId: formData.value.bindCarId,
						residentId: uni.getStorageSync('userId')
					}).then(res => {
						uni.hideLoading()
						if (res.code === 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success'
							})
							setTimeout(() => {
								goBack()
							}, 1500)
						} else {
							uni.showToast({
								title: res.msg || '提交失败',
								icon: 'none'
							})
						}
					})
				}
			}
		})
	}
	const loadParkingSpaceDetail = async () => {
		// 防重复请求

		try {
			const res = await getParkingDetail({
				id: id.value
			})

			const data = res.data
			// formData.value = data
			formData.value.community = data.villageName
			uni.setStorageSync('communityName', data.villageName)
			formData.value.communityId = data.villageId
			uni.setStorageSync('communityId', data.villageId)
			formData.value.parkingLot = data.areaName
			uni.setStorageSync('parkingLotName', data.areaName)
			formData.value.parkingLotId = data.areaId
			uni.setStorageSync('parkingLotId', data.areaId)
			formData.value.parkingSpaceNum = data.parkingCode
			uni.setStorageSync('parkingSpaceName', data.parkingCode)
			formData.value.parkingSpaceId = data.id
			uni.setStorageSync('parkingSpaceId', data.id)
			formData.value.parkingStatus = data.parkingStatus,
				uni.setStorageSync('parkingStatus', data.parkingStatus)

			
				formData.value.bindCar = data.carNum
				uni.setStorageSync('bindCarName', data.carNum)
			
			
				formData.value.bindCarId = data.carId
				uni.setStorageSync('bindCarId', data.carId)
			


		} catch (err) {
			uni.showToast({
				title: `${err}`,
				icon: 'none'
			})
			console.error('列表接口报错：', err)
		} finally {

		}
	}
	const bindCarClick = () => {
		uni.redirectTo({
			url: '/pageSubPack/my/bindCar'
		})
	}

	const selectItem = (typeStr) => {
		if (typeStr === '选择小区') {
			uni.redirectTo({
				url: '/pageSubPack/my/selectResidentialCommunity?sourcePage=addParkingSpace'
			})
		}
		// if (typeStr === '绑定房屋') {
		// 	if (!formData.value.community) {
		// 		return uni.showToast({ title: '请先选择上级', icon: 'none' })
		// 	}
		// 	uni.redirectTo({ url: '/pageSubPack/my/bindHouse' })
		// }
		if (typeStr === '停车场') {
			if (!formData.value.community) {
				return uni.showToast({
					title: '请先选择上级',
					icon: 'none'
				})
			}
			uni.setStorageSync('checkType', '停车场')
			uni.redirectTo({
				url: '/pageSubPack/my/selectParingLot'
			})
		}
		if (typeStr === '车位编号') {
			if (!formData.value.community || !formData.value.parkingLot) {
				return uni.showToast({
					title: '请先选择上级',
					icon: 'none'
				})
			}
			uni.setStorageSync('checkType', '车位编号')
			uni.redirectTo({
				url: '/pageSubPack/my/selectParingLot'
			})
		}
	}

	const 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('parkingStatus')
		uni.removeStorageSync('parkingSpaceName')
		uni.removeStorageSync('bindCarId')
		uni.removeStorageSync('bindCarName')
		uni.redirectTo({
			url: '/pageSubPack/my/myParkingSpaceIndex'
		})
	}
</script>

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

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

	.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;
	}

	.form-container {
		padding: 0 0px;
	}

	.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;
	}

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

	.parkingStatus-group {
		flex: 1;
		display: flex;
		justify-content: flex-start;
		gap: 40rpx;
	}

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

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

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

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

	.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>