<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" :class="{ 'form-item-disabled': type === '修改' }" @click="selectItem('选择小区')">
					<text class="item-label">选择小区</text>
					<text class="item-placeholder"
						:class="{selected: formData.community}">{{ formData.community || '请选择' }}</text>
					<text class="item-arrow" v-if="type !== '修改'"></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" :class="{ 'form-item-disabled': type === '修改' }" @click="selectItem('停车场')">
					<text class="item-label">停车场</text>
					<text class="item-placeholder"
						:class="{selected: formData.parkingLot}">{{ formData.parkingLot || '请选择' }}</text>
					<text class="item-arrow" v-if="type !== '修改'"></text>
				</view>

				<view class="form-item" :class="{ 'form-item-disabled': type === '修改' }" @click="selectItem('车位编号')">
					<text class="item-label">车位编号</text>
					<text class="item-placeholder"
						:class="{selected: formData.parkingSpaceNum}">{{ formData.parkingSpaceNum || '请选择' }}</text>
					<text class="item-arrow" v-if="type !== '修改'"></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" :class="{ 'form-item-disabled': checkStatus === '1' }" @click="selectItem('选择业主')">
					<text class="item-label">选择业主</text>
					<text class="item-placeholder"
						:class="{selected: formData.owner}">{{ formData.owner || '请选择' }}</text>
					<text class="item-arrow" v-if="checkStatus !== '1'"></text>
				</view>


				<view class="form-item" @click="bindCarClick" v-if="formData.certificationStatus === '1'">
					<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 goBack = () => {
		uni.navigateBack()
	}

	const id = ref(undefined)
	const type = ref('')
	const checkStatus = 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'),
		owner: uni.getStorageSync('ownerName'),
		ownerId: uni.getStorageSync('ownerId'),
		certificationStatus:''
	})

	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')
		formData.value.owner = uni.getStorageSync('ownerName')
		formData.value.ownerId = uni.getStorageSync('ownerId')
	})
	onLoad((option) => {
		checkStatus.value = option.checkStatus || ''
		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 = '添加'
			// 添加模式下清空上次残留的缓存，保证每次进入都是干净的
			uni.removeStorageSync('communityName')
			uni.removeStorageSync('communityId')
			uni.removeStorageSync('parkingLotName')
			uni.removeStorageSync('parkingLotId')
			uni.removeStorageSync('parkingSpaceName')
			uni.removeStorageSync('parkingSpaceId')
			uni.removeStorageSync('parkingStatus')
			uni.removeStorageSync('bindCarName')
			uni.removeStorageSync('bindCarId')
			uni.removeStorageSync('ownerName')
			uni.removeStorageSync('ownerId')
		}

	})
	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')
						residentId: formData.value.ownerId
					}).then(res => {
						uni.hideLoading()
						console.log(res);
						if (res.code === 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success'
							})
							setTimeout(() => {
									uni.removeStorageSync("communityId")
									uni.removeStorageSync("communityName")
									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.removeStorageSync("ownerId")
									uni.removeStorageSync("ownerName")
									uni.navigateBack({ delta: type.value === '修改' ? 2 : 1 })
							}, 1500)
						} else {
							uni.showToast({
								title: res.msg || '提交失败',
								icon: 'none'
							})
						}
					}).catch(err => {
						uni.hideLoading()
						uni.showToast({
							title: err.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)

			formData.value.owner = data.residentName
			uni.setStorageSync('ownerName', data.residentName)
			formData.value.ownerId = data.residentId
			uni.setStorageSync('ownerId', data.residentId)
			formData.value.certificationStatus = data.certificationStatus 

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

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

	const selectItem = (typeStr) => {
		// 修改模式下，小区、停车场、车位编号禁止修改
		if (type.value === '修改' && (typeStr === '选择小区' || typeStr === '停车场' || typeStr === '车位编号')) {
			return
		}
		if (typeStr === '选择小区') {
			uni.navigateTo({
				url: '/pageSubPack/my/selectResidentialCommunity?sourcePage=addParkingSpace'
			})
		}
		// if (typeStr === '绑定房屋') {
		// 	if (!formData.value.community) {
		// 		return uni.showToast({ title: '请先选择上级', icon: 'none' })
		// 	}
		// 	uni.navigateTo({ url: '/pageSubPack/my/bindHouse' })
		// }
		if (typeStr === '停车场') {
			if (!formData.value.community) {
				return uni.showToast({
					title: '请先选择上级',
					icon: 'none'
				})
			}
			uni.setStorageSync('checkType', '停车场')
			uni.navigateTo({
				url: '/pageSubPack/my/selectParingLot'
			})
		}
		if (typeStr === '车位编号') {
			if (!formData.value.community || !formData.value.parkingLot) {
				return uni.showToast({
					title: '请先选择上级',
					icon: 'none'
				})
			}
			uni.setStorageSync('checkType', '车位编号')
			uni.navigateTo({
				url: '/pageSubPack/my/selectParingLot'
			})
		}
		if (typeStr === '选择业主') {
			// 审核通过后选择业主不可编辑
			if (checkStatus.value === '1') return
			if (!formData.value.community) {
				return uni.showToast({
					title: '请先选择小区',
					icon: 'none'
				})
			}
			uni.navigateTo({
				url: '/pageSubPack/my/selectOwner?ownerId=' + (formData.value.ownerId || '')
			})
		}
	}

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

	.form-item-disabled {
		opacity: 0.5;
		pointer-events: none;
	}

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