<template>
	<div class="layer-group">
		<Module
			:loading="loading"
			:error="error"
			:info="bsMeta && bsMeta['utilities']"
		>
			<template #title> 实时养护工单信息 </template>
			<div class="w-full" style="height:260px;">
				<div class="top-box">
					<div
						class="top-box-item"
						v-for="(item, index) in WorkOrder"
						:key="`order_${index}`"
					>
						<span>{{ item.value }}</span>
						<div class="flex items-center">
							<img :src="TOP_ICON" class="w-2.5 h-2.5" />
							<span class="f-title">{{ item.lable }}</span>
						</div>
					</div>
				</div>
				<div class="work-order">
					<div class="work-order-item" v-for="(item, index) in 5" :key="index">
						<div class="work-order-type">日常保洁</div>
						<span class="truncate work-order-content"
							>合安高速上行K68处，日常保洁工作。</span
						>
						<span class="work-order-action flex-shrink-0">单位填报</span>
					</div>
				</div>
			</div>
		</Module>
	</div>
</template>

<script setup>
import TOP_ICON from '@/assets/images/newLayerContrl/curing-s.png'
import { ref } from 'vue'
const WorkOrder = ref([
	{
		lable: '路面修补',
		value: 12,
	},
	{
		lable: '日常养护',
		value: 18,
	},
	{
		lable: '机电养护',
		value: 10,
	},
])
</script>

<style lang="postcss" scoped>
.layer-group {
	width: 100%;
}
.top-box {
	width: 100%;
	@apply flex justify-around items-center mt-2 pb-2;
}
.top-box-item {
	color: #fff;
	background: url('@/assets/images/newLayerContrl/curing.png') no-repeat;
	background-size: 100% 100%;
	width: 80px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.f-title {
	font-size: 10px;
	color: #94a8c6;
	margin-left: 6px;
}
.work-order {
	width: 100%;
}
.work-order-item {
	width: 100%;
	height: 32px;
	background: rgba(17, 51, 103, 0.45);
	padding-left: 16px;
	padding-right: 7.5px;
	border-left: 2px solid rgba(73, 154, 255, 0.5);
	@apply flex items-center justify-between;
	margin-bottom: 6.5px;
}
.work-order-item:hover {
	height: 52px;
	border-left: 2px solid #499aff;
	/* &.work-order-type {
		background: url('@/assets/images/newLayerContrl/banner-active.png')
			no-repeat;
		background-size: 100% 100%;
		border: none;
	} */
}
.work-order-item:hover > .work-order-type {
	padding: 15px 13px;
	border-radius: 26px;
	background: url('@/assets/images/newLayerContrl/banner-active.png') no-repeat;
	background-size: 100% 100%;
	border: none;
}
.work-order-item:hover > .work-order-content {
	font-size: 14px;
}
.work-order-type {
	border: 1px solid #275895;
	border-radius: 26px;
	padding: 2px 13px;
	box-sizing: border-box;
	transform: scale(0.83);
}
.work-order-content {
	width: 180px;
	font-size: 12px;
}
.work-order-action {
	transform: scale(0.83);
	color: #3da5ff;
}
</style>
