<template>
	<div class="left_one">
		<CommonTitle title="建筑概览" />
		<div class="content" v-loading="isLoading"
         element-loading-background="rgba(0, 22, 52, 0.75)">
			<div class="content_left">
				<div class="detail">
					<div>
						<img src="@/assets/imgs/fwzs.png" alt="" srcset="">
					</div>
					<div class="detail_right">
						<div class="right_content"><span>房屋总数</span></div>
						<div class="right_content">
							<div class="content_area">
								<div class="area_left">
									{{obj && obj.fwzs}}
								</div>
								<div class="area_right">
									万栋
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="detail">
					<div>
						<img src="@/assets/imgs/jzmj.png" alt="" srcset="">
					</div>
					<div class="detail_right">
						<div class="right_content"><span>建筑面积</span></div>
						<div class="right_content">
							<div class="content_area">
								<div class="area_left">
									{{obj && obj.jzmj}}
								</div>
								<div class="area_right">
									万㎡
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="content_right">
				<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">
							万栋
						</div>
						<div class="top_right center">
							{{item.per}}
						</div>
					</div>
					<div class="item_bottom" :style="`width:${item.per_show};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>
	</div>
</template>

<script>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'
	import {
		getSelectJzgsCount
	} from '../service/http.js'
  import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
  export default {
    name: "BuildingOverview",
    components:{
      CommonTitle
    },
    setup(){
      let obj = ref({});
      let num = ref(0);
      let arr = ref([
        {
          id:1,
          name:"城镇房屋",
          num:'',
          per:''
        },
        {
          id:2,
          name:"农村房屋",
          num:'',
          per:''
        },
        {
          id:3,
          name:"农村自建房屋",
          num:'',
          per:''
        }
      ]);
      const isLoading = ref(false);
      onMounted(() => {
        isLoading.value = true;
        getSelectJzgsCount().then(res => {
          isLoading.value = false;
          let total = 0
          obj.value = res.data.data.Rows[0]
          obj.value.fwzs = (Number(obj.value.fwzs)/10000).toFixed(2)
          obj.value.jzmj = (Number(obj.value.jzmj)).toFixed(0)
          arr.value.forEach(item=>{
            if(item.id == 1){
              item.num = (Number(obj.value.czfw)/10000).toFixed(2)
            }else if(item.id == 2){
              item.num = (Number(obj.value.ncfw)/10000).toFixed(2)
            }else{
              item.num = (Number(obj.value.nczjf)/10000).toFixed(2)
            }
          })
          arr.value.forEach(item=>{
            total += Number(item.num)
          })
          num.value = total.toFixed()
          arr.value.forEach(item=>{
            item["per"] = ((Number(item.num)/num.value)*100).toFixed(2) + '%';
            item["per_show"] = ((Number(item.num)/num.value)*100 + 1).toFixed(2) + '%'
          })
        })

      });
      return{
        isLoading,
        obj,
        arr
      }
    }
  }

</script>

<style lang="scss" scoped>
	.center {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.left_one {
		height: 20%;
		padding-top: 10px;
		box-sizing: border-box;
		.content {
			height: 80%;
			margin: 0 20px;
			display: flex;
	
			.content_left {
				width: 40%;
				height: 100%;
	
				.detail {
					height: 50%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
	
					img {
						width: 42px;
						height: 48px;
					}
	
					.detail_right {
						height: 70%;
	
						.right_content {
							height: 50%;
							display: flex;
							align-items: center;
	
							span {
								font-family: Microsoft YaHei;
								font-weight: 400;
								font-size: 14px;
								color: #FFFFFF;
								line-height: 23px;
								text-shadow: 1px 2px 0px rgba(17, 20, 22, 0.22);
								font-style: italic;
							}
	
							.content_area {
								display: flex;
								justify-content: flex-start;
	
								.area_right {
									font-family: Microsoft YaHei;
									font-weight: 400;
									font-size: 12px;
									color: #7BBBE7;
									font-style: italic;
									display: flex;
									align-items: center;
									margin-left: 2px;
								}
	
								.area_left {
									font-family: YouSheBiaoTiHei;
									//font-weight: 400;
									font-weight: bold;
									font-size: 16px;
									color: #FFFFFF;
									background: linear-gradient(80deg, rgba(29, 128, 224, 0.64) 0%, rgba(255, 255, 255, 1) 100%);
									-webkit-background-clip: text;
									-webkit-text-fill-color: transparent;
								}
							}
						}
					}
	
				}
			}
	
			.content_right {
				width: 60%;
				height: 90%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
				.right_item {
					height: 31%;
          padding-bottom: 1%;
					box-sizing: border-box;
	
					.item_top {
						height: 70%;
						display: flex;
	
						.top_left {
							width: 84px;
							font-weight: bold;
							font-size: 14px;
							color: #FFFFFF;
						}
	
						.middle_left {
							width: 59px;
							font-family: YouSheBiaoTiHei;
							font-weight: bold;
							font-size: 16px;
							color: #8DC6FF;
							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>