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


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

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


		</scroll-view>
		<!-- 底部确定绑定按钮 -->
		<view class="bottom-btn">
			<button class="confirm-btn" @click="confirmBind">确定绑定</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: "已绑定"
					},
					{
						id: '2',
						imgSrc: 'https://错误地址2.png',
						plate: "京A88888",
						model: "宝马X5",
						color: "白色",
						status: "未绑定"
					},
					{
						id: '3',
						imgSrc: 'https://错误地址3.png',
						plate: "京A88888",
						model: "宝马X5",
						color: "白色",
						status: "未绑定"
					}
				]


			}
		},


		methods: {

			// 选择绑定车辆
			handleItemClick(item, index) {
				this.selectedIndex = index;
				this.selectedId = item.id;
				this.selectedName = item.plate;
			},

			// 确定绑定
			confirmBind() {
				if (this.selectedIndex === -1) {
					return uni.showToast({
						title: "请先选择绑定车辆",
						icon: "none",
					});
				}

				uni.showModal({
					title: "确认选择",
					content: `确定绑定该车辆吗？`,
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '绑定中...',
								mask: true
							});
							setTimeout(() => {
								uni.showToast({
									title: '绑定成功',
									icon: 'success'
								});
							}, 1000);
							setTimeout(() => {
								// 提交成功后跳转列表页
								uni.hideLoading();
								uni.setStorageSync('bindCarId', this.selectedId);
								uni.setStorageSync('bindCarName', this.selectedName);
								this.goBack();
							}, 3000);




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

		},


	}
</script>
<style lang="scss">
	page {
		background: #f9f9f9;
		overflow: hidden;
		// height: 100vh;
	}
</style>

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

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

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


	


	/* 通用输入框样式 */
	.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>
	/* 页面整体 */

	/* ====================== 列表容器 ====================== */
	.list-container {
		/* flex: 1; */
		padding: 20px;
		min-height: calc(100vh - 105px);
		overflow-y: scroll;
	}

	/* ====================== 绑定车辆卡片 ====================== */
	/* 单个车辆项 */
	.car-item {
		display: flex;
		align-items: center;
		padding: 10px;
		margin-bottom: 20rpx;
		border: 1rpx solid #e6e9ff;
		border-radius: 16rpx;
		background-color: #fff;
		position: relative;
	}

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

	/* 状态标签 */
	.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: #999999;
	}

	/* 已绑定状态（可扩展，比如蓝色） */
	.status-tag.bound {
		/* background-color: #e6f0ff; */
		color: #1677ff;
	}


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

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