<template>
	<view>
		<view class="container"  >
			 <view class="banner-box">
			 	<image   src="/static/imgs/visitor.png" mode=""></image>
			 	<!-- <image v-if="currentTabIndex == 4" src="/static/imgs/visitor.png" mode=""></image> -->
			 </view>
			<view class="main">
				<view class="tab-box">
					<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''" @click="currentTabIndex = 0">出入统计</view>
					<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''" @click="currentTabIndex = 1">统计明细</view>
					<view class="tab-item" :class="currentTabIndex == 2 ? 'active_tab' : ''" @click="currentTabIndex = 2">通行记录</view>
				</view>
					<!-- 访客统计-->
					<view class="reservation-box" style="background-color: #fff;" v-if="currentTabIndex == 0">
						 <view class="form-item searchv">
							<picker class="time " mode="date"  @change="bindDateChange">
								<view class="">{{seachStartdate}}</view>
							 </picker>
							<text class="timecenter">至</text>
							<picker class="time " mode="date"  @change="seachEnddateChange">
								<view class="">{{seachEnddate}}</view>
							</picker>
							 <view class="search" style="height: 60upx;font-size: 26upx;margin-top: 7upx;" @click="searchYjList">搜索</view> 
							<!-- <image style="width: 5vh;height: 5vh;margin-left: 1vh;" @click="search" src="/static/icons/seach.png" mode=""></image>
							 -->
						 </view>
						 <view class="list-box" v-if="visitTj.length > 0">
							 <view class="form-item" style="width: 100%;margin: 10px 0px 10px 0px;">
									<view class="visitcon w15">序号</view>
									<view class="visitcon w25">部门</view>
									<view class="visitcon w15">已授权</view>
									<view class="visitcon w15">未授权</view>
									<view class="visitcon w15">总访客</view>
									<view class="visitcon w15">内部</view>
							 </view>
							 <view  style="padding: 10px 5px 10px 5px;border-top:1px solid #d2d2d2;align-items: center;display: flex;" class="form-item" v-for="(item, index) in visitTj" :key="index" >
								
								<view class="visitcon w15">{{ index+1 }}</view>
								<view class="visitcon w25">{{ item.name }}</view>
								<view class="visitconContent w15" @click="searchContent(index,1)">{{ item.ty }}</view>
								<view class="visitconContent w15" @click="searchContent(index,2)">{{ item.total - item.ty }}</view>
								<view class="visitconContent w15" @click="searchContent(index,0)">{{ item.total }}</view>
								<view class="visitconContent w15" @click="searchInsideMsgList(index,0)" >{{ item.usertotal }}</view>
							 </view>
						 </view>
						<content-none v-else :padTop="20" style="padding-bottom: 20vh;"></content-none>
					</view>

					<!-- 预约记录列表 -->
					<view v-else-if ="currentTabIndex == 1" style="background-color: #fff;height: auto;">
						<view class="form-item searchv" >
							<picker class="time " mode="date"  @change="bindMsgDateChange">
								<view class="">{{seachListStartdate}}</view>
									 </picker>
										<text class="timecenter">至</text>
									<picker class="time " mode="date"  @change="seachMsgEnddateChange">
										<view class="">{{seachListEnddate}}</view>
									</picker>
							 
						</view>
						<view class="form-item searchv"  style="padding:0 20upx; !important;display: flex !important;  align-items: center !important;">
							<view class="ipt-box select time" style="width: 300upx;">
								<picker class="picker" v-if="deptList.length > 0" :range="deptList" @change="changeRerson" range-key="name">
									<view>{{ deptList[RersonIndex] }}</view>
								</picker>
							</view>
							<view class="ipt-box select time" style="width: 150upx;margin-left: 2vh; ">
								<picker class="picker" v-if="visitState.length > 0" :range="visitState" @change="visitState2" range-key="name">
									<view>{{ visitState[visitStateIndex] }}</view>
								</picker>
							</view>
							<view class="search" style="width:160upx;height: 60upx;font-size: 26upx;margin-top: 7upx;" @click="searchVisitList">搜索</view>
						</view>
						<view class="list-box" v-if="visitlist.length > 0">
							<view class="list-item" v-for="(item,index) in visitlist" :key="index"
							@click='toDetail("/pages/visitStatistics/visitorAppointment?id="+item.detail_id+"&role=2&userId="+userId)'>
								<view class="title">
									<text class="line"></text>
									<text class="text">访客预约</text>
									<text class="status2" v-if="item.first_status==0">待审核</text>
									<text class="status" v-if="item.first_status==1">已同意</text>
									<text class="status1" v-if="item.first_status==2">已拒绝</text>
									<text class="status1" v-if="item.first_status==3">待本人确认</text>
									<text class="status1" v-if="item.first_status==4">已取消</text>
								</view>
								<view class="content">
									<view class="info-item">
										<view class="fl-text">被访人:</view>
										<view class="fr-text">{{item.visited_person_name}}</view>
									</view>
									<view class="info-item">
										<view class="fl-text">被访时间:</view>
										<view class="fr-text">{{item.visit_start_time}}</view>
									</view>
									<view class="info-item">
										<view class="fl-text">申请人:</view>
										<view class="fr-text">{{item.visitor_name}}</view>
									</view>
									<view class="info-item">
										<view class="fl-text">申请时间:</view>
										<view class="fr-text">{{item.apply_time}}</view>
									</view>
									<!-- <view class="comment-btn" @click.stop="del(item.detail_id,1,index)">删除</view> -->
								</view>
							</view>
						</view>
						<content-none v-else :padTop="20" style="padding-bottom: 20vh;"></content-none>
						<load-more  v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more> 
					</view>
					<!-- 内部员工通行记录 -->
					<view v-else-if="currentTabIndex == 2" style="background-color: #fff;height: auto;">
						<view class="form-item searchv" >
							<picker class="time " mode="date"  @change="seachInsideStartdateChange">
								<view class="">{{seachInsideListStartdate}}</view>
									 </picker>
										<text class="timecenter">至</text>
									<picker class="time " mode="date"  @change="seachInsideEnddateChange">
										<view class="">{{seachInsideListEnddate}}</view>
									</picker>
						</view>
						<view class="form-item searchv" style="padding:0 20upx; !important;display: flex !important;  align-items: center !important;">
							<view class="ipt-box select time" style="width: 300upx;margin-left: 85upx;">
								<picker class="picker" v-if="deptList.length > 0" :range="deptList" @change="changeInsideRerson" range-key="name">
									<view>{{ deptList[insideDepIndex] }}</view>
								</picker>
							</view>
							<view class="search" style="width:160upx;height: 60upx;font-size: 26upx;margin-top: 7upx;" @click="searchInsideList">搜索</view>
						</view>
						<view class="list-box" v-if="insideList.length > 0">
							<view class="form-item" style="width: 100%;margin: 10px 0px 10px 0px;">
								<view class="visitcon w10">序号</view>
								<view class="visitcon w15">姓名</view>
								<view class="visitcon w25">部门</view>
								<view class="visitcon w20">位置</view>
								<view class="visitcon w30">通行时间</view> 
							</view>
							 <view  style="padding: 10px 5px 10px 5px;border-top:1px solid #d2d2d2;align-items: center;display: flex;" class="form-item" v-for="(item, index) in insideList" :key="index" >
								<view class="visitcon w10">{{ index+1 }}</view>
								<view class="visitcon w15">{{ item.userName }}</view>
								<view class="visitcon w25">{{ item.dpName }}</view>
								<view class="visitcon w20">{{ item.address }}</view>
								<view class="visitcon w30">{{ item.time }}</view>
							</view>
						</view>
						<content-none v-else :padTop="20" style="padding-bottom: 20vh;"></content-none>
						<load-more style="display: flex;" v-if="currentTabIndex == 2" :loadingType="insideloadingType" :contentText="contentText"></load-more>
					</view>
				
			</view>
		</view>
	</view>
