<template>
<div class="info-container pos-f">
	<div class="flex jc-sb ai-c header-container">
		<div class="flex">
			<div class="mr-3 fz-16 fc-w fw-b header-title">{{ paramValue.name }}</div>
			<div class="ml-3 fz-16 fc-w fw-b header-title">未检测<span style="padding-left: 3px;" class="fc-r">{{unCheckedPeos}}人</span></div>
			<div class="ml-3 fz-12 fc-w messagebtn cursor">一键短信提醒</div>
		</div>
		<div class="header-close cursor" @click="close">
			<img src="/images/close.png" />
		</div>
	</div>
	<div class="section-container fc-w">
		<div class="flex jc-sb tr-box">
			<div class="left-li">楼栋信息</div>
			<div class="flex right-ul jc-sa">
				<div class="right-li unit-li" v-for="(item,index) in unitList" :key="index">{{item}}单元</div>
			</div>
		</div>
		<div class="flex jc-sb mt-3 tb-container">
			<div class="left-li">
				<div class="floor-ul" v-for="(item,index) in floorList" @click="floorClick(item,index)">
					<div class="tb-in floor-li fz-24 flex ai-c fw-b jc-c" :class="index==floorIndex?'flooractive':''">{{item.label}}</div>
				</div>
			</div>
			<div class="flex right-ul jc-sa">
				<div class="right-li info-li flex wrap" v-for="(item,index) in infoList" :key="index" style="overflow: hidden;">
					<div style="overflow-y: auto;width: 100%;height: 100%;align-content: flex-start;" class="flex wrap">
						<div class="tb-height" v-for="val in item.children">
							<div class="jc-se">
								<div class="">
									<div class="tb-in max-w flex jc-c column" v-if="val.status=='正常'">
										<span class="ml-1 fz-16">{{val.doorNo}}</span>
										<span class="ml-1 fz-14 wrap">{{val.status}}</span>
										<!-- <div class="ml-1 mr-1 flex jc-sb wrap">
											<span style="line-height: 20px;" class="fz-14" v-for="peo in val.personInfoList" 
												:style="{'color':peo.isDetected?'#fff':'#ff0'}">
												{{peo.name}}
											</span>
										</div> -->
									</div>
									<div v-if="val.status=='异常'">
										<el-popover
											placement="right"
											trigger="click">
											<div class="peopledetail-box">
												<div class="gridtitle fz-18 fw-b">
													<span></span>
													{{houseName}}
												</div>
												<div class="fz-14 mt-1">人员：{{peopleDetails.allCount}}人</div>
												<div class="fz-14 fc-r mt-1">异常：{{peopleDetails.undetectedCount}}人</div>
												<div class="fz-14 fc-r" v-for="(item,index) in peopleDetails.undetectedPersonInfoList">
													<div class="mt-1">人员{{index+1}}：{{item.name}}</div>
													<div class="mt-1">核酸时间：{{item.detectionInfo}}</div>
												</div>
											</div>
											<div class="tb-in max-w flex jc-c column active" slot="reference" @click="peoplesGridClick(val)">
												<span class="ml-1 fz-16">{{val.doorNo}}</span>
												<span class="ml-1 fz-14 wrap fc-r">{{val.status}}：{{val.undetectedCount}}人</span>
											</div>
										</el-popover>
									</div>
									
								</div>
							</div>
						</div>
					</div>	
				</div>
			</div>
		</div>
	</div>
</div>	
	
</template>

