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

		<div class="mui-content">
			<div class="fyy-temper-date">
				<a @click="selectStartDate" class="mui-col-xs-5" v-text="dataForm.startTime"></a>
				<span class="mui-col-xs-2">至</span>
				<a @click="selectEndDate" class="mui-col-xs-5" v-text="dataForm.endTime"></a>
			</div>
			<ul class="mui-table-view mui-grid-view mui-grid-9 vongi-statistics">
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<div class="vongi-statistics-body">
						<span class="mui-icon mui-icon-home iconfont icon-qiyegongchangjianzhu"></span>
						<div class="mui-media-body">异常数量</div>
						<div class="mui-media-body mui-h3 color4fc5f7" v-text="companyTotalCount"> </div>
					</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<div class="vongi-statistics-body">
						<span class="mui-icon mui-icon-home iconfont icon-ziyuan"></span>
						<div class="mui-media-body">异常人数</div>
						<div class="mui-media-body mui-h3 colorfe616c" v-text="personTotalCount"> </div>
					</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<div class="vongi-statistics-body">
						<span class="mui-icon mui-icon-home iconfont icon-renshu"></span>
						<div class="mui-media-body">未测人员</div>
						<div class="mui-media-body mui-h3 colorf8b155" v-text="undetectedCount"> </div>
					</div>
				</li>
			</ul>
			<div class="mui-content-padded vongi-yctj-list">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" @touchend="setNowOpen(1)">异常单位列表</a>
						<ul class="mui-table-view mui-table-view-chevron">

							<li class="mui-table-view-cell mui-media" v-for="(item,index) in companyList">
								<router-link :to="{name: 'HouseKeeperControlHealthAbnormalRecord', query: {companyId: item.id,companyName:doEscape(item.name),filter:1,queryDate:item.date}}"
								 class="mui-navigate-right">
									<div class="mui-media-body">
										{{item.name}}
										<h4 class='mui-pull-right'><span class="colorfe616c" v-text="item.personCount"></span>人</h4>
									</div>
								</router-link>
							</li>

						</ul>
					</li>
				</ul>
			</div>
			<div class="mui-content-padded vongi-yctj-list">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" @touchend="setNowOpen(2)">未检测员工列表</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell" v-for="(item,index) in personList">
								<router-link :to="{name: 'CommonHealthCert', query: {personId: item.id}}" class="mui-navigate-right">
									{{item.name}}<span class="iconfont icon-erweima1 color55f868" :style="'color:'+getGreenCodeColor(item['healthyCode'])"></span>
								</router-link>
							</li>

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

	</div>
</template>

