<template>
	<div class="right_one">
    <CommonTitle title="市政设施类型" />
		<div class="content" id="chartFive" 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.NAME}}
					</div>
					<div class="middle_left center">
						{{item.NUM}}
					</div>
					<div class="middle_right center">
						{{item.discribe}}
					</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 {
		getMunicipalFacilityTypes
	} 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;
		getMunicipalFacilityTypes().then(res => {
      isLoading.value = false;
			arr.value = res.data.data.Rows
			num.value = 0
			arr.value.forEach(item=>{
				num.value += Number(item.NUM)
			})
			arr.value.forEach(item=>{
				item["per"] = ((Number(item.NUM)/num.value)*100).toFixed(2) + '%'
				if(item.NAME != '市政道路附属设施（点状）'){
					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: 24%;
		padding-top: 10px;
		box-sizing: border-box;

		.content {
			height: 80%;
			margin: 0 20px;
			box-sizing: border-box;

			.right_item {
				height: 20%;
				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: 89px;
						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: 6px;
          position: relative;
          img{
            width: 12px;
            height: 12px;
            position: absolute;
            bottom: -4px;
            right: -6px;
          }
				}
			}
		}
	}
</style>
