<template>
	<view>
		<view class="container">
			<view class="banner-box">
				<image src="/static/imgs/ycsq.jpg" 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="visitTj1.length > 0">
						<view class="form-item" style="width: 100%;margin: 10px 0px 10px 0px;">
							<view class="visitcon w25">类型</view>
							<view class="visitcon w25">进</view>
							<view class="visitcon w25">出</view>
							<view class="visitcon w25">超时</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 w25">{{ item.car_type }}</view>
							<view class="visitconContent w25" @click="gocurrentTabIndex2(item.car_type,'1','')">{{ item.innum }}</view>
							<view class="visitconContent w25" @click="gocurrentTabIndex2(item.car_type,'2','')">{{ item.outnum }}</view>
							<view class="visitconContent w25" @click="gocurrentTabIndex2(item.car_type,'','1')">{{ item.overtimenum }}</view>
						</view>
					</view>
					<content-none v-else :padTop="20" style="padding-bottom: 20vh;"></content-none>
				</view>

				<!-- 统计明细列表 -->
				<view v-else-if="currentTabIndex == 1" >
					<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 80upx; !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="timeoutList.length > 0" :range="timeoutList" @change="timeoutListChange" range-key="timeoutIndex">
								<view>{{ timeoutList[timeoutIndex] }}</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="visitStateIndex">
								<view>{{ visitState[visitStateIndex] }}</view>
							</picker>
						</view>
						<view class="ipt-box select time" style="width: 150upx;margin-left: 2vh; ">
							<picker class="picker"  :range="carType" @change="carTypeChange" range-key="carTypeIndex">
								<view>{{ carType[carTypeIndex] }}</view>
							</picker>
						</view>
						<!-- <view class="search" style="width:160upx;height: 60upx;font-size: 26upx;margin-top: 7upx;" @click="getParkRecordList">搜索</view> -->
					</view>
					<view class="list-box" v-if="visitlist.length > 0">
						<view
							class="list-item"
							v-for="(item, index) in visitlist"
							:key="index"
						>
							<view class="title">
								<text class="line"></text>
								<text class="text">{{ item.car_num }} <text style="color: red;font-size: 26upx;padding-left: 10upx;" v-if="item.overtime == 1">超时</text></text>
								<text class="status2" v-if="item.in_out == '0'">进</text>
								<text class="status" v-if="item.in_out == '1'">出</text>
							</view>
							<view class="content">
								<view class="info-item">
									<view class="fl-text">姓名:</view>
									<view class="fr-text">{{ item.carowner_name }}</view>
								</view>
								<view class="info-item">
									<view class="fl-text">类型:</view>
									<view class="fr-text">{{ item.car_type }}</view>
								</view>
								<!-- <view class="info-item">
									<view class="fl-text">是否超时:</view>
									<view class="fr-text red" v-if="item.isTimeOut == 1">超时</view>
									<view class="fr-text" v-else>未超时</view>
								</view> -->
								<view class="info-item">
									<view class="fl-text">通行时间:</view>
									<view class="fr-text">{{ item.gmtcreated }}</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>
		</view>
	</view>
</template>

