<template>
	<div class="layer-group">
		<Module
			:loading="loading"
			:error="error"
			:info="bsMeta && bsMeta['utilities']"
		>
			<template #title> 实时机电工单信息 </template>
			<div class="w-full pb-2 pt-2">
				<div
					class="electro-list"
					v-for="(item, index) in WorkOrder"
					:key="`electro_${index}`"
				>
					<div class="electro-top">
						<div class="electro-title">
							<span class="num">{{ `0${index + 1}` }}</span>
							<span class="electro-title-content">{{ item.lable }}</span>
						</div>
						<span class="right-action" :class="item.value===1? '': 'blue'">
							{{ item.value === 1 ? '审批中' : '跟单中' }}
						</span>
					</div>
					<div class="electro-content">
						<div class="electro-content_default">
							{{item.content}}
						</div>
						<div class="electro-content_info">
							<span class="time">2022-03-04 10:26:04</span>
							<span class="time name">刘涛</span>
						</div>
					</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: 1,
		content: '遂渝高速梅江收费站ETC亭内交换机需要维修',
	},
	{
		lable: '机电故障',
		value: 2,
		content: '交换机',
	},
	{
		lable: '机电任务',
		value: 1,
		content: '遂渝高速沙坪坝收费站广场入口广场ETC情报板',
	},
])
</script>

<style lang="postcss" scoped>
.layer-group {
	width: 100%;
}
.electro-list{
    margin-bottom: 5px;
}
.electro-top {
	height: 28px;
	width: 100%;
	padding-left: 8px;
	padding-right: 6px;
	border: 2px solid transparent;
	border-image: url(@/assets/images/newLayerContrl/driver.png) 0 0 100% 0
		stretch;
	@apply flex items-center justify-between;
}
.electro-title {
	width: 80px;
	height: 100%;
	background: url(@/assets/images/newLayerContrl/little.png) no-repeat;
	background-size: 100% 100%;
	@apply flex items-center justify-center;
	font-size: 12px;
}
.num {
	color: #b1dfff;
	transform: scale(0.7);
}
.electro-title-content {
	transform: scale(0.83);
}
.right-action {
	color: #ffce5a;
	font-size: 12px;
	transform: scale(0.9);
}
.electro-content {
	padding: 8px 10px;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.1),
		rgba(61, 165, 255, 0.2),
		rgba(0, 0, 0, 0.1)
	);
}
.electro-content_default {
	color: #def2fe;
	font-size: 12px;
}
.electro-content_info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: 10px;
}
.time {
	transform: scale(0.83);
	color: #94a8c6;
	margin-left: -10px;
}
.name {
	margin-left: 20px;
}
.blue{
    color: #3DA5FF;
}
</style>
