<template>
	<view class="contentStyle">
		<!-- <view class="status-bar"></view>
		<uni-nav-bar title="我的车位" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
		</uni-nav-bar> -->
		<view class="page">
			<view v-if="parkingSpaceList.length === 0" class="empty-state">
				<uni-icons type="info" size="30" color="#ccc"></uni-icons>
				<text class="empty-text">暂无数据</text>
			</view>
			<view class="parkingSpace-list">
				<view class="parkingSpace-card" v-for="(item, index) in parkingSpaceList" :key="index"
					@click="tapParkingSpace(item)">
					<view class="card-header">
						<view class="title-box">
							<text class="parkingSpace-name">{{ item.villageName }}</text>
						</view>
						<text class="status-tag"
							:class="item.checkStatus=='0'?'pending':item.checkStatus=='1'?'success':item.checkStatus=='2'?'fail':''">{{ item.checkStatus=='0'?'认证中':item.checkStatus=='1'?'认证成功':item.checkStatus=='2'?'认证失败':'' }}</text>
					</view>
					<view class="card-body">
						<view class="left">
							<view class="line">
								<view class="row">
									<text class="label">车位楼层</text>
									<view class="value-box">
										<text class="value">{{ item.areaName }}</text>
									</view>
								</view>
							</view>
							<view class="line">
								<view class="row">
									<text class="label">车位编号</text>
									<text class="value">{{ item.parkingCode }}</text>
								</view>
							</view>
							<view class="line">
								<view class="row">
									<text class="label">车位状态</text>
									<text class="value">{{ getParkingStatus(item.parkingStatus) }}</text>
								</view>
							</view>
							<view class="line">
								<view class="row">
									<text class="label">绑定车辆</text>
									<text class="value">{{ item.carNum }}</text>
								</view>
							</view>
						</view>
						<view class="right">
							<image :src="item.carImageUrl?item.carImageUrl:'https://wuye.ckdzkj.com/images/propertyImgs/myParkingSpace.png'"
								class="imgItem" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-btn">
			<button class="add-btn" @click="addParkingSpace">添加车位</button>
		</view>
	</view>
</template>

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

	const statusBarHeight = ref(20)
	const parkingSpaceList = ref([])

	// ==================== 下拉刷新 ====================
	onPullDownRefresh(() => {
		pageNum.value = 1
		noMoreData.value = false
		parkingSpaceList.value = []
		loadingMore.value = false
		getList()
	})

	// 页面显示时请求第一页（首次进入和从详情/修改页返回时都会刷新）
	onShow(() => {
		pageNum.value = 1
		noMoreData.value = false
		parkingSpaceList.value = []
		loadingMore.value = false
		getList()
	})

	const loadingMore = ref(false)
	const noMoreData = ref(false)

	const pageNum = ref(1)
	const pageSize = ref(10)
	
	// 车位状态映射
	const getParkingStatus =(status) =>{
		const statusMap = {
			'0':'闲置',
			'1':'自用',
			'2':'租赁',
			'3':'借出',
			'4':'其他'
		}
		return statusMap[status]
	}
	// ==================== 获取列表数据 ====================
	const getList = async () => {
		// 防重复请求
		if (loadingMore.value || noMoreData.value) return
		loadingMore.value = true
		try {
			const res = await getCarList({
				pageNum: pageNum.value,
				pageSize: pageSize.value,
				// residentId: uni.getStorageSync('userId')
			})

			const data = res
			const newList = data.rows || []

			// 第一页 → 覆盖数据
			if (pageNum.value === 1) {
				parkingSpaceList.value = newList
			} else {
				// 后续页 → 追加数据
				parkingSpaceList.value = [...parkingSpaceList.value, ...newList]
			}
			// 判断是否没有更多数据
			if (newList.length < pageSize.value) {
				noMoreData.value = true
			} else {
				pageNum.value++
			}
		} catch (err) {
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
			console.error('列表接口报错：', err)
		} finally {
			loadingMore.value = false
			uni.stopPullDownRefresh()
		}
	}

	// ==================== 上拉加载更多 ====================
	onReachBottom(() => {
		getList()
	})

	const tapParkingSpace = (item) => {
		console.log(item);
		uni.navigateTo({
			url: '/pageSubPack/my/parkingSpaceDetail?id=' + item.id + '&statusClass=' + item.checkStatus
		})
	}

	const addParkingSpace = () => {
		uni.setStorageSync('operationType', 'add')
		uni.navigateTo({
			url: '/pageSubPack/my/addParkingSpace'
		})
	}

	const goBack = () => {
		uni.navigateBack({ delta: 1 })
	}
</script>

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

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

	.contentStyle {
		min-height: 100vh;
		background-color: #f5f7fa;
	}

	.page {
		padding: 0px 40rpx 140rpx;
		box-sizing: border-box;
	}

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

	.bottom-btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background: #f5f7fa;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.parkingSpace-card {
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.card-header {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title-box {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.parkingSpace-name {
		font-size: 32rpx;
		font-weight: 600;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.status-tag {
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 30rpx;
		margin-left: 20rpx;
		white-space: nowrap;
	}

	.success {
		background: #2F77FD;
		color: #fff;
	}

	.pending {
		background: #09C2BD;
		color: #fff;
	}

	.fail {
		background: #E34D59;
		color: #fff;
	}

	.card-body {
		padding: 0rpx 30rpx 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.line {
		display: flex;
		margin-bottom: 20rpx;
	}

	.row {
		display: flex;
		width: 100%;
	}

	.label {
		width: 80px;
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		flex-shrink: 0;
	}

	.value-box {
		flex: 1;
		display: flex;
		justify-content: space-between;
		min-width: 0;
	}

	.value {
		font-size: 28rpx;
		color: #666;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.add-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: #007aff;
		color: #fff;
		border-radius: 12rpx;
		font-size: 32rpx;
		border: none;
	}

	.left {
		flex: 1;
		min-width: 0;
		overflow: hidden;
	}

	.right {
		width: 42%;
		height: 180rpx;
		border-radius: 8rpx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.imgItem {
		width: 100%;
		height: 100%;
	}
</style>