<template>
	<div>
		<common @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="companyName+pageTitle"></top-header>

		<div class="mui-content fyy-wall">
			<div class="fyy-wall-top">
				<div class="fyy-wall-date" v-text="queryDate">
					2020-04-03
				</div>
				<ul class="mui-table-view mui-grid-view mui-grid-9 fyy-statistics">
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<div class="fyy-statistics-body">
							<div class="fyy-wall-number fyy-wall-small">
								<div class="mui-media-body" style="margin-bottom:5px">
									<span class="mui-icon iconfont icon-renyuanjieshao"></span>
									<p class="mui-col-xs-7">已测员工</p>
									<span class="mui-col-xs-5"><span class="color55f868" v-text="detail.checkedPersonNum">18</span><span class="fyy-danwei">人</span></span>
								</div>
								<div class="mui-media-body">
									<span class="mui-icon iconfont icon-yuangongruzhi"></span>
									<p class="mui-col-xs-7">应测员工</p>
									<span class="mui-col-xs-5"><span class="color4fc5f7" v-text="detail.personNum">100</span><span class="fyy-danwei">人</span></span>
								</div>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<div class="fyy-statistics-body">
							<div class="fyy-wall-number fyy-wall-small ">
								<div class="mui-media-body" style="margin-bottom:5px">
									<span class="mui-icon iconfont icon-renshu"></span>
									<p class="mui-col-xs-6">已测访客</p>
									<span class="mui-col-xs-6"><span class="colorf8b155" v-text="detail.checkedVisitorNum">18</span><span class="fyy-danwei">人</span></span>
								</div>
								<div class="mui-media-body">
									<span class="mui-icon iconfont icon-leijicishu1"></span>
									<p class="mui-col-xs-6">当日异常</p>
									<span class="mui-col-xs-6"><span class="colorfe616c" v-text="detail.dayAbnormalNum">5000</span><span class="fyy-danwei">人</span></span>
								</div>
							</div>
						</div>
					</li>
				</ul>

				<ul class="mui-table-view mui-grid-view mui-grid-9 fyy-statistics">
					<li class="mui-table-view-cell mui-media mui-col-xs-12">
						<div class="fyy-statistics-body">
							<div class="fyy-wall-number fyy-wall-small">
								<!--<div class="mui-media-body" style="margin-bottom:5px">
									<span class="mui-icon iconfont icon-baojing"></span>
									<p class="mui-col-xs-8">当日异常<span style="margin:0 15px">/</span>累计异常</p>
									<span class="mui-col-xs-4"><span class="colorfe616c" v-text="detail.dayAbnormalNum">0</span>人 <span style="margin:0 15px">/</span><span class="colorfe616c" v-text="detail.totalAbnormalNum">1</span>人</span>
								</div>-->
								<div class="mui-media-body">



									<span class="mui-col-xs-12" style="text-align:center"> <span class="mui-icon iconfont icon-shijian"></span>连续无异常<span
										 class="color55f868" style="font-size: 20px;margin: 0px 8px;" v-text="detail.normalDays">6</span>天</span>

								</div>
							</div>
						</div>
					</li>
				</ul>

			</div>
			<div id="slider" class="mui-slider mui-fullscreen fyy-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item " :class=" nowItem==''?'mui-active':''" @click="changeItem('')" style="width:30%">
							全部测温记录
						</a>
						<a class="mui-control-item" :class=" nowItem=='person'?'mui-active':''" @click="changeItem('person')" style="width:36%">
							内部员工测温记录
						</a>
						<a class="mui-control-item" :class=" nowItem=='visitor'?'mui-active':''" @click="changeItem('visitor')" style="width:34%">
							访客测温记录
						</a>
					</div>
				</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">

									<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-pull-left" v-for="(item,index) in recordList">
										<div class="mui-content-padded">
											<div class="mui-media-object">

												<img :src="item.faceImage">
												<span class="mui-icon iconfont icon-erweima1 " v-if="!item.isVistor" :style="'color:'+getGreenCodeColor(item['person']['healthyCode'])"></span>
											</div>
											<div class="mui-media-body">
												<span v-text="item.personName">冯银银</span>
												<span class="mui-pull-right " :class="item.temperature>maxTemperature?'colorfe616c':'color55f868'">{{item.temperature}}</span>
											</div>
											<p>{{item.recordTime?item.recordTime.substring(5,10):''}} <span>{{item.recordTime?item.recordTime.substring(10,16):''}}</span></p>
										</div>
									</li>


								</ul>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<loading :visible="isLoading"></loading>

	</div>