</template>

<script>
import { getDate, alertTip, callbackRequest, getStorage, regPhone, formatDate } from '@/common/util.js';
import { getAllDept, initWashCar, applyWashCar, getMyWashCarList,greenVisitorStatistics ,greenVisitorStatisticsDetailed,greenGetInsideList} from '@/common/api.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
import datetimePicker from '@/components/dateTime.vue';
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';  
let currentTime = new Date().getTime();
let millisecond = 24 * 7 * 60 * 60 * 1000;
export default {
	data() {
		return {
			seachStartdate:this.getDay(),
			seachEnddate:this.getDay(),
			seachListStartdate:this.getDay(),
			seachListEnddate:this.getDay(),
			seachInsideListStartdate:this.getDay(),
			seachInsideListEnddate:this.getDay(),
			visitStateIndex:0,
			visitlist:[],
			visitTj: [],
			insideList:[
			 
			],
			// userId:"9c5146f0ab024c02a3cef933f609bc74",
			insideDepIndex:0,
			visitState:['全部', '已授权', '未授权'], //状态列表
			page: 1,
			pageSize: 10,
			loadingType: 0, //0-loading前；1-loading中；2-没有更多了
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			insideloadingType:0,
			userId: getStorage('userInfo').id,
			currentTabIndex: 0,
			selectedDate: this.getTime(),
			chooseDateIndex: 0, //选中的日期
			times: [],
			chooseTimeIndex: null,
			deptList: ["请选择"], //部门列表
			RersonIndex: 0
			
		 
		 };
	},
	components: {
		loadMore,
		contentNone,
		datetimePicker
	},
	onLoad(option) {
		this.getRerson();
		console.log('--'+this.userId);
		this.currentTabIndex = option.currentTabIndex || 0;
		// 部门
		// this.getDepartment();
		
		if (this.currentTabIndex == 0) {
			this.initData();
		}
	},
	watch: {
		currentTabIndex: function(newVal, oldVal) {
			if (newVal == 1) {
				this.page = 1;
				this.loadingType = 0;
				this.insideloadingType = 0;
				// this.getReservationRecord();
			} else {
				this.initData();
			}
		}
	},
	methods: {
		open() {
			console.log(1111111);
			this.$refs.calendar.open();
		},
		//出入统计页面方法
		// 统计页面搜索方法
		searchYjList(){
			console.log(this.seachStartdate+"--------"+this.seachEnddate);
			var oDate1 = new Date(this.seachStartdate);
			var oDate2 = new Date(this.seachEnddate);
			if(oDate1 > oDate2){
			      alertTip('开始时间需大于结束时间!');
			} else {
			     this.getRerson();
			}
			
		},
		//点击跳转到统计明细方法
		searchContent(index,type){
			this.page=1;
			console.log(index+"--------"+type+"==-===="+this.visitTj[index].name);
			
			this.currentTabIndex = 1;//改变标签
			this.visitStateIndex = type;//赋值状态
			
			if(this.visitTj[index].name == "合计"){
				this.RersonIndex = 0;
			}else{
				// 获取部门名称下标改变默认值
				for(var i = 0;this.deptList.length;i++){
					if(this.deptList[i] == this.visitTj[index].name){
						this.RersonIndex = i;
						break;
					}
				}
			}
			this.seachListStartdate = this.seachStartdate ;
			this.seachListEnddate = this.seachEnddate,
			this.getVisitMsgList(this.deptList[this.RersonIndex],type);
			
		},//点击跳转到通行记录方法
		searchInsideMsgList(index,type){
			this.insidepage=1;
			this.currentTabIndex = 2;
			this.insideloadingType= 0;
			// this.visitStateIndex = type;
			if(this.visitTj[index].name == "合计"){
				this.insideDepIndex = 0;
			}else{
				for(var i = 0;this.deptList.length;i++){
					if(this.deptList[i] == this.visitTj[index].name){
						this.insideDepIndex = i;
						break;
					}
				}
			}
			this.seachInsideListStartdate = this.seachStartdate ;
			this.seachInsideListEnddate = this.seachEnddate,
			this.getInsideMsgList(this.deptList[this.insideDepIndex]);
			
		},
		bindDateChange: function(e) {
			this.seachStartdate = e.target.value
		},
		seachEnddateChange: function(e) {
		 	this.seachEnddate = e.target.value
		},
		//统计明细页面方法
		searchVisitList(){
			this.page=1;
			this.loadingType = 0;
			console.log(this.seachStartdate+"--------"+this.seachEnddate);
			if(this.visitState[this.visitStateIndex] == "全部"){
				this.visitStateIndex = 0;
			}else if(this.visitState[this.visitStateIndex] == "已授权"){
				this.visitStateIndex = 1;
			}else if(this.visitState[this.visitStateIndex] == "未授权"){
				this.visitStateIndex = 2;
			}
			var oDate1 = new Date(this.seachListStartdate);
			var oDate2 = new Date(this.seachListEnddate);
			if(oDate1 > oDate2){
			      alertTip('开始时间需大于结束时间!');
			} else {
			    this.getVisitMsgList(this.deptList[this.RersonIndex],this.visitStateIndex);
			}
			
		},
		getVisitMsgList(dep,type){
			let data = {
				method: greenVisitorStatisticsDetailed,
				data: {"page":this.page,
				"startDate":this.seachListStartdate,
				"endDate":this.seachListEnddate,
				"dep":dep,
				"userId":this.userId,
				"type":type}
			};
			callbackRequest(data).then(res => {
				if (res.data.returnCode == 1) {
					if(this.page == 1){
						this.visitlist = res.data.returnData;	
					}else {
						if(res.data.returnData.length > 0){
							this.visitlist = [...this.visitlist,...res.data.returnData];
							this.loadingType = 0;
						}else {
							this.loadingType = 2;
						}
					}
					
				}
			});
		},
		
		bindMsgDateChange: function(e) {
			this.seachListStartdate = e.target.value
		},
		seachMsgEnddateChange: function(e) {
			this.seachListEnddate = e.target.value
		},
		/**
		 * 通行记录页面方法
		 */ 
			//通行记录搜索方法
		searchInsideList(){
			this.insideloadingType= 0;
			this.insidepage=1;
			this.currentTabIndex = 2;
			var oDate1 = new Date(this.seachInsideListStartdate);
			var oDate2 = new Date(this.seachInsideListEnddate);
			if(oDate1 > oDate2){
			      alertTip('开始时间需大于结束时间!');
			} else {
			    this.getInsideMsgList(this.deptList[this.insideDepIndex]);
			}
			
		},
		// 
		getInsideMsgList(depname){
			let data = {
				method: greenGetInsideList,
				data: {"page":this.insidepage,
				"startDate":this.seachInsideListStartdate,
				"endDate":this.seachInsideListEnddate,
				"userId":this.userId,
				"dep":depname}
			};
			callbackRequest(data).then(res => {
				if (res.data.returnCode == 1) {
					if(this.insidepage == 1){
						this.insideList = res.data.returnData;	
					}else {
						if(res.data.returnData.length > 0){
							this.insideList = [...this.insideList,...res.data.returnData];
							this.insideloadingType = 0;
						}else {
							this.insideloadingType = 2;
						}
					}
					
				}
			});
		},
		seachInsideStartdateChange: function(e) {
			this.seachInsideListStartdate = e.target.value
		},seachInsideEnddateChange: function(e) {
			this.seachInsideListEnddate = e.target.value
		},
		// 工具方法
		getTime() {
			var date1 = new Date();
			var year = date1.getFullYear();
			var month = date1.getMonth() + 1;
			var day = date1.getDate();
			var hours = date1.getHours();
			var minutes = date1.getMinutes();
			var seconds = date1.getSeconds();
			// return year+"年"+month+"月"+day+"日"+hours+":"+minutes+":"+seconds
			return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
		},
		
	
		getDay() {
			var date1 = new Date();
			var year = date1.getFullYear();
			var month = date1.getMonth() + 1;
			if(month<10){
				month = "0"+month;
			}
			var day = date1.getDate();
			// if(day<10){
			// 	day = "0"+day;
			// }
			return year + '-' + month + '-' + day;
		},
		initData() {
		 
		},
		 

		//获取访客统计
		getRerson() {
			let data = {
				method: greenVisitorStatistics,
				data: {"userId":this.userId,
				"startDate":this.seachStartdate,
				"endDate":this.seachEnddate}
			};
			callbackRequest(data).then(res => {
				if (res.data.returnCode == 1) {
					this.visitTj = res.data.returnData.visitlist;
					if(res.data.returnData.depList.length>0){
						this.deptList = res.data.returnData.depList;
					}
					
				}
			});
		},
		toDetail(url){
			uni.navigateTo({
				url
			})
		},
	
		// //获取ton记录列表
		// getReservationRecord() {
		// 	let params = {
		// 		method: getMyWashCarList,
		// 		data: {
		// 			pageSize: this.pageSize,
		// 			pageNum: this.page,
		// 			userId: this.userId
		// 		}
		// 	};
			 
			 
		// },
		//选择日期
		switchTab(index) {
			this.chooseDateIndex = index;
			this.initData();
		},
		//选择部门
		changeDepartment(e) {
			this.departmentIndex = e.detail.value;
		},
		//选择出车事由
		changeRerson(b) {
			this.RersonIndex = b.detail.value;
		},changeInsideRerson(b){
			this.insideDepIndex = b.detail.value;
		},
		
		//选择访客状态
		visitState2(b) {
			this.visitStateIndex = b.detail.value;
		} 
	},
	onReachBottom() {
		
		if(this.currentTabIndex == 1){
			if (this.loadingType !== 0 || this.currentTabIndex != 1) {
				return;
			}
			this.loadingType = 1;
			this.page = this.page + 1;
			this.getVisitMsgList(this.deptList[this.RersonIndex],this.visitStateIndex);	
		}else if(this.currentTabIndex == 2){
			if (this.insideloadingType !== 0 || this.currentTabIndex != 2 ) {
				return;
			}
			this.insideloadingType = 1;
			this.insidepage = this.insidepage + 1;
			this.getInsideMsgList(this.deptList[this.insideDepIndex]);
		}
		
	}
};
</script>

