<template>
	<view class="container">
		<view class="sv-y">
			<scroll-view scroll-y>
				<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" @click="goDetail(item)">
						<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" style="width: 300rpx;">{{item.vehicleBrand}}
								{{item.vehicleModel}}</text>
						</view>
						<view class="right u-f u-f-jcfs" style="margin-left: 20rpx;">
							<view v-if="item.carType==1">
								<text class="blue-province fs24">{{item.plateNo[0]}}</text>
								<text class="blue-car-num fs24">{{item.plateNo.slice(1)}}</text>
							</view>
							<view v-else>
								<text class="green-province fs24">{{item.plateNo[0]}}</text>
								<text class="green-car-num fs24">{{item.plateNo.slice(1)}}</text>
							</view>
						</view>
					</view>
					<view class="fs24 light-gray fw400 mg-bot-20" @click="goDetail(item)">{{item.vehicleConfig}}</view>
					<view class="current-distance mg-bot-30 u-f u-f-jcsb" @click="goDetail(item)">
						<view class="light-gray fs24 fw400"><text>当前里程 </text><text
								:class="[item.carType == 2 ? 'energy-green' : 'font-blue']">{{item.vehicleMileage}}
							</text><text>(km)</text></view>
						<view class="light-gray fs24 fw400"><text>启动时间 </text><text
								:class="[item.carType == 2 ? 'energy-green' : 'font-blue']">{{item.startTime}}</text>
						</view>
					</view>
					<view class="default-car u-f u-f-aic" style="width: 100%;justify-content: space-between;">
						<view class="default-wrap u-f u-f-jcfs u-f-aic" @click="setDefault(item)"
							style="align-items: center; display: flex;">
							<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">
							<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="delTitle">删除</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>
			</scroll-view>
		</view>
		<view style="height: 100rpx; margin: 24rpx 30rpx;">
			<view @click="goToAddCar" class="fullscreen-btn">
				<text>+添加爱车</text>
			</view>
		</view>
		<uni-popup :position="'middle'" class="middle-wrap" :show="showPopup" @hidePopup="handleHidePopup">
			<view class="sys-mes-nofity u-f u-f-fdc u-f-jcc">
				<view class="top u-f u-f-aic u-f-jcc">确认删除</view>
				<view class="mg-top-38 deep-gray u-f u-f-jcc u-f-aic">
					<text>确认删除{{itemData.plateNo}}的车辆</text>
				</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: '/pagesA/add-car/add-car'
				})
			},

			handleHidePopup() {
				this.showPopup = false;
			},
			jumpToCarInfo(id) {
				uni.navigateTo({
					url: '/pagesE/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
					})
				})

			},
			goDetail(item) {
				console.log("goDetail", item)
				uni.setStorageSync('detailCar', JSON.stringify(item));
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
<style lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		background-color: #FAFBFF;
		display: flex;
		flex-direction: column;
	}

	.sv-y {
		flex: 1;
		/* 自动占满剩余的空间 */
		overflow-y: auto;
		/* 允许纵向滚动 */
	}

	.my-garage-list {
		padding: 20rpx;
		border-radius: 14rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
		margin-left: 20rpx;

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

		.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-bottom: 50rpx;
		position: relative;
		width: 100%;
		border-radius: 14rpx;
		background-color: #ffffff;

		.top {
			width: 100%;
			background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
			border-radius: 14rpx;
			height: 148rpx;
		}

		.bot {
			margin-top: 72rpx;

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

	// 沾满全屏的按钮
	.fullscreen-btn {
		width: 100%;
		height: 94rpx;
		text-align: center;
		line-height: 94rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 60rpx;
		font-size: 28rpx;
		color: #fff;
	}

	.btnTitle {
		font-size: 28rpx;
		color: #666666;
	}

	.delTitle {
		font-size: 28rpx;
		color: #C80916;
	}

	.middle-wrap :deep(.uni-popup-insert) {
		width: 624rpx !important;
	}
</style>