<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="我的车位" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
		</uni-nav-bar>
		<scroll-view class="page" scroll-y="true">
			<!-- 车位列表 v-for 渲染 -->
			<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.parkingSpaceName }}</text>
						</view>
						<text class="status-tag" :class="item.statusClass">{{ item.statusText }}</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.floorNo }}</text>
									</view>
								</view>
							</view>
							<view class="line">
								<view class="row">
									<text class="label">车位编号</text>
									<text class="value">{{ item.parkingSpaceNumber }}</text>
								</view>
							</view>
							<view class="line">
								<view class="row">
									<text class="label">车位状态</text>
									<text class="value">{{ item.parkingSpaceStatus }}</text>
								</view>
							</view>
							<view class="line">
								<view class="row">
									<text class="label">绑定车辆</text>
									<text class="value">{{ item.bindCarNum }}</text>
								</view>
							</view>
						</view>
						<view class="right">
							<image src="/static/propertyImgs/myParkingSpace.png" class="imgItem" mode="widthFix">
							</image>

						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部添加按钮 -->
		<view class="bottom-btn">
			<button class="add-btn" @click="addParkingSpace">添加车位</button>
		</view>

	</view>



</template>

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

		},

		computed: {


		},
		created() {

		},
		onShow() {

		},
		onUnload() {
			// 页面卸载时清除定时器
			if (this.timer) clearInterval(this.timer)
		},
		mounted() {},
		data() {
			return {
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				parkingSpaceList: [{
						id: 1,
						parkingSpaceName: "北境碧桂园小区地下停车场",
						floorNo: "B2",
						parkingSpaceNumber: "202",
						parkingSpaceStatus: "租赁",
						bindCarNum: '京A88888',
						statusText: "认证成功",
						statusClass: "success",
					},
					{
						id: 2,
						parkingSpaceName: "北境碧桂园小区停车场",
						floorNo: "B2",
						parkingSpaceNumber: "202",
						parkingSpaceStatus: "自用",
						bindCarNum: '京A88888',
						statusText: "认证中",
						statusClass: "pending",
					},
					{
						id: 3,
						parkingSpaceName: "北境碧桂园小区停车场",
						floorNo: "2号楼1层",
						floorNo: "B2",
						parkingSpaceNumber: "202",
						parkingSpaceStatus: "闲置",
						bindCarNum: '京A88888',
						statusText: "认证失败",
						statusClass: "fail",

					},


				]


			}
		},


		methods: {
			tapParkingSpace(item) {
				uni.redirectTo({
					url: '/pages/my/parkingSpaceDetail?id=' + item.id + '&statusClass=' + item.statusClass,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			addParkingSpace() {
				uni.setStorageSync('operationType', 'add');
				uni.redirectTo({
					url: '/pages/my/addParkingSpace',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});


			},

			goBack() {
				uni.switchTab({
					url: '/pages/myIndex/myIndex',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

		},


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

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		background-color: #f5f7fa;
	}

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

	/* 底部按钮 */
	.bottom-btn {
		padding: 10px 15px 20px;
	}

	/* 列表 */
	.parkingSpace-list {}

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

	/* 头部 */
	.card-header {
		padding: 30rpx;
		/* border-bottom: 1rpx solid #f0f0f0; */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

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

	.parkingSpace-name {
		font-size: 16px;
		font-weight: 600;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

	}



	/* 状态标签 */
	.status-tag {
		font-size: 12px;
		padding: 2px 8px;
		border-radius: 15px;
		margin-left: 10px;
		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: 10px;
	}



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

	}



	.label {
		width: 80px;
		font-size: 14px;
		font-weight: 600;
		color: #333;
	}

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

	.value {

		font-size: 14px;

		color: #666;
	}

	.set-default {
		color: #007aff;
		font-weight: 600;
		font-size: 14px;
	}


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

	.left {}

	.right {
		width: 42%;
	}

	.imgItem {
		width: 100%;
	}

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