<template>
	<view class="my-garage mg-lr-24">
		<view class="my-garage-list" v-for="(item,index) in vehicleList" :key="index">
			<view class="car-brand u-f u-f-jcsb u-f-aic mg-bot-20">
				<view class="left u-f u-f-jcfs u-f-aic">
					<view class="car-brand-image mg-right-8">
						<image style="width: 100%;" :src="item.brandLogo" :mode="'widthFix'"></image>
					</view>
					<text class="fw400 fs30 light-black">{{item.vehicleBrand}} {{item.vehicleModel}}</text>
				</view>
				<view class="right u-f u-f-jcfs" style="margin-left: 20rpx;">
					<text class="province fs24">{{item.plateNo[0]}}</text>
					<text class="car-num fs24">{{item.plateNo.slice(1)}}</text>
				</view>
			</view>
			<view class="fs24 light-gray fw400 mg-bot-20">{{item.vehicleConfig}}</view>
			<view class="current-distance u-f u-f-jcsb mg-bot-30">
				<view class="light-gray fs24 fw400"><text>当前里程 </text><text class="font-blue">{{item.vehicleMileage}}
					</text><text>(km)</text></view>
				<view class="light-gray fs24 fw400"><text>启动时间 </text><text class="font-blue">{{item.startTime}}</text>
				</view>
			</view>
			<view class="default-car u-f u-f-jcsb u-f-aic">
				<view class="default-wrap u-f u-f-jcfs u-f-aic" @click="setDefault(item)" style="align-items: center; display: flex;">
					<!-- <text :class="['default-car mg-right-10', 'active' ]"></text> -->
					<image v-if="item.defaultFlag == 2" class="checkIcon" src="../../static/common/check.png" mode="">
					</image>
					<image v-else class="checkIcon" src="../../static/common/checkActive.png" mode=""></image>
					<text class="btnTitle">默认车辆</text>
				</view>
				<view class="u-f u-f-jcfs u-f-aic">
					<view class="mg-right-48" @click="delItem(item)" style="align-items: center; display: flex;">
						<image class="mg-right-10" style="width: 30rpx;height: 30rpx;"
							src="../.././static/common/delete.png"></image>
						<text class="btnTitle">删除</text>
					</view>
					<view @click="jumpToCarInfo(item.id)" style="align-items: center; display: flex;">
							<image class="mg-right-10" style="width: 30rpx;height: 30rpx;"
							src="../.././static/common/edit.png"></image>
						<text class="btnTitle">编辑</text>
					</view>
				</view>
			</view>
		</view>

		<view class="addCar" @click="goToAddCar">
			+添加爱车
		</view>

		<uni-popup :position="'middle'" :show="showPopup" @hidePopup="handleHidePopup">
			<view class="sys-mes-nofity">
				<view class="top u-f u-f-aic u-f-jcc" >确认删除</view>
				<view class="mg-top-38">确认删除{{itemData.plateNo}}的车辆</view>
				<view class="bot u-f u-f-jcc u-f-aic" @click="handleDelete"><text class="confirm">确认</text></view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import uniPopup from "../../components/uni-popup/uni-popup.vue"
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				showPopup: false,
				selected: 0,
				pageNum: 1,
				pageSize: 10,
				vehicleList: [],
				total: 0,
				itemData:''
			}
		},
		onShow() {
			this.pageNum = 1
			this.getVehicleList()
		},

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

		methods: {

			//设置默认车车辆
			setDefault(data) {
				this.$http.get('/api/client/vehicle/setDefault', {
					id: data.id
				}).then(res => {
					if (res.data.code == 200) {
						this.vehicleList.map(item => {
							if (item.id == data.id) {
								item.defaultFlag = 1
							} else {
								item.defaultFlag = 2
							}
						})
					}
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				})
			},

			//我的车库
			getVehicleList(flag) {
				this.$http.post('/api/client/vehicle/list', {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res => {
					this.vehicleList = !flag ? res.data.data.rows : this.vehicleList.concat(res.data
						.rows)
					console.log(this.vehicleList);
					this.total = res.data.total
				})
			},
			
			delItem(item){
				this.itemData = item
				this.showPopup = true
				
			},

			goToAddCar() {
				uni.navigateTo({
					url: '/pages/add-car/add-car'
				})
			},

			handleHidePopup() {
				this.showPopup = false;
			},
			jumpToCarInfo(id) {
				uni.navigateTo({
					url: '/pages/car-info/car-info?id='+id
				})
			},
			
			//删除爱车
			handleDelete() {
				this.$http.get('/api/client/vehicle/del', {
					id:this.itemData.id
				}).then(res => {
					if(res.data.code == 200){
						this.pageNum = 1
						this.getVehicleList()
						this.handleHidePopup()
					}
					uni.showToast({
						title: res.data.msg
					})
				})
				
			}
		}
	}
</script>
<style>
	page {
		padding-bottom: 200rpx;
	}
</style>
<style lang="scss" scoped>
	.my-garage {
		.my-garage-list {
			padding: 20rpx;
			background-color: #ffffff;
			border-radius: 14rpx;

			.car-brand {
				.left {
					.car-brand-image {
						width: 70rpx;
						height: 56rpx;
					}
				}

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

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

			.default-car {
				.default-wrap {
					.checkIcon {
						width: 30rpx;
						height: 30rpx;
						margin-right: 30rpx;
					}

					.default-car {
						width: 30rpx;
						height: 30rpx;
						border: 1px solid #707070;
						background-color: #ffffff;

						&.active {
							// background: url('../../static/commmon/check.png') no-repeat center center;
							background-size: 100%;
						}
					}
				}
			}
		}
	}

	.sys-mes-nofity {
		padding: 0 90rpx;
		padding-bottom: 50rpx;
		position: relative;
		width: 100%;
		background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
		border-radius: 14rpx;

		.top {
			border-radius: 14rpx;
			height: 148rpx;
		}

		.bot {
			margin-top: 72rpx;

			.confirm {
				padding: 10rpx 60rpx;
				border-radius: 30rpx;
				color: #ffffff;
				background-color: #FF4502;
			}
		}
	}

	.addCar {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 50rpx;
		width: 702rpx;
		height: 82rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		text-align: center;
		line-height: 82rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}
		
	.btnTitle {
		font-size: 28rpx;
		color: #666666;
	}
</style>