<template>
	<view class="VehicleConditionReportIndex">
		<u-navbar title="车况报告" leftIconColor="#000" rightIcon='../../static/common/white_left_arrrow.png' placeholder
			leftIconSize='38rpx' autoBack="true">
		</u-navbar>
		<view class="content">
			<view class="ConTitle">
				您的爱车
			</view>
			<view class="myCar">
				<view class="msgItem" v-for="(item,index) in myCarmsgList">
					<view class="label">
						{{item.label}}
					</view>
					<view class="name">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="ConTitle">
				保养状况
			</view>
			<view class="maintenanceStatus">
				<view class="maintenanceStatusItem" v-for="(item,index) in maintenanceList">
					<view class="label">
						{{item.label}}
					</view>
					<view class="dispense" v-if="index==2">
						{{item.name}}
					</view>
					<view class="name" v-else>
						{{item.name}}
					</view>
				</view>
			</view>

			<view class="ConTitle">
				保养提示
			</view>
			<view class="maintenanceHint">
				{{hint}}
			</view>

			<view class="maintenancerecord">
				保养记录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myCarmsgList: [{
					label: "车辆品牌",
					name: ""
				}, {
					label: "车辆型号",
					name: ""
				}, {
					label: "车辆牌照",
					name: ""
				}, {
					label: "上路时间",
					name: ""
				}, ],
				maintenanceList: [{
					label: "车辆最近保养日期",
					name: ""
				}, {
					label: "建议保养日期",
					name: "2024-05-06"
				}, {
					label: "无需保养",
					name: ""
				}, ],
				hint: "",
			}
		},
		onShow() {
			this.getVehicleConditionReportData()
		},
		methods: {

			getVehicleConditionReportData() {
				this.$http.get('/api/client/maintain/vehicleConditionReport').then((res) => {
					this.myCarmsgList[0].name = res.data.data.vehicleBrand
					this.myCarmsgList[1].name = res.data.data.vehicleModel
					this.myCarmsgList[2].name = res.data.data.plateNo
					this.myCarmsgList[3].name = res.data.data.startTime
					this.maintenanceList[0].name = res.data.data.maintainDate
					this.maintenanceList[1].name = res.data.data.suggestedMainDate
					this.maintenanceList[2].name = res.data.data.maintainStatus
					this.hint = res.data.data.maintainReminder
					console.log(res.data.data);
				})
			},
		}
	}
</script>

<style lang="scss">
	.VehicleConditionReportIndex {
		background-color: #fafbff;
		min-height: 100vh;
		padding-top: 30rpx;
		box-sizing: border-box;

		.content {
			width: 702rpx;
			margin: auto;
			overflow: hidden;

			.ConTitle {
				margin-top: 30rpx;
				margin-bottom: 16rpx;
				padding-left: 12rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				border-left: 6rpx #FF4502 solid;
			}

			.myCar {
				padding: 30rpx 20rpx;
				width: 702rpx;
				height: 305rpx;
				background: #FFFFFF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				box-sizing: border-box;

				.msgItem {
					display: flex;
					margin-bottom: 31rpx;
					align-items: center;

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

			}

			.maintenanceStatus {
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				width: 702rpx;
				height: 245rpx;
				background: #FFFFFF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;

				.maintenanceStatusItem {
					display: flex;
					margin-bottom: 31rpx;
					align-items: center;

					.dispense {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: auto;
						padding: 8rpx 10rpx;
						width: 131rpx;
						height: 41rpx;
						background: #008636;
						border-radius: 5rpx 5rpx 5rpx 5rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFFFFF;
					}

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

			.maintenanceHint {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 20rpx;
				box-sizing: border-box;
				width: 702rpx;
				// height: 96rpx;
				background: #FFFFFF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}


			.maintenancerecord {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: auto;
				margin-top: 110rpx;
				width: 702rpx;
				height: 80rpx;
				background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
				border-radius: 41rpx 41rpx 41rpx 41rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.label {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}

			.name {
				margin-left: auto;
				text-align: end;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

		}
	}
</style>