<style lang="scss">
@import '@/static/css/common.scss';
.searchv{
	margin-top: 0upx;
	text-align: center;
}
.search{
	margin-top: 20upx;
	display:inline-block;
	background-color: #00C277;
	color: #fff;
	margin-left:2vh;
	font-size: 2vh;
	border-radius: 1vh;
	padding: 1vh 2vh 1vh 2vh;
}
.timecenter{
	font-size: 26upx; 
	margin-left: 10upx;
	margin-right: 10upx;
}
.time{
	margin-top: 10upx;
	font-size: 28upx; 
	display:inline-block;
	padding: 5px;
	border: 1px solid #c2c2c2;
}
.visitcon{
	 
	display:inline-block;
	text-align: center;
	font-size: 14px;
	 
}
.visitconContent{
	text-decoration:underline;
	display:inline-block;
	text-align: center;
	font-size: 14px;
	 
}
.w40{
	width: 40%; 
}
.w25{
	width: 25%; 
}
.w10{
	width: 10%; 
}
.w15{
	width: 15%; 
}
.w20{
	width: 20%; 
}
.w30{
	width: 30%; 
}
.w35{
	width: 35%; 
}
.w45{
	width: 45%; 
}

 .container{
 	position:relative;
 	overflow:hidden;
 	background: #f8f8f8;
 	min-height:100vh;
 	.banner-box{
 		width:100%;
 		height:240upx;
 		position:absolute;
 		top:0;
 		left:0;
 		image{
 			width:100%;
 			height:100%;
 		}
 	}
 	.main{
 		margin:172upx 40upx 0;
 		position:relative;
		 
 		z-index:10;
 		
 		.tab-box {
 			overflow: hidden;
 			border-radius: 10upx 10upx 0 0;
 			background: rgba(132, 149, 167, 0.8);
 			height: 70upx;
 		
 			.tab-item {
 				float: left;
 				height: 70upx;
 				width: 33.33%;
 				font-size: 30upx;
 				color: #e5f6ff;
 				text-align: center;
 				line-height: 70upx;
 			}
 		
 			.active_tab {
 				background: #fff;
 				color: #333;
 				border-radius: 10upx 10upx 0 0;
 				font-weight: bold;
 			}
 		}
 		.form-box{
 			padding:20upx 30upx 0upx;
 			margin-bottom: 20upx;
 			background: #fff;
 			.form-item{
 				overflow:hidden;
 				border-bottom:1px solid #eee;
 				padding:30upx 0;
 				.label{
 					float:left;
 					width:150upx;
 					font-size:28upx;
 					color:#333;
 					font-weight:bold;
 					line-height:50upx;
 				}
 				.ipt-box{
 					margin-left:160upx;
 					input{
 						width:100%;
 						height:50upx;
 						line-height:50upx;
 						font-size:26upx;
 						color:#666;
 					}
 					.pic{
 						width:60upx;
 						height:60upx;
 						line-height: 80upx;
 					}
 				}
 				.select{
 					.arrow{
 						float:right;
 						width:16upx;
 						height:29upx;
 						margin-top:10upx;
 					}
 					input{
 						width:70%;
 					}
 				}
 				.jian{
 					width: 50upx;
 					height:50upx;
 					margin-left: 280upx;
 				}
 				.select {
 					.arrow {
 						float: right;
 						width: 16upx;
 						height: 29upx;
 						margin-top: 10upx;
 					}
 				
 					.picker {
 						height: 50upx;
 						line-height: 50upx;
 						font-size: 26upx;
 						color: #666;
 					}
 				}
 			}
 			.sure-btn{
 				width:100%;
 				height:80upx;
 				font-size:28upx;
 				color:#fff;
 				text-align:center;
 				line-height:80upx;
 				border-radius:8upx;
 				background: #0066CC;
 				background:linear-gradient(to right, #ffc200,#ff9000);/*设置按钮为渐变颜色*/
 				margin-top:50upx;
 			}
 		}
 		.list-box{
 			.list-item{
 				background: #fff;
 				margin-bottom:10upx;
 				.title{
 					border-bottom:1px solid #eee;
 					padding:20upx 10upx;
 					overflow:hidden;
 					line-height:40upx;
 					.line{
 						display:inline-block;
 						width:10upx;
 						height:32upx;
 						background: $assistColor;
 						margin-top:4upx;
 					}
 					.text{
 						display:inline-block;
 						font-size:28upx;
 						color:#444;
 						font-weight:bold;
 						margin-left:10upx;
 						vertical-align:top;
 					}
 					.status{
 						font-size:26upx;
 						color:$assistColor;
 						float:right;
 					}
 					.status1{
 						font-size:26upx;
 						color:#5063c3;
 						float:right;
 					}
 					.status2{
 						font-size:26upx;
 						color:red;
 						float:right;
 					}
 				}
 				.content{
 					padding:10upx 20upx;
 					// padding:10upx 10upx 60upx 10upx;
 					.info-item{
 						overflow: hidden;
 						padding-bottom:10upx;
 						.fl-text{
 							float:left;
 							font-size:26upx;
 							color:#444;
 							font-weight:bold;
 							line-height:40upx;
 						}
 						.fr-text{
 							float:right;
 							font-size:26upx;
 							color:#666;
 							line-height:40upx;
 						}
 					}
 				}
 			}
 			.comment-btn {
 				float: right;
 				font-size: 24upx;
 				border-radius: 10upx;
 				color: #fff;
 				line-height: 50upx;
 				text-align: center;
 				min-width: 140upx;
 				background-color: #00c277;
 			}
 		}
 	}
 }
</style>
