<template>
	<view class="student-details">

		<!-- 顶部表头信息 -->
		<view class="page-top" :style='{ justifyContent: "center" }'>

			<!-- 返回上一级页面信息 -->
			<view class='go-back-page' @click='pageBack'>返回</view>

			<!-- 人员/车辆/我的组件显示的表头信息 -->
			<view class="other-title-class">
				车辆管理
			</view>

		</view>

		<!-- 顶部卡片信息 -->
		<view class='top-card-class'>
			<!-- 卡片信息 -->
			<view class='people-info-class'>

				<!-- <view class='info-left'>
					<image
						src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/d130f1d20b4540da9a9b1821fe16a53e_mergeImage.png"
						mode=""></image>
				</view> -->
				<view class="info-left">
					<image :src="carDetail.avatar ? (imgUrl + carDetail.avatar) : defaultAvatar" mode=""
						@tap="previewImage" />
				</view>
				<view class='info-right'>
					<view class='info-right-top'>车牌号：{{ carDetail.carNo }}</view>
					<view class='info-right-bottom'>{{ carDetail.brand }} {{ carDetail.carModel }}</view>
				</view>
			</view>
			<!-- <card-com :buttonTabValue="2" ref='cardCom' :listData="listData"></card-com> -->
		</view>

		<!-- 详情内容信息 -->
		<view class='student-content-class'>

			<view class='content-in-class'>

				<!-- 车辆信息 -->
				<view class='student-info-class card-simple-lass'>

					<!-- 卡片标题信息 -->
					<view class='title-class'>

						<view class='title-left-class'>车辆信息</view>
						<view class='title-right-class' @click="dropDown(1)">
							<view><text v-if="showCar1">点击收起</text><text v-if="!showCar1">点击展开</text></view>
							<image v-if="!showCar1" src="../../indexCom/img/kuang_xiala.png" mode="scaleToFill"></image>
							<image v-if="showCar1" src="../../indexCom/img/shouqi.png" mode="scaleToFill"></image>
						</view>
					</view>

					<!--					<view class='row-line-class'>-->
					<!--						<view class='form-row-title-class'>公司名称</view>-->
					<!--						<view class='form-row-content-class'>一汽大众</view>-->
					<!--					</view>-->
					<!-- 表单内容信息 - 一行多列样式 -->
					<view v-show="showCar1">
						<view class='row-line-class'>
							<view class='form-row-title-class'>车辆使用人</view>
							<view class='form-row-content-class'>{{ carDetail.userName }}</view>
						</view>
						<view class='row-line-class'>
							<view class='form-row-title-class'>使用人电话</view>
							<view class='form-row-content-class'>{{carDetail.userPhone}}</view>
						</view>
						<view class='row-line-class'>
							<view class='form-row-title-class'>车架号</view>
							<view class='form-row-content-class'>{{ carDetail.frameNumber }}</view>
						</view>
						<view class='row-line-class'>
							<view class='form-row-title-class'>发动机号</view>
							<view class='form-row-content-class'>{{ carDetail.engineNumber }}</view>
						</view>
						<view class='row-line-class'>
							<view class='form-row-title-class'>车辆注册日期</view>
							<view class='form-row-content-class'>{{ carDetail.carRegisterDate }}</view>
						</view>

						<view class='row-line-class'>
							<view class='form-row-title-class'>年检到期时间</view>
							<view class='form-row-content-class'>{{ carDetail.inspectionDate }}</view>
						</view>
						<view class='row-line-class'>
							<view class='form-row-title-class'>保险到期时间</view>
							<view class='form-row-content-class'>{{ carDetail.baoxianEntime }}</view>
						</view>
						<view class='row-line-class'>
							<view class='form-row-title-class'>承保险种</view>
							<view class='form-row-content-class'>{{ carDetail.content }}</view>
						</view>
						<view class='row-line-class'>
							<view class='form-row-title-class'>最近保养日期</view>
							<view class='form-row-content-class'>{{ carDetail.upkeepRecentTime }}</view>
						</view>
						<view class='row-line-class'>
							<view class='form-row-title-class'>最近保养公里数</view>
							<view class='form-row-content-class'>{{ carDetail.upkeepRecentMileage }}</view>
						</view>
						<view class='row-line-class'>
							<view class='form-row-title-class'>下次保养日期</view>
							<view class='form-row-content-class'>{{ carDetail.upkeepNextTime }}</view>
						</view>
						<view class='row-line-class'>
							<view class='form-row-title-class'>下次保养公里数</view>
							<view class='form-row-content-class'>{{ carDetail.upkeepNextMileage }}</view>
						</view>
					</view>
				</view>

				<view class='card-simple-lass'>

					<!-- 卡片标题信息 -->
					<view class='title-class'>
						<view class='title-left-class'>车辆附件</view>
						<view @click="goFile" style="color:#55A3FF">查看附件</view>
					</view>
				</view>

				<!-- 上年保费 -->
				<view class='card-simple-lass'>

					<!-- 卡片标题信息 -->
					<view class='title-class'>

						<view class='title-left-class'>上年保费</view>
						<view class='title-right-class' @click="dropDown(2)">
							<view><text v-if="showCar2">点击收起</text><text v-if="!showCar2">点击展开</text></view>
							<image v-if="!showCar2" src="../../indexCom/img/kuang_xiala.png" mode="scaleToFill"></image>
							<image v-if="showCar2" src="../../indexCom/img/shouqi.png" mode="scaleToFill"></image>
						</view>
					</view>
					<view v-show="showCar2">
						<view class='row-line-class'>
							<view class='form-row-title-class'>交强险</view>
							<view class='form-row-content-class'>{{ carDetail.compulsoryIns }} 元</view>
						</view>
						<view class='row-line-class'>
							<view class='form-row-title-class'>商业险</view>
							<view class='form-row-content-class'>{{ carDetail.busiIns }} 元</view>
						</view>
					</view>
				</view>



				<!-- 空占位符 -->
				<view class='null-view-class'></view>
			</view>

		</view>
	</view>
