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

		<div class="mui-content fyy-wall">
			<div id="slider" class="mui-slider mui-fullscreen fyy-slider vongi-fkwall">
				<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=='1'?'mui-active':''" @click="changeItem('1')" style="width:36%">
							正常记录
						</a>
						<a class="mui-control-item" :class=" nowItem=='2'?'mui-active':''" @click="changeItem('2')" 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.matchStatus!=2" :class="item.temperature>maxTemperature?'colorfe616c':'color55f868'"></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>
		<NullList :remark="'暂无访客测温记录'" v-if="!recordList.length"></NullList>

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

	</div>
</template>


<script>
	import * as API_Health from '@/apis/Master/health'
	import NullList from '$project/components/NullList.vue'
	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: 'MasterHealthGuestTemperature',
		components: {
			Common,
			Loading,
			TopHeader,NullList
		},
		data() {
			return {
				pageTitle: '访客测温',

				isLoading: false,

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

				},
				listForm: {
					pageIndex: 1,
					pageSize: 15,
					queryDate: '',
					filter: '',
					totalPage: 1,
					type: 'visitor'
				},
				//总访客数
				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.getList();

		},
		methods: {


			//下拉事件
			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.filter = 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.getList();

			}, 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>
