<template>
	<view class="subpage">
		<view class="top">
			<view class="left" >
				<view  v-for="item in devices" :class="{on:deviceId==item.encoding}" @click="setdeviceid(item.encoding)">设备{{item.encoding}}</view>
			</view>
			<view class="r">
				{{infodata.queryTime}}
				<view>区间测速实时监测中</view>
			</view>
		</view>
		<view class="center">
			<view class="item">
				<view class="num">{{infodata.todayCount}}</view>
				<view class="title">当天过车数量</view>
			</view>
			<view class="item">
				<view class="num">{{infodata.lastMonitoringTime}}</view>
				<view class="title">距离最后一次监测，已过去：</view>
			</view>
		</view>
		<scroll-view :scroll-y="true"  @scrolltolower='bottomingOut'>
			<view class="li" v-for="item in list">
				<view class="l">
					车牌号码
					<view class="color1" :class="`numcolor${item.vehicleNumberColor}`">
						{{item.vehicleNumber}}
					</view>
				</view>
				<view class="r">{{item.queryTime}}</view>
			</view>
			<nynull txt='暂无过车数据' v-if="!list.length"></nynull>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		getequipment,
		getpassingTheCar
	} from "/appapi/index.js"
	const deviceId = ref("")
	const devices=ref([]);
	const infodata=ref({})
	const list=ref([])
	
	// 分页相关
	const pageSize=ref(40);
	const pageNum=ref(1);
	const hasNextPage=ref(true)
	
	function load() {
		console.log('过车信息load')
	}

	function hide() {
		console.log('过车信息hide')
	}

	function show() {
			getequipmentinfo()
			

		console.log('过车信息show')
	}
	// 设置设备ID
	function setdeviceid(id){
		deviceId.value=id;
		reset()
		getinfo()
	}
	// 获取设备信息
	function getequipmentinfo(){
		reset()
		getequipment().then(r=>{
			devices.value=r.data.allDevices;
			deviceId.value=devices.value[0].encoding
			getinfo()
		})
	}
	// 获取过车信息
	function getinfo() {
		getpassingTheCar({deviceId:deviceId.value,pageNum:pageNum.value,pageSize:pageSize.value}).then(r=>{
			infodata.value=r.data;
			list.value=list.value.concat(r.data.vehicleList)
			hasNextPage.value=r.data.hasNextPage
		})
	}
	// 触底
	function bottomingOut(){
		if(hasNextPage.value){
			pageNum.value=pageNum.value+1;
			getinfo()
		}
	}
	// 重置
	function reset(){
		hasNextPage.value=true;
		pageNum.value=1;
		list.value=[];
	}
	defineExpose({
		load,
		hide,
		show
	})
</script>

<style scoped lang="scss">
	.subpage {
		padding: 15rpx;

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

			.left {
				border-radius: 3rpx;
				background: #fff;
				display: flex;
				align-items: center;
				overflow: hidden;

				view {
					width: 90rpx;
					text-align: center;
					line-height: 33rpx;
					color: #4D7BFF;
					font-size: 11rpx;

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

					}
				}
			}

			.r {
				display: flex;
				align-items: center;
				font-weight: 800;
				font-size: 11rpx;

				view {
					font-size: 11rpx;
					color: #06765A;
					background: linear-gradient(173deg, #FFFFFF 0%, #C6FDDE 100%);
					border-radius: 50rpx;
					padding: 3rpx 10rpx;
					margin-left: 15rpx;
				}
			}
		}

		.center {
			display: flex;
			gap: 15rpx;
			justify-content: space-between;

			.item {
				border-radius: 3rpx;
				text-align: center;
				margin: 15rpx 0;
				flex: 1;
				padding: 18rpx 0;

				.num {
					font-size: 22rpx;
					color: #4D7BFF;
					font-weight: 800;
				}

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

				&:nth-of-type(1) {
					background: linear-gradient(177deg, #D6E4FA 0%, #FFFFFF 100%);
				}

				&:nth-of-type(2) {
					background: linear-gradient(178deg, #D6FAE4 0%, #FFFFFF 100%);
				}
			}
		}

		scroll-view {
			box-sizing: border-box;
			height: calc(100vh - 175rpx);

			.li {
				display: flex;
				padding: 15rpx;
				background: #fff;
				justify-content: space-between;
				align-items: center;
				border-radius: 3rpx;
				margin-bottom: 15rpx;

				.l {
					display: flex;
					align-items: center;
					color: #000;
					font-size: 11rpx;

					view {
						
						text-align: center;
						padding: 3rpx 10rpx;
						border-radius: 3rpx;
						margin-left: 15rpx;
						
						font-weight: 800;
						font-size: 11rpx;
					}
				}

				.r {
					font-size: 11rpx;
				}
			}
		}
	}
</style>