</template>


<script>
	import * as API_Health from '@/apis/Master/health'

	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import isReachBottom from '$project/utils/isReachBottom'

	import {
		parseUnixTime,
		currentTimeStamp

	} from '$project/utils'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: 'MasterHealthWall',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '健康公示墙',

				isLoading: false,

				queryDate: '',
				detailForm: {
					queryDate: '',

				},
				listForm: {
					pageIndex: 1,
					pageSize: 15,
					queryDate: '',

					totalPage: 1,
					type: ''
				},
				//总访客数
				recordsTotal: 0,
				nowItem: '',
				companyId: '',
				companyName: '',
				detail: {},
				recordList: [],
				isLoading: false,
				maxTemperature: 37.3,
				intervalId: null,
			}
		},
		created() {
			//赋值时间
			this.queryDate = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');

			this.detailForm.queryDate = this.queryDate;
			this.listForm.queryDate = this.queryDate;

			if (this.$route.query.companyId) {
				this.companyId = this.$route.query.companyId;
			}
			this.getNumData();

		},
		methods: {
			getGreenCodeColor(healthyCode) {
				var healthyCode = healthyCode || '11';
				var color = {
					"00": '#09ae47',
					"01": '#e5aa37',
					"10": '#fe616c',
					"11": '#C0C0C0'
				}
				return color[healthyCode];
			},
			getNumData() {
				this.isLoading = true;
				API_Health.healthShowNumData(this.detailForm).then(response => {
					this.isLoading = false;

					this.detail = response;

					//访问总人数
					this.recordsTotal = response.checkedVisitorNum;

					//获取列表数据
					this.getList();
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//下拉事件
			handleScrool() {
				if (isReachBottom()) {
					console.log('到达底部')
					if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
						this.getList();
					} else {
						return;
					}
				}
			},
			//item切换事件
			changeItem(type) {
				this.nowItem = type;
				this.listForm.type = type;
				this.listForm.pageIndex = 1;
				this.getList();
			},
			//排序
			vistorList(list) {
				var vtindex = 0;
				for (var index = 0; index < list.length; index++) {
					if (list[index]['person'] == undefined) {
						var voindex = this.recordsTotal - vtindex;
						vtindex++;
						list[index]['personName'] = list[index]['matchStatus'] != '2' ? list[index]['personName'] : '访客' + voindex;
						list[index]['isVistor'] = true;
					} else {
						list[index]['personName'] = list[index]['person']['name'];
						list[index]['isVistor'] = false;
					}
					list[index]['faceImage'] = list[index]['faceImage'] ? list[index]['faceImage'] : 'img/wu.jpg';
				}
				return list;
			},
			goto(id) {

				this.$router.push({
					name: 'HouseKeeperControlHealthWorkerTemperature',
					query: {
						id: id
					}
				})
			},
			//提交
			getList() {
				this.isLoading = true;
				API_Health.healthShowPicData(this.listForm).then(response => {
					this.isLoading = false;

					if (this.listForm.pageIndex == 1) {
						this.recordList = response.data; // 数据数组
						this.listForm.pageIndex = response.pageNumber; //当前页数
						this.listForm.totalPage = response.totalPage; //总页数
					} else {
						this.recordList = [ // 当前数据与第二页数据合并到一个数组中
							...this.recordList,
							...response.data
						];
					}
					this.detectedNum = response.detectedNum;
					this.listForm.pageIndex++;
					this.isLoading = false;

					//遍历排序重置
					this.recordList = this.vistorList(this.recordList);
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			asynCallBack() {

			},
		},
		mounted() {
			//监控下拉加载事件
			var _this = this;
			//document.getElementById('scroll1').addEventListener('scroll', _this.handleScrool);
			window.addEventListener('scroll', _this.handleScrool);

			//定时刷新
			this.intervalId = setInterval(function() {
				_this.listForm.pageIndex = 1

				//获取详情数据
				_this.getNumData();

			}, 30 * 1000);

		},
		destroyed() {
			//销毁监听事件
			var _this = this;
			if (this.intervalId) {
				clearInterval(this.intervalId)
			}
			window.removeEventListener('scroll', _this.handleScrool);
		},
		computed: {

		}
	}
</script>

<style scoped src="$project/assets/css/sczpfyy.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style scoped src="$project/assets/css/wallfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>
