<template>
	<div class="left_five">
    <CommonTitle title="城镇房屋设防烈度"/>
		<div class="content" v-loading="isLoading"
         element-loading-background="rgba(0, 22, 52, 0.75)">
			<div class="top">
				<div class="left">
					总量(万栋)
				</div>
				<div class="right">
					{{obj.dataCount}}
				</div>
			</div>
			<div class="middle">
				<div v-for="item in arr" :key="item.id" class="bg" :style="`width:${item.per};background:${item.color}`">
					
				</div>
			</div>
			<div class="bottom">
				<div class="item" v-for="item in arr" :key="item.id">
					<div class="item_top center">
						<div class="left" :style="`background:${item.color}`">
							
						</div>
						<div class="right center">
							{{item.sfldY}}
						</div>
					</div>
					<div class="item_bottom center">
						<div class="left">
							{{item.num}}
						</div>
						<div class="item_bottom_middle center">
							万栋
						</div>
						<div class="right center">
							{{item.per}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'
	import {
		getSelectCzfwsfldCount
	} from '../service/http.js'
  import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
	let arr = ref([]);
	let obj = ref({});
  const isLoading = ref(false);
	onMounted(() => {
    isLoading.value = true;
		getSelectCzfwsfldCount().then(res => {
      isLoading.value = false;
			obj.value = res.data.data.Rows[0]
			obj.value.dataCount = (Number(obj.value.dataCount)/10000).toFixed(4)
			arr.value = res.data.data.Rows
			arr.value.shift()
			arr.value.forEach(item=>{
				item['num'] = (Number(item.dataCount)/10000).toFixed(2)
				item["per"] = ((Number(item.num)/obj.value.dataCount)*100).toFixed(2) + '%'
				if(item.sfldY == "6 度以下或未设防"){
					item["className"] = "bg1"
					item["color"] = '#0084B7'
				}else if(item.sfldY == "6 度（0.05g）"){
					item["className"] = "bg4"
					item["color"] = '#D95F36'
				}else if(item.sfldY == "7 度（0.10g）"){
					item["className"] = "bg2"
					item["color"] = '#0088CC'
				}else if(item.sfldY == "7 度（0.15g）"){
					item["className"] = "bg5"
					item["color"] = '#B37436'
				}else if(item.sfldY == "8 度（0.20g）"){
					item["className"] = "bg3"
					item["color"] = '#00ACA0'
				}else if(item.sfldY == "8 度（0.30g）"){
					item["className"] = "bg6"
					item["color"] = '#BE9533'
				}else{
					item["className"] = "bg7"
					item["color"] = '#00CC45'
				}
			})
		})
		
	})
	
</script>

<style scoped lang="scss">
	.center {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.left_five {
		height: 28%;
		padding-top: 10px;
		box-sizing: border-box;
		.content {
			height: 90%;
			margin: 0 10px;
			
			.top{
				width: 100%;
				display: flex;
				justify-content: space-between;
				height: 30px;
				margin-top: 10px;
				.left{
					width: 70px;
					font-family: Source Han Sans CN;
					font-weight: bold;
					font-size: 14px;
					color: #FFFFFF;
					//text-shadow: 0px 4px 2px rgba(0,15,17,0.73);
					background: linear-gradient(0deg, #5FB3DD 0%, #FFFFFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				.right{
					min-width: 75px;
					font-family: YouSheBiaoTiHei;
					font-weight: bold;
					font-size: 18px;
					color: #3DA6FE;
					//text-shadow: 0px 4px 2px rgba(0,15,17,0.73);
					background: linear-gradient(0deg, #5FB3DD 0%, #FFFFFF 89.7705078125%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
			.middle{
				width: 100%;
				height: 7px;
				display: flex;
				justify-content: flex-start;
				margin-top: 10px;
				.bg{
					height: 7px;
					margin-right: 2px;
				}
			}
			
			.bottom{
				width: 100%;
				height: 60%;
				margin-top: 15px;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
        align-items: center;
				.item{
					width: 33%;
          padding-left: 0.3%;
					height: 31%;
					box-sizing: border-box;
					
					.item_top{
						height: 50%;
						.left{
							width: 13px;
							height: 11px;
							box-shadow: -5px 7px 12px 0px #0082B4;
							border-radius: 2px;
							margin-right: 3px;
						}
						
						.right{
							width:121px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							font-size: 12px;
							color: #FFFEFE;
						}
					}
					
					.item_bottom{
						height: 50%;
						.left{
							font-family: YouSheBiaoTiHei;
							font-weight: 400;
							font-size: 14px;
							color: #FFFEFE;
							margin-right: 3px;
						}
						.item_bottom_middle{
							width: 24px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							font-size: 12px;
							color: #FFFEFE;
							opacity: 0.6;
							margin-right: 3px;
						}
						.right{
							font-family: YouSheBiaoTiHei;
							font-weight: 400;
							font-size: 14px;
							color: #00C7FF;
						}
					}
				}
			}
		}
	}
</style>