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

			<!-- 我的车辆列表 -->

			<view class="car-item" v-for="(item, index) in carList" :key="index" @click="handleItemClick(item,index)">
				<!-- 左侧圆形占位 -->
				<image :src="item.imgSrc" mode="aspectFill" class="car-avatar" @error="item.imgSrc = defaultCarImg" />
				<!-- 中间车辆信息 -->
				<view class="car-info">
					<view>
						<view class="car-plate">{{ item.plate }}</view>
						<view class="car-model">{{ item.model }}·{{ item.color }}</view>
					</view>
					<view class="car-bindParkingSpace">{{ item.bindParkingSpace }}
					</view>
				</view>

				<!-- 右侧状态标签 -->
				<view class="status-tag"
					:class="{ underReview: item.status === '审核中', unbound: item.status === '未绑定',bounded: item.status === '已绑定' }">
					{{ item.status }}
				</view>
			</view>


		</scroll-view>
		<!-- 底部添加车辆按钮 -->
		<view class="bottom-btn">
			<button class="confirm-btn" @click="addCar">添加车辆</button>
		</view>


	</view>




</template>

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

		},

		computed: {


		},
		created() {

		},
		onShow() {

		},
		onUnload() {

		},
		mounted() {},
		data() {
			return {
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				defaultCarImg: "/static/propertyImgs/defaultCarImg.png",
				searchKey: "",
				selectedId: '',
				selectedName: '',
				selectedIndex: -1, // 当前选中的索引

				// 模拟车辆数据
				carList: [{
						id: '1',
						imgSrc: '/static/propertyImgs/carImg.png',
						plate: "京A88888",
						model: "宝马X5",
						color: "白色",
						status: "未绑定",
						bindParkingSpace: "",
					},
					{
						id: '2',
						imgSrc: 'https://错误地址2.png',
						plate: "京A88888",
						model: "宝马X5",
						color: "白色",
						status: "已绑定",
						bindParkingSpace: "北境碧桂园小区小区地下停车场B2A区202",
					},
					{
						id: '3',
						imgSrc: 'https://错误地址3.png',
						plate: "京A88888",
						model: "宝马X5",
						color: "白色",
						status: "审核中",
						bindParkingSpace: "",
					}
				]


			}
		},
		methods: {
			// 选择我的车辆
			handleItemClick(item, index) {
				uni.setStorageSync('operationType', 'update');
				uni.redirectTo({
					url: '/pages/my/carDetail?id=' + item.id + '&status=' + item.status,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});

			},

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


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

		},


	}
</script>
<style lang="scss">
	page {
		background: #F3F8FD;
		overflow: hidden;
		// height: 100vh;
	}
</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;
	}


	/* 表单容器 */
	.form-container {
		padding: 60rpx 30rpx;
	}



	/* 通用输入框样式 */
	.input-item {
		font-size: 30rpx;
		color: #333;
	}

	.input-placeholder {
		color: #999;
		font-size: 30rpx;
	}

	/* 确定按钮 */
	.submit-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #1677ff;
		color: #fff;
		font-size: 14px;
		border-radius: 8rpx;
		border: none;
		margin-top: 20rpx;
	}

	/* 成功提示弹窗 */
	.toast-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		z-index: 9999;
	}

	.toast-content {
		background-color: rgba(0, 0, 0, 0.8);
		padding: 40rpx 60rpx;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.toast-icon {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 50%;
		background-color: #fff;
		color: #1677ff;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.toast-text {
		color: #fff;
		font-size: 28rpx;
	}
</style>
<style scoped>
	/* 页面整体 */

	/* ====================== 列表容器 ====================== */


	/* ====================== 我的车辆卡片 ====================== */
	/* 单个车辆项 */
	.car-item {
		display: flex;
		align-items: center;
		padding: 10px;
		margin-bottom: 20rpx;
		border: 1rpx solid #e6e9ff;
		border-radius: 16rpx;
		background-color: #fff;
		position: relative;
		width: calc(100% - 22px);
	}

	.car-item.checked {
		background: #f4f7ff;
		/* 浅蓝色背景 */
		border-color: #1677ff;
	}

	/* 左侧圆形头像占位 */
	.car-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #f0f4ff;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	/* 中间信息区域 */
	.car-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* 车牌号 */
	.car-plate {
		font-size: 16px;
		font-weight: bold;
		color: #000;
		line-height: 1.4;
		margin-bottom: 8rpx;
	}

	/* 车型+颜色 */
	.car-model {
		font-size: 14px;
		color: #666;
		line-height: 1.4;
	}

	.car-bindParkingSpace {
		font-size: 14px;
		color: #666;
		white-space: nowrap;
		/* 强制不换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 超出显示省略号 */
		width: 90%;
	}

	/* 状态标签 */
	.status-tag {
		font-size: 12px;
		padding: 3px 7px;
		border-radius: 3px;
		font-weight: 500;
		flex-shrink: 0;
		position: absolute;
		right: 15px;
		top: 15px;
	}

	/* 未绑定状态 */
	.status-tag.unbound {
		/* background-color: #e6f7e6; */
		color: #999;
	}

	/* 已绑定状态） */
	.status-tag.bounded {
		color: #2F77FD;
	}

	/* 审核中 */
	.status-tag.underReview {
		/* background-color: #F8DDBD; */
		color: #FF8F40;
	}


	/* ====================== 底部按钮 ====================== */


	.confirm-btn {
		width: 100%;
		height: 88rpx;
		background-color: #1677ff;
		color: #fff;
		border-radius: 12rpx;
		font-size: 34rpx;
		border: none;
		line-height: 88rpx;
	}

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