<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<view class="vehicle">
		<view class="tops"></view>
		<view class="maxBox" v-if="carList.length>0">
			<view class="vehicle-title">
				已绑定2辆<text class="t">最多绑定3辆</text>
			</view>
		<view class="bigs"  v-for="(item,index) in carList" :key="item.id">
			<view class="box" :class="{bgmActive:item.xin===0,bgmActives:item.xin===1}">
				<img class="cheDemo" src="https://www.jiubaotongxue.love/image/demo13.png" alt="" />
				<view class="boxDemo">
					<view class="box-top">
						<text>微信昵称</text><text class="color-b">{{item.plateNumber}}</text>
					</view>
					<view class="box-center">
						<text>{{item.phoneNumber}}</text><img class="delete"
							src="https://www.jiubaotongxue.love/image/demo15.png" alt="" @click="deletes(index)" />
					</view>
				</view>
			</view>
		</view>
		
		</view>
		<view class="maxBox1" v-if="carList.length<=0">
			<img class="maxBox1-i" src="https://www.jiubaotongxue.love/image/demo18.png" alt="" />
			<view class="maxBox1-title">

				<view class="title-center">
					亲，您当前还没有绑定车辆呢，请您添加车辆信息哦~
				</view>
				<view class="tops" @click="addValidate">
					<text class="add">+</text> <text class="adds">点击绑定爱车</text>
				</view>
			</view>
		</view>
		<view class="btns" @click="addValidate" v-if="carList.length>0">
			<text class="add">+</text> <text class="adds">添加车辆</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		addChepai
	} from '../../stor/addChepai/addChepai.js'
	import {
		storeToRefs
	} from 'pinia';

	const ac = addChepai()
	ac.getCarlists()
	const {
		carList
	} = storeToRefs(ac)
	const titles = ref('我的车辆')
	const bgcolor = ref('#fff')
	const color = ref('#000')
	const isShow = ref(0)
	const addValidate = () => {
		uni.navigateTo({
			url: "/pages/addValidate/addValidate"
		})
	}
	
	const deletes = (index)=>{
		ac.getDelete(carList.value[index].id)
	}
</script>

<style lang="scss">
	.vehicle {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: white;

		.tops {
			width: 100%;
			height: 11%;
		}

		.maxBox {
			width: 100%;

			.vehicle-title {
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-top: 20rpx;
				font-size: 36rpx;

				.t {
					color: #999999;
					font-size: 24rpx;
					padding-left: 15rpx;
				}
			}
			.bigs{
				width: 690rpx;
				height: 160rpx;
				position: relative;
				margin-left: 50%;
				transform: translateX(-50%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-top: 40rpx;
				.box {
					width: 690rpx;
					height: 160rpx;
					display: flex;
					background-color: #fff;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					background-size: 100% 100%;
					align-items: center;
				
					.cheDemo {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin-left: 30rpx;
					}
				
					.boxDemo {
						width: 80%;
						height: 160rpx;
				
						.box-top {
							width: 96%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							box-sizing: border-box;
							font-size: 34rpx;
							padding-left: 26rpx;
							color: white;
							margin-top: 34rpx;
				
							.color-b {
								color: white;
								font-size: 30rpx;
								font-weight: 100;
								opacity: 0.7;
							}
				
							.color-g {
								color: seagreen;
							}
						}
				
						.box-center {
							width: 100%;
							margin-top: 10rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							box-sizing: border-box;
							padding-left: 26rpx;
							padding-right: 40rpx;
							font-size: 26rpx;
							color: white;
				
							.delete {
								width: 32rpx;
								height: 32rpx;
								margin-top: 10rpx;
							}
						}
					}
				}
				
				.bgmActive {
					background-image: url("https://www.jiubaotongxue.love/image/demo16.png");
				}
				
				.bgmActives {
					background-image: url("https://www.jiubaotongxue.love/image/demo17.png");
				}
			}

	
		}

		.maxBox1 {
			width: 100%;

			.maxBox1-i {
				width: 494rpx;
				height: 300rpx;
				margin-top: 60rpx;
				margin-left: 50%;
				transform: translateX(-50%);
			}

			.maxBox1-title {
				width: 100%;

				.tops {
					width: 470rpx;
					height: 100rpx;
					line-height: 100rpx;
					color: white;
					text-align: center;
					background-color: white;
					margin-left: 50%;
					transform: translateX(-50%);
					font-size: 28rpx;
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					border: 1rpx solid #1378F7;
					color: white;
					margin-top: 42rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					background: linear-gradient(to right, #1C9FF7, #1275F7);

					.add {
						font-size: 50rpx;
						display: block;
						margin-top: -5rpx;
						margin-left: 100rpx;
					}

					.adds {
						display: block;
						margin-right: 120rpx;
					}
				}

				.title-center {
					width: 436rpx;
					height: 84rpx;
					font: 26rpx;
					text-align: center;
					margin-top: 64rpx;
					margin-left: 50%;
					transform: translateX(-50%);
					font-size: 28rpx;
					color: #9E9E9E;
				}
			}
		}

		.btns {
			width: 690rpx;
			height: 100rpx;
			line-height: 100rpx;
			position: fixed;
			bottom: 50rpx;
			color: white;
			text-align: center;
			background-color: white;
			left: 50%;
			transform: translateX(-50%);
			font-size: 28rpx;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			border: 1rpx solid #1378F7;
			color: #1378F7;
			display: flex;
			align-items: center;
			justify-content: center;

			.add {
				font-size: 50rpx;
				display: block;
				margin-top: -5rpx;
			}

			.adds {
				display: block;

			}
		}
	}
</style>