<template>
	<view class="container">
		<VNavigationBar titleColor="rgba(0,0,0,0.9)" backgroundColor="#fff" title="我的车辆">
		</VNavigationBar>
		<view class="body">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="carList">
					<view v-for="(item, index) in carList" :key="index" class="carItem" @click="gotoDetail(item)">
						<image class="carImage" src="" mode="aspectFit"></image>
						<view class="carInfo">
							<view class="carNum">{{ item.carNum }}</view>
							<view class="name">车辆持有人：{{ item.name }}</view>
							<view class="phone">持有人电话：{{ item.phone }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="addCarBtn">
			<uni-icons color="#0174F6" type="plusempty"></uni-icons>
			添加车辆
		</view>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'
	export default {
		components: {
			VNavigationBar
		},
		data() {
			return {
				carList: [{
					carNum: '鲁A 781NB',
					name: '魏书豪',
					phone: '15726786903',
					image: ''
				}]
			}
		},
		methods: {
			gotoDetail() {
				uni.navigateTo({
					url: '/pages/myCar/carDetail'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		padding-bottom: env(safe-area-inset-bottom);

		.body {
			flex: 1;
			height: 0;
			background-color: #F3F5F7;
		}

		.carList {
			display: flex;
			flex-direction: column;
		}

		.carItem {
			box-sizing: border-box;
			width: 686rpx;
			margin: 20rpx auto;
			display: flex;
			align-items: center;
			padding: 30rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			column-gap: 20rpx;
		}

		.carImage {
			background-color: #eee;
			width: 240rpx;
			height: 150rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.carNum {
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}

		.name,
		.phone {
			font-weight: 500;
			font-size: 28rpx;
			color: #858BA0;
		}

		.addCarBtn {
			padding: 34rpx 0;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			display: flex;
			align-items: center;
			justify-content: center;
			column-gap: 12rpx;

			font-weight: 500;
			font-size: 32rpx;
			color: #0174F6;
		}
	}
</style>