<script>
	require('$project/assets/js/mui.picker.min.js');
	import * as API_Health from '@/apis/Master/health'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import isReachBottom from '$project/utils/isReachBottom'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		currentTimeStamp,
		parseUnixTime,
		beforeTimeStamp
	} from '$project/utils'
	export default {
		name: 'MasterHealthAbnormalStatistics',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: "异常统计",
				isLoading: false,
				dataForm: {
					startTime: '',
					endTime: '',
				},
				personTotalCount: 0,
				companyTotalCount: 0,
				undetectedCount: 0,
				companyList: [],
				personList: [],
				personListForm: {
					pageIndex: 1,
					pageSize: 20,
					startTime: '',
					totalPage: 1,
					endTime: 0
				},
				nowOpen: 0,
			};
		},
		created() {
			this.queryDate = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');

			//定义当前日期范围
			if (this.$store.state.control_abnormal_statistics_startTime) {
				this.dataForm.startTime = this.$store.state.control_abnormal_statistics_startTime;
			} else {
				this.dataForm.startTime = parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
				this.$store.commit('setControlAbnormalStatisticsStartTime', this.dataForm.startTime);
				this.personListForm.startTime = parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
			}

			if (this.$store.state.control_abnormal_statistics_endTime) {
				this.dataForm.endTime = this.$store.state.control_abnormal_statistics_endTime;
			} else {
				this.dataForm.endTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
				this.$store.commit('setControlAbnormalStatisticsEndTime', this.dataForm.endTime);
				this.personListForm.endTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
			}

			//this.personListForm.startTime = parseUnixTime(beforeTimeStamp(7), '{y}-{m}-{d}');
			//this.personListForm.endTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');

		},
		methods: {
			asynCallBack() {},
			setNowOpen(val) {
				this.nowOpen = val;
				console.log('当前' + this.nowOpen);
			},
			//选择起始日期
			selectStartDate() {
				var _this = this;
				var picker = new mui.DtPicker({
					"type": "date",
					"beginYear": 2020,
					"endYear": 2040,
					"endDate": new Date(),
					"value": _this.dataForm.startTime
				});
				picker.show(function(rs) {
					_this.dataForm.startTime = rs.text;
					_this.$store.commit('setControlAbnormalStatisticsStartTime', _this.dataForm.startTime);
					_this.getUnusalStatistic();
					picker.dispose();
				});
			},
			//选择结束日期
			selectEndDate() {
				var _this = this;
				var beginDate = new Date(_this.dataForm.startTime);
				beginDate.setDate(beginDate.getDate());
				var endDate = new Date();
				endDate.setDate(endDate.getDate());
				var picker = new mui.DtPicker({
					"type": "date",
					"beginYear": 2020,
					"beginDate": beginDate,
					"endDate": endDate,
					"value": _this.dataForm.endTime
				});
				picker.show(function(rs) {
					_this.dataForm.endTime = rs.text;
					_this.$store.commit('setControlAbnormalStatisticsEndTime', _this.dataForm.endTime);
					_this.getUnusalStatistic();
					_this.getPersonList();
					picker.dispose();
				});
			},
			//获取统计数据
			getUnusalStatistic() {
				this.isLoading = true;
				API_Health.getAbnormalStatistics(this.dataForm).then(response => {
					this.isLoading = false;

					this.personTotalCount = response.personTotalCount;
					this.companyTotalCount = response.companyTotalCount;
					this.undetectedCount = response.undetectedCount;
					this.companyList = response.list;

				}).catch(error => {
					this.isLoading = false;
					this.mui.toast(error);
				});
			},
			//获取未检测人员列表
			getPersonList() {
				this.isLoading = true;
				API_Health.getUndetectedPersonList(this.personListForm).then(response => {
					this.isLoading = false;

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

				}).catch(error => {
					this.isLoading = false;
					this.mui.toast(error);
				});
			},
			//下拉事件
			handleScrool() {
				//console.log(window.screen.height + '-' + document.body.scrollTop + '-' + document.body.clientHeight)
				if (isReachBottom()) {
					console.log('到达底部' + this.nowOpen)
					if (this.nowOpen == 2 && this.personListForm.pageIndex <= this.personListForm.totalPage && this.isLoading == false) {
						this.getPersonList();
					} else {
						return;
					}
				}
			},
			doEscape(str) {
				return escape(str);
			},

			//获取健康码颜色值
			getGreenCodeColor(healthyCode) {
				var healthyCode = healthyCode || '11';
				var color = {
					"00": '#09ae47',
					"01": '#e5aa37',
					"10": '#fe616c',
					"11": '#C0C0C0'
				}
				return color[healthyCode];
			}
		},
		mounted() {
			//显示数据
			this.getUnusalStatistic();
			//获取未检测人员列表
			this.getPersonList();
			//监控下拉加载事件
			var _this = this;
			window.addEventListener('scroll', _this.handleScrool);
		},
		destroyed() {
			//销毁监听事件
			var _this = this;
			window.removeEventListener('scroll', _this.handleScrool);
		},
		watch: {
			'dataForm.startTime': {
				handler(newValue) {
					this.personListForm.startTime = newValue;
				},
				immediate: true,
				deep: true
			},
			'dataForm.endTime': {
				handler(newValue) {
					this.personListForm.endTime = newValue;
				},
				immediate: true,
				deep: true
			}
		}
	};
</script>
<style scoped src="$project/assets/css/sczpfyy.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style src="$project/assets/css/mui.picker.min.css"></style>

<style>
</style>
