<template>
	<view>
		<u-navbar autoBack placeholder bgColor="#FFFFFF">
			<view class="navSlot" slot="center">
				<!-- <u-icon name="arrow-left" size="19"></u-icon> -->
				<view class="title">TA的车库</view>
			</view>
		</u-navbar>
		<view class="bgMain">
			<view class="garageList" v-for="(item,index) in dataList" :key="index">
				<view class="garageItem">
					<view class="info">
						<image class="img" :src="item.brandLogo"></image>
						<view style="font-size: 30rpx;color: #333333; padding-left: 10rpx;">{{item.vehicleBrand}}</view>
					</view>

					<view class="plate">
						<view class="economize">{{item.plateNo[0]}}</view>
						<view class="licensePlate">{{item.plateNo.slice(1)}} </view>
					</view>
				</view>
				<view class="vehicleModel">{{item.vehicleModel}}{{item.vehicleConfig}}</view>
				<view class="mileage">
					<view>当前里程</view>
					<view class="number">{{item.vehicleMileage}}</view>
					<view>(km)</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNum: 1,
				total: 0,
				dataList: [],
				id: ''
			}
		},
		onLoad(op) {
			this.id = op.id
		},

		onShow() {
			this.pageNum = 1
			this.getuserGarage()
		},

		onReachBottom() {
			console.log(this.total, this.dataList.length);
			if (this.total > this.dataList.length) {
				this.pageNum = this.pageNum + 1
				this.getuserGarage(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},
		onReachBottom() {
			console.log(this.total, this.dataList.length);
			if (this.total > this.dataList.length) {
				this.pageNum = this.pageNum + 1
				this.getuserGarage(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},

		methods: {
			getuserGarage(flag) {
				this.$http.post('/api/store/clientUser/userGarage', {
					pageNum: this.pageNum,
					pageSize: 10,
					userId: this.id
				}).then(res => {
					if (res.code == 200)
						this.dataList = !flag ? res.data.rows : this.dataList.concat(res.data.rows)
					this.total = res.data.total
				})
			}


		}
	}
</script>

<style lang="scss">
	.garageList {
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;

		.vehicleModel {
			font-size: 24rpx;
			color: #999999;
		}

		.mileage {
			display: flex;
			font-size: 24rpx;
			margin-top: 20rpx;
			color: #999999;

			.number {
				padding-left: 5rpx;
				padding-right: 5rpx;
				font-size: 24rpx;
				color: #20CF55;
			}
		}

		.garageItem {
			display: flex;
			justify-content: space-between;

			.info {
				display: flex;
			}

			.plate {
				display: flex;

			}

			.economize {
				background: #0087EF;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				border: 1rpx solid #0087EF;
				width: 65rpx;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.licensePlate {
				background: #E5EEF5;
				border-radius: 0rpx 8rpx 8rpx 0rpx;
				border: 1rpx solid #0087EF;
				padding: 12rpx 20rpx 12rpx 20rpx;
				color: #0087EF;
			}

			.img {
				width: 55rpx;
				height: 55rpx;
			}
		}
	}
</style>