<script>
import { getMethodCommon,postMethodCommon } from "../../../api/common.js"	
export default {
	name: "info",
	props:['paramValue','dateValue','timeSlotValue'],
	data() {
		return {
			houseName: '',
			peopleDetails: [],
			unitList:[],
			floorList:[],
            floorIndex: 0,
			unCheckedPeos: 0,
			infoList:[
				{
					children:[]
				},
				{
					children:[]
				}
			],
            handleInfoList:[]
		}
	},
	mounted() {
		this.getItemData()
	},
	methods: {
        floorClick(item,index){
            this.floorIndex = index
            this.infoList.forEach(item =>{
                item.children = []
            })
            this.handleInfoList.forEach(item =>{
                let ind = Number(item.unit) - 1
                if(index == 0){
                   this.infoList[ind].children.push(item)
                   return 
                }
                if(item.floor == index){
                    this.infoList[ind].children.push(item)
                }
            })
        },
		getItemData(){
			let _this = this
			let param = {
				buildingId: this.paramValue.id,
				detectionDate: this.dateValue,
				day: this.timeSlotValue
			}
            _this.floorList = [
                { label: '总览', value: '' }
            ]
			getMethodCommon('/EpidemicSituation/HousePersonDetectionStatus',param).then(res =>{
				let rel = res.data.result
				_this.unitList = rel.unitCount
                for(let i = 1;i<rel.floorCount+1;i++){
                    _this.floorList.push({
                        label: i + 'F',
                        value: i
                    })
                }
				_this.unCheckedPeos = rel.allUndetectedCount
				let unitArr = []
				for(let i=1;i<=rel.unitCount;i++){
					unitArr.push({children:[]})
				}
				_this.infoList = JSON.parse(JSON.stringify(unitArr))

                _this.handleInfoList = rel.housePersonDetectionStatusList
				rel.housePersonDetectionStatusList.forEach(item =>{
					let ind = Number(item.unit) - 1
					_this.infoList[ind].children.push(item)
				})
                console.log('_this.infoList',_this.infoList)
			})
		},
		peoplesGridClick(item){
			let param = {
				houseId: item.houseId,
				detectionDate: this.dateValue,
				day: this.timeSlotValue
			}
			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: 1584px;
	height: 810px;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-top: -445px;
	margin-left: -812px;
	z-index: 10;
	padding: 25px 20px 55px;
	background: url(../../../../public/images/diaboxbg.png);
	background-size: 100% 100%;
}
.header-container{
	height: 40px;
	background: url(../../../../public/images/diatitlebg.png);
	background-size: 100% 100%;
}
.header-title{
	line-height: 16px;
	margin-left: 45px;
}
.header-close{
	width: 19px;
	height: 20px;
	margin-right: 10px;
}
.messagebtn{
	width: 122px;
	height: 22px;
	line-height: 22px;
	background: url(../../../../public/images/messagebg.png);
	background-size: 100% 100%;
}
.section-container{
	margin-top: 24px;
	height: calc(100% - 60px);
}
.left-li{
	width: 100px;
	line-height: 30px;
	overflow: auto;
}
.right-ul{
	width: calc(100% - 100px);
	overflow: auto;
}
.right-li{
    width: 414px;
	line-height: 30px;
}
.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;
}
.tb-container{
	width: 94%;
	height: calc(100% - 50px);
	margin-left: 3%;
}
.tr-box{
	width: 94%;
	margin-left: 3%;
}
.tb-height{
    width: 120px;
	height: 90px;
    margin-left: 14px;
}
.tb-in{
    width: 120px;
	height: 78px;
	background: #0893FF;
	border-radius: 3px;
	font-family: Source Han Sans CN;
	text-align: left;
}
.tb-in.active{
	/* background: linear-gradient(-90deg, #E10019 0%, #FF8A00 100%); */
    background: linear-gradient(0deg, #0079FE 0%, #00E4FF 100%);
}
.floor-ul{
    width: 64px;
    height: 89px;
}
.floor-li{
	width: 64px;
    height: 60px;
	background: #001759;
	border: 1px solid #0893FF;
	border-radius: 3px;
    cursor: pointer;
}
.floor-li.flooractive{
	background: linear-gradient(0deg, #0079FE 0%, #00E4FF 100%);
}
.info-li{
    width: 414px;
	background: #001759;
	border: 1px solid #0893FF;
	border-radius: 3px;
	padding-top: 10px;
    align-content: flex-start;
}
.peopledetail-box{
	width: 230px;
	min-height: 180px;
	background: #fff;
	border-radius: 4px;
	color: #001759;
    margin-bottom: 8px;
}
.peopledetail-box .gridtitle{
	border-bottom: 1px solid #001759;
    padding-bottom: 7px;
    display: flex;
    align-items: center;
}
.peopledetail-box .gridtitle span{
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #001759;
    border-radius: 50%;
}

::-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; 
}
.jc-sa{
	justify-content: space-around;
}
</style>
