<template>
	<view class="detailstop" @click="tips=false">
		<view class="back" @click="back()">
			<image src="/static/back.png"></image>
			返回
		</view>
		<view class="title">
			超速车辆详情
		</view>
		<view class="rbox">
			<block v-if="type==1">
				<view class="fn" v-if="!yesok" @click="showupimg=true">暂扣</view>
				<view class="fn red " :class="{aft:tips}" v-if="yesok" @click="setwithhold">
					确认暂扣
					<view class="tc" v-if="tips">
						<image src="/static/dp.png"></image> 是否确定暂时扣行该车辆，请点击此按钮。
					</view>
				</view>
			</block>
			<block v-if="type==2">
				<view class="fn fx" v-if="!yesok" @click="showupimg=true">放行</view>
				<view class="fn yfx" :class="{aft:tips}" v-if="yesok" @click="setrelease">
					确认放行
					<view class="tc" v-if="tips">
						<image src="/static/dp.png"></image> 是否确定放行该车辆，请点击此按钮。
					</view>
				</view>
			</block>
		</view>
	</view>
	<view class="detailspage" @click="tips=false">
		<view class="time">
			<view class="l">超速信息</view>
			<view class="r" v-if="info.releaseInfo?.releaseTime">放行时间：{{info.releaseInfo?.releaseTime}}</view>
		</view>
		<view class="form">
			<view class="item">
				<view class="title">
					车牌号码
				</view>
				<view class="txt">
					<view class="number">{{info.basicInfo?.vehicleNumber}}</view>
				</view>
				<view class="title">超速等级</view>
				<view class="txt">
					{{info.overspeedInfo?.overspeedLevelInformation}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					设备{{info.intervalInfo?.startId}}位置
				</view>
				<view class="txt">
					{{info.intervalInfo?.startDeviceJson?.position}}
					<view>{{info.intervalInfo?.startDeviceJson?.longitude}} / {{info.intervalInfo?.startDeviceJson?.latitude}}</view>
				</view>

			</view>
			<view class="item">
				<view class="title">
					设备{{info.intervalInfo?.endId}}位置
				</view>
				<view class="txt">
					{{info.intervalInfo?.endDeviceJson?.position}}
					<view>{{info.intervalInfo?.endDeviceJson?.longitude}} / {{info.intervalInfo?.endDeviceJson?.latitude}}</view>
				</view>
			
			</view>
			<view class="item">
				<view class="title">
					通过设备{{info.intervalInfo?.startId}}时间
				</view>
				<view class="txt">
					{{info.intervalInfo?.startDeviceTime}}
				</view>
				<view class="title">区间距离</view>
				<view class="txt">
					{{info.intervalInfo?.zoneDistanceText}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					通过设备{{info.intervalInfo?.endId}}时间
				</view>
				<view class="txt">
					{{info.intervalInfo?.endDeviceTime}}
				</view>
				<view class="title">区间限速</view>
				<view class="txt">
					{{info.intervalInfo?.speedText}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					最短行驶时长
				</view>
				<view class="txt">
					{{info.intervalInfo?.passingTimeText}}
				</view>
				<view class="title">实际行驶时长</view>
				<view class="txt">
					{{info.overspeedInfo?.exerciseDurationText}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					平均车速
				</view>
				<view class="txt">
					{{info.overspeedInfo?.averageSpeedText}}
				</view>
				<view class="title">待休息时长</view>
				<view class="txt">
					{{info.overspeedInfo?.restDurationText}}
				</view>
			</view>
		</view>
		<view class="imgs">
			<view class="item">
				<view class="title">
					设备{{info.intervalInfo?.startId}} 抓取照片
				</view>
				<view class="img">
					<image @click="openimg(info.imageInfo?.startDeviceImage)" :src="info.imageInfo?.startDeviceImage"></image>
					<view class="time">{{info.intervalInfo?.startDeviceTime}}</view>
				</view>
			</view>
			<view class="item">
				<view class="title">
					设备{{info.intervalInfo?.endId}} 抓取照片
				</view>
				<view class="img">
					<image @click="openimg(info.imageInfo?.endDeviceImage)" :src="info.imageInfo?.endDeviceImage"></image>
					<view class="time">{{info.intervalInfo?.endDeviceTime}}</view>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="title">
				暂扣信息
			</view>
			<view class="tbody">
				<view class="ul">
					<view class="title">暂扣时间</view>
					<view class="txt">{{info.detainInfo?.detainTime || '/'}}</view>
					<view class="title">放行时间</view>
					<view class="txt">{{info.releaseInfo?.releaseTime || '/'}}</view>
				</view>
				<view class="ul">
					<view class="title">暂扣照片</view>
					<view class="txt img">
						<image  @click="openimg(info.imageInfo?.detainStartImage)"  v-if="info.imageInfo?.detainStartImage" :src="info.imageInfo?.detainStartImage"></image>
					</view>
					<view class="title">放行照片</view>
					<view class="txt img">
						<image @click="openimg(info.imageInfo?.releaseImage)" v-if="info.imageInfo?.releaseImage"  :src="info.imageInfo?.releaseImage"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view style="height: 20rpx;"></view>
	<view class="okfication" v-if="showupimg" @click.stop="showupimg=false">
		<view class="box" @click.stop="showupimg=true">
			<view class="close" @click.stop="showupimg=false"> <uni-icons type="closeempty" color="#585757"
					size="20rpx"></uni-icons>
			</view>
			<view class="title">
				<image src="/static/f.png" v-if="type==2" mode=""></image>
				<image src="/static/k.png" v-if="type==1" mode=""></image>
				<view class="txt">
					<view class="typename">{{type==1?"车辆暂扣":'车辆放行'}}</view>
					<view class="time" v-if="type==2">放行时间：{{time}}</view>
				</view>
			</view>
			<view class="upimg" @click="upimg">
				<image :src="imgs" v-if="imgs"></image>
				<view class="icon" v-else>
					<uni-icons color="#4D7BFF" type="plusempty" size="30rpx"></uni-icons>
					<view class="h3">上传照片</view>
					<view class="desc">请上传车辆的行驶证或现场车辆照片</view>
				</view>
			</view>
			<view class="fn">
				<view @click.stop="showupimg=false">取消</view>
				<view @click.stop="yesupimg">确定</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import evn from "/evn.js";
	import {
		ref,
		watch
	} from "vue";
	import {
		getdetails,
		detainVehicle,
		releaseVehicle
	} from "/appapi/index.js"

	const type = ref("");
	const showupimg = ref(false)
	const yesok = ref(false);
	const tips = ref(false)
	const Emits = defineEmits(["opneinfo","refresh"])
	const imgs = ref("")
	const encoding=ref("")
	const info=ref({})

	const time=ref("")
    
	watch(()=>showupimg.value,()=>{
		formatTime()
	})
	function formatTime() {
	  function formatDateTime(date) {
	    let year = date.getFullYear();
	    let month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以要加1，并且需要补零
	    let day = ("0" + date.getDate()).slice(-2); // 日期补零
	    let hours = ("0" + date.getHours()).slice(-2); // 小时补零
	    let minutes = ("0" + date.getMinutes()).slice(-2); // 分钟补零
	    let seconds = ("0" + date.getSeconds()).slice(-2); // 秒补零
	    return `${year}年${month}月${day}日 ${hours}:${minutes}`;
	  }
	  time.value = formatDateTime(new Date());
	}
	function load() {
		console.log('预警信息load')
	}

	function hide() {
		reset()
	}

	function reset() {
		type.value = "";
		showupimg.value = false;
		yesok.value = false;
		tips.value = false;
		imgs.value=""
	}

	function show(id, indextype) {
		reset()
		encoding.value=id;
		if(indextype){
			type.value = indextype;
		}
		getinfo()
	}

	function yesupimg() {
		if(!imgs.value){
			uni.showToast({
				title:"请上传图片",
				icon:"none"
			})
			return
		}
		// 弹窗打开详情通知
		Emits("opneinfo")
		showupimg.value = false;
		yesok.value = true;
		tips.value = true;
		if(type.value==1){
			// 设置暂扣照片
			info.value.imageInfo.detainStartImage=imgs.value
		}
		if(type.value==2){
			//设置放行照片
			info.value.imageInfo.releaseImage=imgs.value
		}
	}

	function back() {
		uni.navigateBack()
	}

	function upimg() {
		uni.chooseImage({
			count: 1,
			success: function(res) {
				uni.uploadFile({
					url: evn.SERVERUL + '/file/upload', //仅为示例，非真实的接口地址
					filePath: res.tempFilePaths[0],
					name: 'file',
					success: (uploadFileRes) => {
						imgs.value=JSON.parse(uploadFileRes.data).url
					}
				});

			}
		});
	}

	function opneshowupimg(id, indextype) {
		reset()
		encoding.value=id;
		type.value = indextype
		showupimg.value = true;
		getinfo()
	}
	
	function getinfo(){
		getdetails({encoding:encoding.value}).then(res=>{
			info.value=res.data;
		})
	}
	// 确认暂扣
	function setwithhold(){
		detainVehicle({encoding:encoding.value,releaseImageUrl:imgs.value}).then(r=>{
			uni.showModal({
				title: '提示',
				content: '已暂扣',
				showCancel:false,
				success: function (res) {
					reset()
					// 刷新列表通知
					Emits("refresh")
					uni.navigateBack()
				}
			});
		})
	}
	// 确认放行
	function setrelease(){
		releaseVehicle({encoding:encoding.value,releaseImageUrl:imgs.value}).then(r=>{
			uni.showModal({
				title: '提示',
				content: '已放行',
				showCancel:false,
				success: function (res) {
					reset()
					// 刷新列表通知
					Emits("refresh")
					uni.navigateBack()
				}
			});
		})
	}
	
	// 图片预览
	function openimg(img){
			uni.previewImage({
						urls: [img],
						
					});
	}
	
	defineExpose({
		load,
		hide,
		show,
		opneshowupimg
	})
</script>
<style scoped lang="scss">
	.okfication {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0px;
		top: 0px;
		background: rgba(0, 0, 0, 0.3);

		.box {
			position: absolute;
			width: 340rpx;
			background: #fff;
			border-radius: 3rpx;
			padding: 15rpx 30rpx;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.close {
				position: absolute;
				top: 15rpx;
				right: 15rpx;
			}

			.title {
				display: flex;
				align-items: center;

				image {
					width: 46rpx;
					height: 46rpx;
					margin-right: 15rpx;
				}

				.typename {
					font-weight: 800;
					font-size: 13rpx;
					color: #333333;
				}

				.time {
					font-size: 11rpx;
					margin-top: 5rpx;
				}
			}

			.upimg {
				border: 1px dashed #4D7BFF;
				border-radius: 5rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 15rpx 0;
				text-align: center;
				height: 140rpx;
				image{
					width: 100%;
					height: 100%;
				}

				.icon {
					.h3 {
						font-weight: 800;
						color: #4D7BFF;
						font-size: 11rpx;
						margin-top: 10rpx;
						margin-bottom: 7rpx;
					}

					.desc {
						font-size: 11rpx;
					}
				}

			}

			.fn {
				display: flex;
				gap: 15rpx;

				view {
					flex: 1;
					text-align: center;
					border-radius: 100rpx;
					line-height: 32rpx;
					font-size: 11rpx;
					font-weight: 800;
					background: #E8EEF5;

					&:nth-of-type(2) {
						background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
						color: #fff;
					}

				}
			}
		}
	}

	.detailstop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx;
		background: #E7E7ED;
		position: sticky;
		top: 0rpx;

		.back {
			display: flex;
			align-items: center;

			image {
				width: 14rpx;
				height: 10rpx;
				margin-right: 7rpx;
			}

			font-weight: 800;
			font-size: 11rpx;
			color: #4D7BFF;
		}

		.title {
			font-weight: 800;
			font-size: 11rpx;
			color: #333333;
		}

		.fn {
			font-weight: 800;
			background: #FE5F13;
			color: #fff;
			padding: 7rpx 30rpx;
			border-radius: 50rpx;
			font-size: 11rpx;
			position: relative;

			.tc {
				position: absolute;
				white-space: nowrap;
				display: flex;
				align-items: center;
				image{
					width: 12rpx;
					height: 15rpx;
					margin-right: 3rpx;
				}
				right: 0px;
				font-size: 11rpx;
				color: #fff;
				background: rgba(0, 0, 0, 0.7);
				border-radius: 5rpx;
				padding: 10rpx 10rpx;
				top: 100%;
				margin-top: 14rpx;
				box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.22);

			}

			&.aft {
				&::after {
					content: "";
					position: absolute;
					left: 50%;
					transform: translate(-50%, 0);
					top: 100%;
					width: 0rpx;
					height: 0rpx;
					margin-top: 5rpx;
					border-bottom: 10rpx solid rgba(0, 0, 0, 0.7);
					border-top: 0rpx solid transparent;
					border-left: 8rpx solid transparent;
					border-right: 8rpx solid transparent;

				}
			}

			&.red {
				background: #D10B0B;
			}

			&.fx {
				background: #08A05F;
			}

			&.yfx {
				background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
			}
		}
	}

	.detailspage {
		background: #fff;
		border-radius: 8rpx;
		margin: 1rpx 15rpx;
		padding: 15rpx;

		.time {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.l {
				font-weight: 800;
				font-size: 11rpx;
				color: #333333;
			}

			.r {
				font-weight: 800;
				font-size: 11rpx;
				color: #4D7BFF;
			}
		}

		.form {
			margin: 15rpx 0;
			border-radius: 3rpx;
			overflow: hidden;
			border: 1px solid #979797;

			.item {
				display: flex;
				// align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #979797;

				&>view {
					&:nth-last-of-type(1) {
						border: none;
					}

					border-right: 1px solid #979797;
				}

				&:nth-last-of-type(1) {
					border: none;
				}

				.title {
					background: #F3F5F8;
					font-size: 9rpx;
					padding: 7rpx;
					width: 100rpx;
					text-align: right;
					display: flex;
					align-items: center;
					justify-content:flex-end ;
					
				}

				.txt {
					flex: 1;
					font-size: 9rpx;
					text-align: left;
					padding: 7rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						font-size: 9rpx;
					}
				}

			}

		}

		.imgs {
			display: flex;
			gap: 15rpx;

			.item {
				flex: 1;

				.title {
					margin: 7rpx 0;
					font-size: 11rpx;
					font-weight: 800;
				}

				.img {
					width: 100%;
					height: 135rpx;
					position: relative;
					border-radius: 6rpx;
					overflow: hidden;

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

					.time {
						position: absolute;
						padding: 10rpx;
						color: #fff;
						font-size: 11rpx;
						bottom: 0rpx;
						left: 0rpx;
					}
				}
			}
		}

		.info {
			&>.title {
				margin: 7rpx 0;
				font-size: 11rpx;
				font-weight: 800;
			}

			.tbody {
				border: 1px solid #979797;
				border-radius: 3rpx;
				overflow: hidden;

				.ul {
					display: flex;
					flex-wrap: wrap;

					&:nth-last-of-type(1) {
						border: none;
					}

					border-bottom: 1px solid #979797;

					.title {
						font-size: 9rpx;
						width: 55rpx;
						text-align: center;
						background: #F3F5F8;
						padding: 7rpx;
						border-left: 1px solid #979797;
						border-right: 1px solid #979797;

						&:nth-of-type(1) {
							border-left: none;
						}
					}

					.txt {
						font-size: 9rpx;
						padding: 7rpx;
						width: calc((100% - 110rpx) / 2);

						image {
							width: 100%;
							height: 94rpx;
							margin: 0rpx;
							border-radius: 5rpx;
						}
					}
				}
			}
		}
	}
</style>