<template>
	<view class="car-info mg-lr-24">
		<view class="car-type-num u-f u-f-jcsb u-f-aic mg-bot-24" @click="goPage">
			<text class="light-gray fs28 fw400">车辆型号</text>
			<!-- <text class="right-arrow"></text> -->
			<image class="big_gray_right_arrow" src="../../static/common/big_gray_right_arrow.png" mode=""></image>
		</view>

		<view class="light-black fs24 fw400 mg-bot-24">{{ carData.vehicleBrand}} {{ carData.vehicleModel}}
			{{ carData.vehicleConfig}}
		</view>
		<view class="mg-bot-24"><text class="main-color fs28">*</text><text class='fs28 light-gray'>车牌号</text></view>


		<carNumberInput @numberInputResult="numberInputResult" :defaultStr="plateNo?plateNo:''">
		</carNumberInput>
		<view class="u-f u-f-jcsb u-f-aic mg-bot-40">
			<view class="fw400 fs28 light-deep">当前里程</view>
			<view class="distance">
				<input class="uni-input my-input" v-model="vehicleMileage" placeholder="请输入当前里程" />
			</view>
			<view class="fw400 fs28">(km)</view>
		</view>
		<view class="u-f u-f-jcsb u-f-aic">
			<view class="fw400 fs28 light-deep">当前里程</view>
			<uni-datetime-picker v-model="single" type="date" :clear-icon="false" @change="changePicker">
				<view class='u-f u-f-aic'>
					<text class="light-gray fs24 mg-right-10"
						style="margin-left: auto;">{{startTime?startTime:'请选择爱车首次启程时间'}}</text>
					<!-- <text class="right-arrow"></text> -->
					<image class="big_gray_right_arrow" src="../../static/common/big_gray_right_arrow.png" mode="">
					</image>
				</view>
			</uni-datetime-picker>
		</view>
		<view class="main-btn u-f u-f-jcc u-f-aic" @click="jumpToMyGarage">确认绑定</view>
	</view>
</template>

<script>
	import carNumberInput from '../../uni_modules/car-number-input/components/car-number-input/car-number-input'
	export default {
		components: {
			carNumberInput,
		},
		data() {
			return {
				vehicleMileage: '',
				startTime: '',
				plateNo: '',
				carData: '',
				carInfo: '',
				carDatas: '',
				app: getApp()
				// vehicleBrandId:''
			}
		},
		// computed: {
		// 	// activeIdentifyBtn() {
		// 	// 	let allFill = this.input.number1 && this.input.number2 && this.input.number3 && this.input.number4 && this
		// 	// 		.input.number5 && this.input.number6 && this.input.number7
		// 	// 	return allFill
		// 	// }
		// },
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.getCarInfo()
			} else {
				console.log(getApp(), 'app');
				let data = JSON.parse(decodeURIComponent(options.data))
				this.carData = data
				// this.getCarInfo()
				if (this.app.vehicleDetailsId) {
					this.carData.id = this.app.vehicleDetailsId
					this.plateNo = this.app.carDatas.plateNo
					this.startTime = this.app.carDatas.startTime
					this.vehicleMileage = this.app.carDatas.vehicleMileage
				}


				console.log(JSON.parse(decodeURIComponent(options.data)));
			}

		},
		methods: {
			getCarInfo() {
				this.$http.get('/api/client/vehicle/details', {
					id: this.app.vehicleDetailsId ? this.app.vehicleDetailsId : this.id
				}).then(res => {
					console.log(this.app.vehicleDetailsId);
					// if(!this.app.vehicleDetailsId){
					// }
					this.carData = res.data.data
					this.plateNo = res.data.data.plateNo
					this.vehicleMileage = res.data.data.vehicleMileage
					this.startTime = res.data.data.startTime
				})
			},


			numberInputResult(e) {
				console.log(e);
				this.plateNo = e
			},

			changePicker(e) {
				console.log(e);
				this.startTime = e
			},

			jumpToMyGarage() {
				let data = this.carData
				data.plateNo = this.plateNo.trimEnd()
				data.startTime = this.startTime
				data.vehicleMileage = this.vehicleMileage
				// data.vehicleBrandId = this.vehicleBrandId
				
				if(!this.plateNo) {
					uni.showToast({
						title: "请输入车牌号"
					})
					return
				}
				
				let api = ''

				api = (this.id || this.app.vehicleDetailsId) ? '/api/client/vehicle/edit' : '/api/client/vehicle/add'

				this.$http.post(api, data).then(res => {
					console.log(res)
					setTimeout(() => {
						if (res.data.code == 200) {
							uni.navigateTo({
								url: '/pages/my-garage/my-garage'
							})
						}
					}, 800)
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					});
				})

			},

			goPage() {
				const pages = getCurrentPages();
				let flag = false
				if (this.id) {
					this.app.vehicleDetailsId = this.id
					this.app.carDatas = {
						id: this.id,
						plateNo: this.plateNo,
						vehicleMileage: this.vehicleMileage,
						startTime: this.startTime
					}
					getApp().carDatas = this.app.carDatas
				}
				pages.map((item, index) => {
					if (item.$page.fullPath == '/pages/add-car/add-car') {
						uni.navigateBack(pages.length - index)
						flag = true
					}
				})
				if (!flag) {
					uni.redirectTo({
						url: '/pages/add-car/add-car'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.big_gray_right_arrow {
		width: 8rpx;
		height: 16rpx;
	}

	.car-info {
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;

		.car-type-num {
			.right-arrow {
				width: 14rpx;
				height: 14rpx;
				// background: url(../.././static/right-arrow.png) no-repeat center center;
				background-size: 50%;
			}
		}

		.fill-car-box {
			.fc-item {
				width: calc((100% / 9) - 8rpx);
				height: 100rpx;
				background-color: #F8F8F8;
				margin-right: 8rpx;
				border-radius: 8rpx;

				&:last-child {
					margin-right: 0;
				}

				&.new-energy {
					background: #F1FFF3;
					border: 1rpx dashed #00CD22;
				}

				.circle {
					width: 10rpx;
					height: 10rpx;
					background-color: #333333;
					border-radius: 50%;
				}

				view {
					.my-input {
						width: 100%;
						height: 100%;
						background-color: #F8F8F8;
					}
				}
			}
		}
	}

	.right-arrow {
		width: 14rpx;
		height: 14rpx;
		background: url(../.././static/right-arrow.png) no-repeat center center;
		background-size: 50%;
	}

	.distance {
		.my-input {
			width: 260rpx;
			height: 32rpx;
		}
	}

	.main-btn {
		margin-top: 78rpx;
		color: #ffffff;
		height: 82rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
	}

	.my-placeholder {
		font-weight: normal;
		color: #999999;
		font-size: 24rpx;
	}
</style>