<template>
	<div class="right_two">
    <CommonTitle title="道路预警" />
		<div class="content" v-loading="isLoading"
         element-loading-background="rgba(0, 22, 52, 0.75)">
			<div class="item" v-for="item in arr" :key="item.id">
				<div :class="`top center_center ${item.className1}`">
					{{item.LFXS_NAME}}
				</div>
				<div :class="`bottom ${item.className2}`">
					<div class="bottom_top center_center">
						{{item.WARNING_DLZC}}
					</div>
					<div class="bottom_bottom center_center">
						公里
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'
	import {
		getQueryRoadWarning
	} from '../service/http.js'
  import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
	let arr = ref([]);
  const isLoading = ref(false);
	onMounted(() => {
    isLoading.value = true;
		getQueryRoadWarning().then(res => {
      isLoading.value = false;
			let arr1 = [];
			for(let i in res.data.data.Rows[0]) {
			  arr1.push (res.data.data.Rows[0][i])  
			}
			arr.value = arr1.filter(item=>{
				return item.LFXS_NAME != "其它"
			
			})
			arr.value.forEach(item=>{
				if(item.LFXS_NAME == "一幅路"){
					item["className1"] = "top_one"
					item["className2"] = "bottom_one"
				}else if(item.LFXS_NAME == "两幅路"){
					item["className1"] = "top_two"
					item["className2"] = "bottom_two"
				}else if(item.LFXS_NAME == "三幅路"){
					item["className1"] = "top_three"
					item["className2"] = "bottom_three"
				}else if(item.LFXS_NAME == "四幅路"){
					item["className1"] = "top_four"
					item["className2"] = "bottom_four"
				}else{
					item["className1"] = "top_five"
					item["className2"] = "bottom_five"
				}
			})
		})
	})
	
</script>

<style scoped lang="scss">
	.center {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.center_center{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.right_two{
		height: 17%;
		padding-top: 10px;
		box-sizing: border-box;
		.content {
			height: 85%;
			margin: 0 20px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.item{
				width: 72px;
				height: 83px;
				
				.top_one{
					background: #0058B2;
					border: 1px solid #007EFF;
				}
				.bottom_one{
					background: rgba(0,126,255,0.3);
				}
				.top_two{
					background: #00B285;
					border: 1px solid #00E6AC;
	
				}
				.bottom_two{
					background: rgba(45,179,145,0.3);
				}
				.top_three{
					background: #0094B2;
					border: 1px solid #00D5FF;
				}
				.bottom_three{
					background: rgba(0,148,178,0.3);
				}
				.top_four{
					background: rgba(203,203,0,0.5);
					border: 1px solid #BFBF00;
				}
				.bottom_four{
					background: rgba(255,255,0,0.3);
	
				}
				.top_five{
					background: rgba(217,126,0,0.5);
					border: 1px solid #D97E00;
	
				}
				.bottom_five{
					background: rgba(217,126,0,0.3);
				}
				
				.top{
					width: 72px;
					height: 24px;
					font-family: Microsoft YaHei;
					font-weight: bold;
					font-size: 13px;
					color: #FFFFFF;
					box-sizing: border-box;
				}
				.bottom{
					width: 72px;
					height: 63px;
					
					
					.bottom_top{
						height: 50%;
						font-family: YouSheBiaoTiHei;
						font-weight: bold;
						font-size: 16px;
						color: #FFFFFF;
					}
					.bottom_bottom{
						font-family: Microsoft YaHei;
						font-weight: 400;
						font-size: 12px;
						color: #FFFFFF;
					}
				}
				
			}
		}
	}
</style>