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

		<div class="mui-content vongi-archives vongi-dktz-c">
			<div class="fyy-temper-date margin10">
				<a href="" class="mui-col-xs-4"  @click="selectDate" >{{curDate}}<span class="mui-icon mui-icon-arrowdown"></span></a>
				<a href="" class="mui-col-xs-4"  @click="selectIndexOf">{{selectedIndex==0?'上报情况':selectedType[selectedIndex]}}<span class="mui-icon mui-icon-arrowdown" ></span></a>
				<a href="" class="mui-col-xs-4"  @click="selectAddress">{{address==''?'打卡区域':addressType[address]}}<span class="mui-icon mui-icon-arrowdown" ></span></a>
			</div>
			<div class="vongi-clasadmin vongi-bagfff">
				<h4>健康码统计</h4>
				<div class="vongi-clasadmin-list">
					<div class="vongi-clasadmin-ma mui-col-xs-3" v-for="(item,index) in statList" :key="index" @click="goToCodeList(item.healthyCode)">
						<span :style="'color:'+getGreenCodeColor(item.healthyCode)" v-text="item.total">2953</span>
						<div class="mui-media-body" v-text="getCodeStatusName(item.healthyCode)">绿码</div>
					</div>
				</div>
				<div class="vongi-xzdw-search">
					<input type="search" placeholder="请输入姓名" v-model="setinput" @change="searchK">
					<span class="mui-icon mui-icon-search"></span>
				</div>
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell"  v-for="(item,index) in allList" :key="index">
					<a @click="viewDetail(item)" :class="item.upLoad?'mui-navigate-right':''">
						<div class="mui-pull-left flew-items">
							<div class="mui-media-object flew"><img   v-if="item.faceImageUrl!=null" :src="item.faceImageUrl + '?x-oss-process=image/resize,m_fill,w_64'" width="50" /></div>
							<div class="vongi-dktz-t">
								<h4 class='flew-items'>{{item.name}}<span class="mui-icon iconfont icon-erweima1  "  :style="'color:'+getGreenCodeColor(item.healthyCode)"></span></h4>
								<div class="mui-h6" v-if="countNum(item.countNum)">已连续上报{{item.countNum}}天</div>
							</div>
						</div>
						<div class="mui-pull-right flew-items">
							<template  v-if="item.address">
								<div class="mui-btn mui-btn-primary mui-btn-outlined vongi-dktz-bage " v-if="addressIf(item.address)" >市内</div>
								<div class="mui-btn  mui-btn-outlined vongi-dktz-bage mui-btn-yellow"  v-else >{{addressIf2(item.address)}}</div>
							</template>

							<span :class="item.upLoad?'color55f868':'colorfe616c'">{{item.upLoad?'已上报':'未上报'}}</span>
						</div>
					</a>
				</li>

			</ul>

		
		</div>



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

