<template>
<div class="info-container pos-f">
	<div class="header-container">
		<div class="header-title">{{currentBuildInfo.xmmc}} - {{currentBuildInfo.zrzh}}</div>
		<span class="header-close" @click="close">
			<img src="/images/close.png" width="20px"  />
		</span>
	</div>
	<div class="section-container">
		<div class="tb-container">
			<div class="floor-info" v-for="(item,index) in buildList" :key="index">
				<div class="floor-number">
					{{item.floor}}F
				</div>
				<div class="house-container">
						<div class="house" v-for="(it,idx) in item.data" :key="idx">
							<p>{{it.zl}}</p>
							<p style="width:150px;position:absolute;bottom:3px;left:0px;text-align:right;">
								<el-button size="small" type="primary" @click="houseDetail(it)">信息</el-button>
							</p>
						</div>
				</div>
			</div>
		</div>
	</div>
</div>	
	
</template>

<script>

export default {
	name: "info",
	// props:['paramValue','dateValue'],
	props:['currentBuildInfo'],
	data() {
		return {
			houseName: '',
			peopleDetails: [],
			floorList:[],
			unCheckedPeos: 0,
			infoList:[
				{
					children:[
						{
							data:[]
						},
						{
							data:[]
						}
					]
				},
				{
					children:[
						{
							data:[]
						},
						{
							data:[]
						}
					]
				}
      ],
      
      unitList:[
       {
         unitInfo:"一单元",
         floor:[
           {
             floor:"1",
             house:[
               {
                 number:101,
                 people:"徐景良"
               },{
                 number:102,
                 people:"徐景良"
               }
             ],
           },{
             floor:"1",
             house:[
               {
                 number:201,
                 people:"徐景良"
               },{
                 number:202,
                 people:"徐景良"
               }
             ],
           },{
             floor:"1",
             house:[
               {
                 number:201,
                 people:"徐景良"
               },{
                 number:202,
                 people:"徐景良"
               }
             ],
           }
         ]
       },{
         unitInfo:"二单元",
         floor:[
           {
             floor:"1",
             house:[
               {
                 number:101,
                 people:"徐景良"
               },{
                 number:102,
                 people:"徐景良"
               }
             ],
           },{
             floor:"1",
             house:[
               {
                 number:201,
                 people:"徐景良"
               },{
                 number:202,
                 people:"徐景良"
               }
             ],
           },{
             floor:"1",
             house:[
               {
                 number:201,
                 people:"徐景良"
               },{
                 number:202,
                 people:"徐景良"
               }
             ],
           }
         ]
       }
			],
			buildList:[],
		}
	},
	created(){
		console.log("currentBuildInfo",this.currentBuildInfo);
		this.handlerBuildInfo();
	},
	mounted() {
		// this.getItemData()
	},
	methods: {
		houseDetail(houseinfo){

			houseinfo.qlrs = [];
		
			this.currentBuildInfo.qlrs.forEach((item,index)=>{
				if(item.bdcdyh == houseinfo.bdcdyh){
					houseinfo.qlrs.push(item);
				}
			})

			console.log("currentBuildInfo1",houseinfo);
			this.$emit("getHouseDetail",houseinfo);
		},
		handlerBuildInfo(){
			for(let i=0;i<this.currentBuildInfo.hs.length;i++){
				if(!this.floorList.find(item=>{
					return item == this.currentBuildInfo.hs[i].ch
				})){
					this.floorList.push(this.currentBuildInfo.hs[i].ch);
				}
			}
			
			this.floorList.sort((a,b)=>{
				return a-b;
			});

			this.floorList.forEach((item,index)=>{
				let obj = {
					floor:item,
					data:[],
				}
				this.buildList.push(obj);
			})

			console.log("buildList",this.buildList);

			for(let i=0;i<this.buildList.length;i++){
				this.currentBuildInfo.hs.forEach((item,index)=>{
					if(item.ch == this.buildList[i].floor){
						this.buildList[i].data.push(item);
					}
				})
				console.log("currentBuildInfo",this.buildList);
			}


		},
		getItemData(){
			let _this = this
			let param = {
				buildingId: this.paramValue.id,
				detectionDate: this.dateValue
			}
			// getMethodCommon('/EpidemicSituation/HousePersonDetectionStatus',param).then(res =>{
			// 	let rel = res.data.result
			// 	_this.unitList = rel.unitCount
			// 	_this.floorList = rel.floorCount
			// 	_this.unCheckedPeos = rel.allUndetectedCount
			// 	let unitArr = []
			// 	let floorArr = []
			// 	for(let i=1;i<=rel.floorCount;i++){
			// 		floorArr.push({data:[]})
			// 	}
			// 	for(let i=1;i<=rel.unitCount;i++){
			// 		unitArr.push({children:floorArr})
			// 	}
			// 	_this.infoList = JSON.parse(JSON.stringify(unitArr))
			// 	rel.housePersonDetectionStatusList.forEach(item =>{
			// 		let ind = Number(item.unit) - 1
			// 		let num = Number(item.floor) - 1
			// 		_this.infoList[ind].children[num].data.push(item)
			// 	})
			// })
		},
		peoplesGridClick(item){
			let param = {
				houseId: item.houseId,
				detectionDate: this.dateValue
			}
			this.houseName = item.doorNo
			// getMethodCommon('/EpidemicSituation/DetailedHouseUndetectedPersonInfo',param).then(res =>{
			// 	this.peopleDetails = res.data.result
			// })
		},
		close() {
			this.$emit('close')
		}
	}
}
</script>
 
