<template>
	<div class="right_one">
    <CommonTitle title="结构类型占比" />
		<div class="content scroll"  v-loading="isLoading"
         element-loading-background="rgba(0, 22, 52, 0.75)">
			<div class="right_item" v-for="item in arr" :key="item.id">
				<div class="item_top">
					<div class="top_left center">
						{{item.jglx}}
					</div>
					<div class="middle_left center">
						{{item.dataCount}}
					</div>
					<div class="middle_right center">
						万㎡
					</div>
					<div class="top_right center">
						{{item.per}}
					</div>
				</div>
				<div class="item_bottom" :style="`width:${item.per};background: linear-gradient(270deg, rgba(29, 128, 224, 0.64) 0%, rgba(255, 255, 255, 0.64) 100%);`">
          <img src="@/assets/imgs/guangquan.png" alt="" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'
	import {
		getSelectJglxzbCount
	} from '../service/http.js'
  import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
	let arr = ref([]);
	let num = ref(0);
  const isLoading = ref(false);
	onMounted(() => {
    isLoading.value = true;
		getSelectJglxzbCount().then(res => {
      isLoading.value = false;
			arr.value = res.data.data.Rows
			num.value = 0
			arr.value.forEach(item=>{
				num.value += Number(item.dataCount)
			})
			arr.value.forEach(item=>{
				item["per"] = ((Number(item.dataCount)/num.value)*100).toFixed(2) + '%'
				if(item.jglx != '市政道路附属设施（点状）'){
					item["discribe"] = "公里"
				}else{
					item["discribe"] = "个"
				}
			})
		})
	})
</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_one {
		height: 27%;
    width: 100%;
		padding-top: 10px;
		box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
		.content {
      width: 100%;
      padding: 0 20px;
      height: 80%;
			box-sizing: border-box;
			
			.right_item {
				height: 16%;
				box-sizing: border-box;
			
				.item_top {
					height: 80%;
					display: flex;
			
					.top_left {
						width: 180px;
						font-weight: bold;
						font-size: 14px;
						color: #FFFFFF;
					}
			
					.middle_left {
						width: 90px;
						font-family: YouSheBiaoTiHei;
						font-weight: bold;
						font-size: 16px;
						color: #8DC6FF;
						text-align: right;
						//line-height: 55px;
					}
			
					.middle_right {
						width: 24px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						font-size: 12px;
						color: #FFFFFF;
						opacity: 0.6;
						margin-right: 5px;
					}
			
					.top_right {
						width: 33px;
			
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						font-size: 16px;
						color: #ECF2F5;
						//line-height: 55px;
					}
				}
			
				.item_bottom {
					height: 4px;
          margin-top: 2px;
          margin-bottom: 4px;
          position: relative;
          img{
            width: 12px;
            height: 12px;
            position: absolute;
            bottom: -4px;
            right: -6px;
          }
				}
			}
		}
	}
</style>