</template>

<script>
	import cardCom from '../../indexCom/cardList/cardCom.vue'
	import request from '@/utils/request';
	import config from '@/config'
	export default {
		components: {
			// 顶部卡片信息
			cardCom
		},
		data() {
			return {
				// 顶部卡片数组信息
				listData: [
					[]
				],
				//车辆信息
				carDetail: {},
				showCar1: true,
				showCar2: false,
				showCar3: false,
				imgUrl: config.imagesUrl,
				defaultAvatar: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a6443b351f174eee968f9019dc0c06c6_mergeImage.png',
			}
		},
		onLoad(data) {
			console.log('接收数据', data)
			this.getDetail(data.id)
		},
		methods: {
			/**
			 * 展开收起更多字段
			 */
			dropDown(index) {
				switch (index) {
					case 1:
						this.showCar1 = !this.showCar1
						break;
					case 2:
						this.showCar2 = !this.showCar2
						break;
					case 3:
						this.showCar3 = !this.showCar3
						break;
				}
			},
			/**
			 * @description 返回上一级页面
			 */
			pageBack() {
				uni.navigateBack({
					delta: 1 // delta值为1时表示返回的页面层数
				});
			},
			previewImage() {
				const avatar = this.carDetail.avatar ?
					this.imgUrl + this.carDetail.avatar :
					this.defaultAvatar;

				uni.previewImage({
					current: avatar,
					urls: [avatar]
				});
			},

			/**
			 * 获取车辆详情
			 */
			getDetail(id) {
				request({
					url: '/admin-api/drivingSchool/system/car/' + id,
					method: 'get',
				}).then((res) => {
					this.carDetail = res.data
					console.log('carDeatlis', this.carDetail)
					let carPhotoArray = []
					let drivingLicenceArray = []
					let otherPhotoArray = []
					this.carDetail.carPhoto.split(",").map((item) => {
						carPhotoArray.push({
							url: config.imagesUrl + item
						})
					})
					this.carDetail.drivingLicence.split(",").map((item) => {
						drivingLicenceArray.push({
							url: config.imagesUrl + item
						})
					})
					this.carDetail.otherPhoto.split(",").map((item) => {
						otherPhotoArray.push({
							url: config.imagesUrl + item
						})
					})
					this.carDetail.carPhotoArray = carPhotoArray
					this.carDetail.drivingLicenceArray = drivingLicenceArray
					this.carDetail.otherPhotoArray = otherPhotoArray
				})
			},
			goFile() {
				if (!this.carDetail.id) {
					uni.showToast({
						title: '请先新增车辆',
						icon: 'none'
					})
					return
				}
				if (!this.carDetail.folderId) {
					console.log('当前员工没有文件加')
					//给当前员工创建一个文件夹
					request({
						url: '/admin-api/system/equInfo/addFolder',
						method: 'post',
						data: JSON.stringify(this.carDetail.id), // 手动转换为 JSON
					}).then(res => {
						this.carDetail.folderId = res.data
						uni.navigateTo({
							url: '/pages/internalManagement/dataManagement/deviceManage?type=staff&folderId=' +
								this.carDetail.folderId
						})
					})
				} else {
					uni.navigateTo({
						url: '/pages/internalManagement/dataManagement/deviceManage?type=staff&folderId=' + this
							.carDetail.folderId
					})
				}

			},
		}
	}