<script>
	require('$project/assets/js/mui.picker.min.js');
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'

	import {
		mapGetters,
		mapMutations
	} from 'vuex'

	import * as API_Health from '@/apis/Master/health'
	import isReachBottom from '$project/utils/isReachBottom'
	import {
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	export default {
		name: 'HealthTemperatureInfo',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '打卡台账',
				rightLink: {
					show: true,
					icon: 'icon-tongji',
					style: 'font-size:12px',
					title: '健康统计'
				},
				id: '',
				detail: [],
				curDate: '',

				isLoading: false,
				allList: [],
				allCount: 0,
				undoList: [],
				undoCount: 0,
				doneList: [],
				doneCount: 0,
				selectedIndex: 0,
                selectedType: ['全部','已上报','未上报'],
                addressType: ['市内','市外','省外'],
                address:'',
                pageIndex: 1,
				totalPage: 1,
				setinput: "",
				sortType: '1',
				statList: [],
				obj:{}
			}
		},
		created() {
			this.id = this.$route.query.id;
			if (this.$route.query.time) {
				this.curDate = this.$route.query.time;
			} else {
				this.curDate = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
			}
			if (this.$route.query.index) {
				this.selectedIndex = this.$route.query.index;
			}

		},

		methods: {
            addressIf(val){
                if(val.indexOf('湖北省荆州市')<0){
                    return false;
				}else{
                    return true;
				}
			},
            addressIf2(val){
                if(val.indexOf('湖北省')<0){
                     return '省外';
                }else{
                    return '市外';
                }
            },
            countNum(num){
              if(  this.curDate == parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')&&num ){
                  return true;
			  }else{
                  return false;
			  }

            },
			//跳转到健康码页面
			goToCodeList(healthyCode) {
				this.$router.push({
					name: 'MasterHealthCodeList',
					query: {
						healthyCode: healthyCode
					}
				})
			},
			asynCallBack() {},
			searchK() {

				this.queryList(true);
			},

			async queryList(isFirst) {
				//created 传trye, 其他传null
				if (isFirst) {

					this.pageIndex = 1;

					//  this.totalPageArr=[1,1,1]
					this.allList = [];


				}


				this.isLoading = true;


                this.pageList(this.selectedIndex, this.pageIndex).then(page => {
                    if(this.allCount==0){
                        this.allCount = page.recordsTotal;
                    }

                    if (this.pageIndex  == 1) {
                        this.allList = page.data;
                        this.totalPage = page.totalPage;
                    } else {
                        this.allList = [
                            ...this.allList,
                            ...page.data
                        ];
                    }

                    this.isLoading = false;

                    this.pageIndex++;
                });


				//this.pageIndex++;
			},
            selectIndexOf(){
                var picker = new mui.PopPicker();

                picker.setData([{
                    text: "全部（"+this.allCount+"）",
                    value: 0
                },
                    {
                        text: "已上报（"+this.obj.total+"）",
                        value: 1
                    },
                    {
                        text: "未上报（"+(this.allCount-this.obj.total)+"）",
                        value: 2
                    }
                ]);

                picker.show((selectItems) => {
                    this.selectedIndex = selectItems[0].value;
                    this.queryList(true);
                });
			},
            selectAddress(){
                var picker = new mui.PopPicker();

                picker.setData([{
                    text: "全部（"+this.allCount+"）",
                    value: ''
                },
                    {
                        text: "市内（"+this.obj.count1+"）",
                        value: '0'
                    },
                    {
                        text: "市外（"+(this.obj.count0-this.obj.count1)+"）",
                        value: '1'
                    },
                    {
                        text: "省外（"+(this.obj.total-this.obj.count0)+"）",
                        value: '2'
                    }
                ]);

                picker.show((selectItems) => {
                    this.address = selectItems[0].value;
                    this.queryList(true);
                });
			},
			selectDate() {
				var _this = this;
				var dtPicker = new mui.DtPicker({
					type: 'date',
					"endDate": new Date(),
					"value": _this.curDate
				});
				// dtPicker.setSelectedValue(_this.curDate)

				dtPicker.show((selectItems) => {
					var year = selectItems.y.value;
					var month = selectItems.m.value;
					var day = selectItems.d.value;

					this.curDate = year + "-" + month + "-" + day;

					this.queryList(true);
                    this.query().then(page => {
                        console.log(page)
                        this.obj=page;
                    });
				});
			},

			pageList(status, pageIndex) {
				return API_Health.workerPageList({
					setinput: this.setinput,
					companyId: this.person_data.companyId,
					queryDate: this.curDate,
					status: status,
                    address: this.address,
					pageIndex: pageIndex,
					pageSize: 50
					//sortType:this.sortType,
				});
			},
            query() {
                return API_Health.query({
                    companyId: this.person_data.companyId,
                    queryDate: this.curDate,
                    //sortType:this.sortType,
                });
            },
			//获取绿码统计数据
			getHealthyCodeStat() {
				this.isLoading = true;
				API_Health.getHealthyCodeStat(this.person_data.companyId, '3').then(response => {
					this.isLoading = false;
					this.statList = response;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			viewDetail(item) {
				if (item.upLoad) {
					this.$router.push({
						name: 'MasterHealthWorkerInfo',
						query: {
							id: item.personHealthLedgerId
						}
					})
				}
			},
			//获取健康码颜色值
			getGreenCodeColor(healthyCode) {
				var healthyCode = healthyCode || '11';
				var color = {
					"00": '#09ae47',
					"01": '#e5aa37',
					"10": '#fe616c',
					"11": '#C0C0C0'
				}
				return color[healthyCode];
			},

			//判断状态
			getCodeStatusName(code) {
				if (code == '00') {
					return '绿码';
				} else if (code == '01') {
					return '黄码';
				} else if (code == '10') {
					return '红码';
				} else if (code == '11') {
					return '灰码';
				} else {
					return '灰码';
				}
			},
			//下拉事件
			handleScrool() {
				//console.log(window.screen.height + '-' + document.body.scrollTop + '-' + document.body.clientHeight)
				//if ((window.screen.height + document.body.scrollTop) > (document.body.clientHeight)) {
				if (isReachBottom()) {
					console.log('到达底部')
					if (this.pageIndex  <= this.totalPage  && this.isLoading == false) {
						this.queryList(false);
					} else {
						return;
					}
				} else {
					this.loadAll = true;
					return;
				}
			},

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		},
		mounted() {
			var _this = this;
			this.queryList(true);
			 this.query().then(page => {
                	console.log(page)
                 this.obj=page;
             });

			//获取绿码统计数据
			this.getHealthyCodeStat();
			window.addEventListener('scroll', _this.handleScrool);
		},
		destroyed() {
			//销毁监听事件
			var _this = this;
			window.removeEventListener('scroll', _this.handleScrool);
		}

	}
</script>

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

<style>
</style>