<style scoped="scoped">
.info-container{
	width: 1284px;
	height: 610px;
	z-index: 10;
	padding: 25px 20px 55px;
	background: url(/images/diaboxbg.png);
	background-size: 100% 100%;
}
.header-container{
	height: 40px;
  width:1284px;
  /* background:red; */
	background: url(/images/diatitlebg.png);
	background-size: 100% 100%;
  cursor:move;
}
.header-title{
  width:300px;
  float:left;
	line-height: 32px;
	margin-left: 45px;
  color:#fff;
  font-size:18px;
  text-align: left;
}
.header-close{
	width: 32px;
	height: 32px;
  float:right;
	margin-right: 10px;
  cursor:pointer;
}
.header-close img{
  margin-top:8px;
  width:24px;
}
.messagebtn{
	width: 122px;
	height: 22px;
	line-height: 22px;
	background: url(/images/messagebg.png);
	background-size: 100% 100%;
}
.section-container{
	margin-top: 10px;
	height: calc(100% - 60px);
}
.left-li{
	width: 1000px;
	line-height: 30px;
	padding-top: 10px;
  color:#fff;
}
.right-ul{
	width: calc(100% - 100px);
}
.right-li{
	line-height: 30px;
	margin-left: 30px;
	flex: 1;
}
.right-li:first-child{
	margin-left: 10px;
}
.unit-li{
	height: 30px;
	border: 1px solid #0893FF;
	border-radius: 3px;
	font-size: 16px;
	font-family: Source Han Sans CN;
	color: #CFD5E5;
  text-align: center;
  line-height: 30px;
}
.tb-container{
	width: 1280px;
	height:100%;
	overflow: auto;
}
.floor-info{
	min-height:50px;
	overflow: hidden;
	width:1280px;
	margin:8px 0px;
}
.floor-number{
	width:50px;
	height:74px;
	float:left;
	color:#fff;
	text-align: center;
	border:1px solid #0893FF;
	margin:4px 0px;
	line-height:74px;
}
.house-container{
	width:1210px;
	float:left;
	min-height:50px;
}
.house{
	text-align: left;
	width:150px;
	height:68px;
	padding:3px;
	margin:4px 7px;
	color:#fff;
	font-size:12px;
	float:left;
	border:1px solid #0893FF;
	position:relative;
}
::-webkit-scrollbar {
	/*滚动条整体*/    
	width: 0px;    
	height: 7px;
}
::-webkit-scrollbar-track{
	background-color:#00E4FF;
	border-radius: 30px;
}
::-webkit-scrollbar-thumb{   
	background-color: #0893FF;
}
::-webkit-scrollbar-button{
    display:none; 
}


</style>