<script>
import { getDate, alertTip, callbackRequest, getStorage, regPhone, formatDate } from '@/common/util.js';
import {getParkRecordList,getParkRecordCount } 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(),
			visitlist:[],
			visitTj: [],
			visitTj1: [
				{ name: '公车', jin: 20, chu: 10 ,timeout:3}, 
				{ name: '员工车辆', jin: 15, chu: 15 ,timeout:3}, 
				{ name: '外围车辆', jin: 1, chu: 1 ,timeout:0},
				{ name: '外部车辆', jin: 1, chu: 1 ,timeout:0},
				],
			visitState: ['进出类型', '进', '出'], //状态列表
			visitStateIndex:0,
			timeoutList:['是否超时', '超时', '未超时'],
			timeoutIndex:0,
			carType:['车辆类型','公车','员工车辆','外围车辆','外部车辆'],
			carTypeIndex:0,
			page: 1,
			pageSize: 10,
			loadingType: 0, //0-loading前；1-loading中；2-没有更多了
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			insideloadingType: 0,
			//userId: getStorage('userInfo').id,
			currentTabIndex: 0,
			overTime:"",//0未超时，1超时
			inOrOut:"",//0进1出
		};
	},
	components: {
		loadMore,
		contentNone,
		datetimePicker
	},
	onLoad(option) {
		this.currentTabIndex = option.currentTabIndex || 0;

		if (this.currentTabIndex == 1) {
			this.getParkRecordList();
		}else{
			this.getParkRecordCount();
		}
	},
	watch: {
		currentTabIndex: function(newVal, oldVal) {
			if (newVal == 1) {
				this.page = 1;
				this.loadingType = 0;
				this.insideloadingType = 0;
				this.getParkRecordList();
			} else {
				this.getParkRecordCount();
				this.seachListStartdate=this.getDay();
				this.seachListEnddate= this.getDay();
				this.visitStateIndex=0;
				this.timeoutIndex = 0;
				this.carTypeIndex = 0;
				this.overTime = "";
				this.inOrOut = "";
			}
		}
	},
	methods: {
		gocurrentTabIndex2(type,inOut,overtime){
			for(var i=0;i<this.carType.length;i++){
				if(this.carType[i]==type){
					this.carTypeIndex=i;
				}
			}
			this.visitStateIndex = inOut||this.visitStateIndex;
			this.timeoutIndex = overtime||this.timeoutIndex;
			this.seachListStartdate= this.seachStartdate;
			this.seachListEnddate= this.seachEnddate;
			this.currentTabIndex=1;
		},
		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;
		},
		bindDateChange: function(e) {
			this.seachStartdate = e.target.value;
			this.getParkRecordCount();
		},
		seachEnddateChange: function(e) {
			this.seachEnddate = e.target.value;
			this.getParkRecordCount();
		},
		
		getParkRecordList() {
			var carType = this.carType[this.carTypeIndex];
			if(this.carTypeIndex==0){
				carType="";
			}
			if(this.visitStateIndex==0){
				this.inOrOut = "";
			}else if(this.visitStateIndex==1){
				this.inOrOut = "0";
			}else if(this.visitStateIndex==2){
				this.inOrOut = "1";
			}
			if(this.timeoutIndex==0){
				this.overTime ="";
			}else if(this.timeoutIndex==1){
				this.overTime ="1";
			}else if(this.timeoutIndex==2){
				this.overTime ="0";
			}
			let data = {
				method: getParkRecordList,
				data: { page: this.page,pageSize: this.pageSize, startDate: this.seachListStartdate, endDate: this.seachListEnddate, type:carType  ,overTime:this.overTime,inOrOut:this.inOrOut}
			};
			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;
						}
					}
				}
			});
		},
		getParkRecordCount(){
			let data = {
				method: getParkRecordCount,
				data: {startDate: this.seachStartdate, endDate: this.seachEnddate}
			};
			callbackRequest(data).then(res => {
				if (res.data.returnCode == 1) {
					this.visitTj = res.data.returnData;
				}
			});
		},

		bindMsgDateChange: function(e) {
			this.seachListStartdate = e.target.value;
			this.getParkRecordList();
		},
		seachMsgEnddateChange: function(e) {
			this.seachListEnddate = e.target.value;
			this.getParkRecordList();
		},
		toDetail(url) {
			uni.navigateTo({
				url
			});
		},
		carTypeChange(b){
			this.carTypeIndex = b.detail.value;
			this.getParkRecordList();
		},
		visitState2(b) {
			this.visitStateIndex = b.detail.value;
			if(this.visitStateIndex==0){
				this.inOrOut = "";
			}else if(this.visitStateIndex==1){
				this.inOrOut = "0";
			}else if(this.visitStateIndex==2){
				this.inOrOut = "1";
			}
			this.getParkRecordList();
		},
		timeoutListChange(e){
			this.timeoutIndex = e.detail.value;
			if(this.timeoutIndex==0){
				this.overTime ="";
			}else if(this.timeoutIndex==1){
				this.overTime ="1";
			}else if(this.timeoutIndex==2){
				this.overTime ="0";
			}
			this.getParkRecordList();
		},
	},
	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%;
}
.w15 {
	width: 15%;
}
.w33 {
	width: 33.3%;
}
.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: 50%;
				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;
						margin-right:20upx;
					}
					.status1 {
						font-size: 26upx;
						color: #5063c3;
						float: right;
					}
					.status2 {
						font-size: 26upx;
						color: red;
						float: right;
						margin-right:20upx;
					}
				}
				.content {
					padding: 10upx 20upx;
					// border-bottom:1px solid #d2d2d2;
					// border-radius: 10upx;
					// 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;
						}
						.green {
							color: #00c277;
						}
						.red{
							color: red;
						}
					}
				}
			}
			.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>