</script>

<style scoped lang="scss">
	.test-in-content {
		width: 94%;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 32rpx;
		background-color: #F5F6F9;

		.image-form-class {
			margin-bottom: 0 !important;
			padding-bottom: 0 !important;

			image {
				margin-bottom: 0 !important;
			}
		}

		.row-line-class {
			margin-bottom: 0 !important;
		}
	}

	.null-view-class {
		width: 1rpx;
		height: 10rpx;
		flex-shrink: 0;
	}

	.people-info-class {
		display: flex;
		align-items: center;
		width: 100%;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #F5F6F9;
		background-color: white;
		padding: 22rpx;

		.info-left {
			flex-shrink: 0;
			width: 108rpx;
			height: 108rpx;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.info-right-top {
		font-weight: 400;
		font-size: 32rpx;
		color: #101A3E;
		text-align: left;
		margin-bottom: 20rpx;
	}

	.info-right-bottom {
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #8D90A6;
	}

	.image-form-class {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #f5f6f9;

		image {
			width: 180rpx;
			height: 180rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.row-line-class {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #F5F6F9;

		.form-row-title-class {
			font-weight: 400;
			font-size: 28rpx;
			color: #8D90A6;
			text-align: left;
		}

		.form-row-content-class {
			font-weight: 400;
			font-size: 28rpx;
			color: #1F1F1F;
		}
	}

	.top-card-class {
		width: 100%;
		height: 166rpx;
	}

	.student-content-class {
		width: 100%;
		padding: 20rpx;
		flex-grow: 1;
		display: flex;
		justify-content: center;
		overflow-y: scroll;

		.content-in-class {
			width: 94%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.card-simple-lass {
			width: 94%;
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			flex-shrink: 0;

			.form-title-class {
				width: 100%;
				margin-bottom: 12rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #8D90A6;
				text-align: left;
			}

			.form-content-class {
				width: 100%;
				font-weight: 400;
				font-size: 28rpx;
				color: #1F1F1F;
				text-align: left;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1rpx solid #F5F6F9;
			}

			.title-class {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 40rpx;

				.title-left-class {
					font-weight: 400;
					font-size: 32rpx;
					color: #101A3E;
				}

				.title-right-class {
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #8D90A6;

					image {
						width: 47rpx;
						height: 47rpx;
						margin-left: 16rpx;
					}
				}
			}
		}

		.student-info-class {}
	}

	.page-top {
		flex-shrink: 0;
		width: 100%;
		height: 160rpx;
		display: flex;
		align-items: center;
		color: white;
		flex-shrink: 0;
		background: linear-gradient(180deg, #054DF3 0%, #55A3FF 100%);

		.go-back-page {
			position: absolute;
			left: 20rpx;
		}
	}

	.student-details {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F1F3F6;
	}
</style>