
<template>
	<view>
		<view class="container"  >
			 <view class="banner-box">
			 	<image   src="/static/imgs/myHealthBanner.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> 
				<!-- 信息填报 -->
				<view v-if ="currentTabIndex == 0" style="padding-left: 26upx; background-color: #fff;height: auto;">
					<view class="form-item searchv" style="padding-bottom: 10upx;padding-top:20upx;" >
						<span style="color: #FF0000;">*</span>
						<text class="label fs30">时间</text>
						<datetime-Picker style="position: relative; float: right; right: 26upx;" 
						class="time2" mode="time" 
						:value="commitTime"
						:maxDate="defaultMaxDate"
						:minDate="defaultMinDate"
						:minTime="minTime"
						:maxTime="maxTime"
						 @change="bindMsgDateChange">
						</datetime-Picker>
					</view>
					<view style="background-color: #f2f2f2;height: 1upx;"></view>
					<view class="form-item searchv" style="padding-bottom: 10upx;">
						<span style="color: #FF0000;">*</span>
					 	<text class="label fs30" style="display: inline-block;">体温</text>
						<picker  :value="twindex" :range="twlist" range-key="twindex" @change="changeDepartment1"
						 style="margin-top: 10upx; align-items: center;font-size: 30upx;display:flex;position: relative; float: right; right: 26upx;">
							<view class="uni-input">{{twlist[twindex]}}</view>
						</picker>
						 
					</view>
					<view style="background-color: #f2f2f2;height: 1upx;"></view>
					<view class="form-item searchv" style="padding-bottom: 10upx;display: flow-root;">
						<span style="color: #FF0000;">*</span>
					 	<text class="label fs30" style="display: inline-block;">位置</text>
						<text style="float: right;right:26upx; width:450upx;height:auto;font-size: 30upx;position: relative;text-align: right;" >{{locationDetail}}</text>
						 <!-- style="float: right;right:40upx; width:300upx;font-size: 30upx;" -->
					</view>
					<view style="background-color: #f2f2f2;height: 1upx;"></view>
					<view class="form-item searchv" style="padding-top: 10upx;padding-bottom: 10upx;">
						<span style="color: #FF0000;">*</span>
					 	<text class="label fs30">是否咳嗽</text>
					 	<view class="uni-list">
							<radio-group @change="coughradioChange"  >
								<label class="uni-list-cell uni-list-cell-pd" >
									<view style="display: inline-block;padding-top: 10upx;">
										<radio style="transform:scale(0.8)" value="1"/>
									</view>
									<view  class="fs30" style="display: inline-block;">是</view>
								</label>
								<view></view>
								<label class="uni-list-cell uni-list-cell-pd" >
									<view style="display: inline-block;padding-top: 10upx;">
										<radio style="transform:scale(0.8)" value="0" checked="true"/>
									</view >
									<view class="fs30" style="display: inline-block;" >否</view>
								</label>
							</radio-group> 
					 	</view>
					</view>
					<view style="background-color: #f2f2f2;height: 1upx;"></view>
					<view class="form-item searchv" >
						 <span style="color: #FF0000;">*</span>
					 	<text class="label fs30">是否浑身无力</text>
					 	<view class="uni-list">
					 		<radio-group @change="weakradioChange"  >
					 			<label class="uni-list-cell uni-list-cell-pd" >
					 				<view style="display: inline-block;padding-top: 10upx;">
					 					<radio style="transform:scale(0.8)" value="1"/>
					 				</view>
					 				<view class="fs30" style="display: inline-block;">是</view>
					 			</label>
					 			<view></view>
					 			<label class="uni-list-cell uni-list-cell-pd" >
					 				<view style="display: inline-block;padding-top: 10upx;">
					 					<radio style="transform:scale(0.8)" value="0" checked="true"/>
					 				</view >
					 				<view class="fs30" style="display: inline-block;">否</view>
					 			</label>
					 		</radio-group> 
					 	</view>
					 </view>
					 
					  <view style="background-color: #f2f2f2;height: 1upx;"></view>
					 <view class="form-item searchv" >
						 <span style="color: #FF0000;">*</span>
					 	<text class="label fs30">是否呼吸困难</text>
					 	<view class="uni-list">
					 		<radio-group @change="breatheradioChange"  >
					 			<label class="uni-list-cell uni-list-cell-pd" >
					 				<view style="display: inline-block;padding-top: 10upx;">
					 					<radio style="transform:scale(0.8)" value="1"/>
					 				</view>
					 				<view class="fs30" style="display: inline-block;">是</view>
					 			</label>
					 			<view></view>
					 			<label class="uni-list-cell uni-list-cell-pd" >
					 				<view style="display: inline-block;padding-top: 10upx;">
					 					<radio style="transform:scale(0.8)" value="0" checked="true"/>
					 				</view >
					 				<view class="fs30" style="display: inline-block;">否</view>
					 			</label>
					 		</radio-group> 
					 	</view>
					 </view>
					  <view style="background-color: #f2f2f2;height: 1upx;"></view>
					 <view class="form-item searchv" style="padding-top: 10upx;padding-bottom: 10upx;" >
						
					 	<text class="label fs30" style="margin-bottom: 10upx;">其它不适情况说明</text>
						<view style="height: 10upx;"></view>
					 	<textarea placeholder-style="color:#d2d2d2" placeholder="如有其它不适情况请填写" rows='5' :value="discomfortExplain"
						 maxlength="500" style="border:1px solid #f2f2f2;padding: 20upx; 
						 font-size: 30upx;"></textarea>
					 </view>
					<view style="background-color: #f2f2f2;height: 1upx;"></view>
					 <view class="form-item searchv" >
						<span style="color: #FF0000;">*</span>
					 	<text class="label fs30">本日是否接触过疫区人员</text>
					 <view class="uni-list">
					 	<radio-group @change="epidemicradioChange"  >
					 		<label class="uni-list-cell uni-list-cell-pd" >
					 			<view style="display: inline-block;padding-top: 10upx;">
					 				<radio style="transform:scale(0.8)" value="1"/>
					 			</view>
					 			<view class="fs30" style="display: inline-block;">是</view>
					 		</label>
					 		<view></view>
					 		<label class="uni-list-cell uni-list-cell-pd" >
					 			<view style="display: inline-block;padding-top: 10upx;">
					 				<radio style="transform:scale(0.8)" value="0" checked="true"/>
					 			</view >
					 			<view class="fs30" style="display: inline-block;">否</view>
					 		</label>
					 	</radio-group> 
					 </view>
					 </view>
					 
					
					 <view style="background-color: #f2f2f2;height: 1upx;"></view>
					 <view class="form-item searchv" >
						 <span style="color: #FF0000;">*</span>
					 	<text class="label fs30 ">近14天是否从海外归国或接触相关人员</text>
					 	<view class="uni-list">
					 		<radio-group @change="overseasMsgDateChange"  >
					 			<label class="uni-list-cell uni-list-cell-pd" >
					 				<view style="display: inline-block;padding-top: 10upx;">
					 					<radio style="transform:scale(0.8)" value="1"/>
					 				</view>
					 				<view class="fs30" style="display: inline-block;">是</view>
					 			</label>
					 			<view></view>
					 			<label class="uni-list-cell uni-list-cell-pd" >
					 				<view style="display: inline-block;padding-top: 10upx;">
					 					<radio style="transform:scale(0.8)" value="0" checked="true"/>
					 				</view >
					 				<view class="fs30" style="display: inline-block;">否</view>
					 			</label>
					 		</radio-group> 
					 	</view>
					 </view> 
					<view class="occupied"></view>
					<view class="footer-btn footer-btn-color" @click="submit()">
						<view class="btn">提交</view>
					</view>
				</view>
				
					<!-- 健康信息-->
				<view class="reservation-box" style="background-color: #fff;" v-else-if="currentTabIndex == 1">
						 <!-- <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> 
						 </view> -->
						 <!-- 折线图 -->
						 <view class="qiun-columns">
							<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
								<view class="qiun-title-dot-light" style="font-size: 30upx;margin: 20upx 0 20upx 0;">体温变化</view>
							</view>
							<view class="qiun-charts" >
								<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
							</view>
						 </view>
							
						 <view class="list-box" v-if="visitTj.length > 0">
							 <view class="form-item" style="width: 100%;padding: 20upx 10upx;">
									<!-- <view class="visitcon w10">序号</view> -->
									<view class="visitcon w20">姓名</view>
									<view class="visitcon w35">日期</view>
									<view class="visitcon w10">咳嗽</view>
									
									<view class="visitcon w15">体温</view>
									<view class="visitcon w20">数据来源</view>
							 </view>
							 <view  style="padding: 20upx 10upx;border-top:1px solid #d2d2d2;align-items: center;display: flex;" class="form-item" v-for="(item, index) in visitTj" :key="index" >
								
								<!-- <view class="visitcon w10">{{ index+1 }}</view> -->
 
								<view class="visitcon w20">{{ item.userName }}</view>
								<view class="visitconContent w35" >{{ item.time }}</view>
								<view  :class='[item.cough ==="是" ? "bRed":""]' class="visitconContent w10" >{{ item.cough }}</view>
								
								<view  :class='[item.temperature >= tmpV ? "bRed":""]' class="visitconContent w15" >{{ item.temperature }}</view>
								<view class="visitconContent w20" >{{ item.source }}</view>
							 </view>
						 </view>
						<!-- <content-none v-else :padTop="20" style="padding-bottom: 20vh;"></content-none> -->
					</view>
					
				
			</view>
		</view>
	</view>
</template>

<script>
import { getDate, alertTip, callbackRequest,callbackRequestNoTip, getStorage, regPhone, formatDate, devEnv } from '@/common/util.js';
import { wechatJsSdk2,getAllDept,getHealthyList,saveMyHealthy, 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';  
import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';

let currentTime = new Date().getTime();
let millisecond = 24 * 7 * 60 * 60 * 1000;
var _self;
var canvaLineA=null;
export default {
	data() {
		return {
			// commitTime:this.getTime(),
			commitTime:formatDate(currentTime,'mTime'),
			minTime: '00:00',
			defaultMinDate: currentTime,// 最小时间
			defaultMaxDate: currentTime,// 最大时间
			// defaultMaxDate: new Date(currentTime+millisecond).getTime(),// 最大时间
			maxTime: '24:00',
			visitStateIndex:0,
			visitlist:[],
			twlist: ['35.0','35.1','35.2','35.3','35.4','35.5',
				'35.5','35.6','35.7','35.8','35.9','36.0','36.1','36.2',
				'36.3','36.4','36.5','36.6','36.7','36.8','36.9','37.0',
				'37.1','37.2','37.3','37.4','37.5','37.6','37.7','37.8','37.9',
				'38.0','38.1','38.2','38.3','38.4','38.5','38.6','38.7','38.8','38.9',
				'38.0','39.1','39.2','39.3','39.4','39.5','39.6','39.7','39.8','39.9',
				'40.0'
			],
			twindex:11,
 
			visitTj: [],
  
			insideList:[
			],
			//userId:"23ee5fc8991240ce8a1b9348c2b7c07e",
			userId:getStorage('userInfo').id,
 
			insideDepIndex:0,
			visitState:['全部', '已授权', '未授权'], //状态列表
			page: 1,
			pageSize: 10,
			loadingType: 0, //0-loading前；1-loading中；2-没有更多了
		 
			insideloadingType:0,
			currentTabIndex: 0,
			selectedDate: this.getTime(),
			chooseDateIndex: 0, //选中的日期
			times: [],
			chooseTimeIndex: null,
			deptList: ["请选择"], //部门列表
			RersonIndex: 0,
			tmpV:37.6,
			//折线图
			cWidth:'',
			cHeight:'',
			pixelRatio:1,
			longitude:'',
			latitude:'',
			cough:0,
			weak:0,
			breathe:0,
			epidemic:0,
			overseas:0,
			discomfortExplain : '',
			location:'',
			// locationDetail:'如获取位置信息失败，请重新进入页面，并授权允许获取位置信息',
			locationDetail:'获取中...',
		
		 };
	},
	components: {
		loadMore,
		contentNone,
		datetimePicker
	},
	
	created() {
		
	},
	
	onReady() {
		
	},
	
	
	
	
	onLoad(option) {
		
		console.log("---start get location---")
		if(!devEnv){
			let url =window.location.href.split("#")[0]; // 这里务必编码
			let data = {
				method:wechatJsSdk2,
				data:{
					url:url
				}
			}
			callbackRequest(data)
			.then(res => {
				
				if(res.data.returnCode == 1){
					let e = res.data.returnData;
					this.init(e);		
					setTimeout(() => { 
						this.getLocation();	
						
				    }, 400)
					
				}
				console.log("---end get location---")
			})
		}
		else{
			this.locationDetail='安徽省合肥市蜀山区';
		}
		
		
		// this.getRerson();
		console.log('--'+this.userId);
		this.currentTabIndex = option.currentTabIndex || 0;
		
		if (this.currentTabIndex == 0) {
			this.initData();
		}
		
		//折线图
		_self = this;
		this.cWidth=uni.upx2px(670);
		this.cHeight=uni.upx2px(500);
		// this.getServerData();
	},
	watch: {
		currentTabIndex: function(newVal, oldVal) {
		 
			if (newVal == 1) {
				this.page = 1;
				this.loadingType = 0;
				this.insideloadingType = 0;
				this.getHealthyList();
				
			} else {
				this.initData();
			}
		}
	},
	methods: {
		
		init(e){
			let _this = this;
			this.$wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: e.appId, // 必填，公众号的唯一标识
				timestamp: e.timestamp, // 必填，生成签名的时间戳
				nonceStr: e.noncestr, // 必填，生成签名的随机串
				signature: e.signature,// 必填，签名
				jsApiList: ["openLocation",
							"getLocation"
							] // 必填，需要使用的JS接口列表
					});
					this.$wx.ready(function(){				
						console.log("验证通过")
						_this.$wx.checkJsApi({
								 jsApiList:["openLocation",
									"getLocation"
									] , // 需要检测的JS接口列表，所有JS接口列表见附录2,
								 success: function(res) {
									console.log(res);
									
									
								 },
								 fail:function(e){
									 console.log(e);
									 
								 }
							});
					});
				this.$wx.error(function(res){
					console.log("验证失败")
					
				});
		
		},
		
		//获取信息
		getLocation(){
			var self = this;
			self.$wx.getLocation({
				type:'wgs84',
				// type:'gcj02',
				success:function(locationRes){
					console.log(locationRes);
					
					// geocoder(locationRes.latitude,locationRes.longitude);
					self.longitude = locationRes.longitude;
					self.latitude = locationRes.latitude;
					self.getLocationBuildingByLngLat(locationRes.longitude,locationRes.latitude)
				},
				fail:function(){
					
				}
			})
		},
		
		
		getLocationBuildingByLngLat(lng,lat){
			var self = this;
			let longitude = lng;
			let latitude = lat;
			// longitude = 117.17722;
			// latitude = 31.821667;
			let key='e1d3e8821fe4a57acded684fad753c10';
			let url=`https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${longitude},${latitude}&key=${key}&radius=1000&extensions=all`;
			
			let data = {
				
			}
			callbackRequestNoTip(url,data,'GET')
			.then(res => {
				
				console.log(res)
				if(res.data && res.data.status=='1'){
					if(res.data.regeocode){
						let regeocode = res.data.regeocode;
						
						console.log(regeocode.formatted_address)
						self.locationDetail = regeocode.formatted_address;
						self.location = regeocode.addressComponent.province;
						console.log(self.location)
						if(regeocode.addressComponent.city){
							console.log(regeocode.addressComponent.city)
							self.location += regeocode.addressComponent.city;
						}
						console.log(self.location)
						// alertTip(self.locationDetail);
						// self.locationDetail=self.latitude+","+self.longitude;
					}
					
				}
				
			})
		},
		
		
		//折线图
		getServerData(){
			
			
			let LineA={categories:['03-04','03-05','03-06','03-09', '03-10', '03-11', '03-12'],
						series: [{
								name: '体温',
								data: [36.5,36.3,36.2,36.4, 36.2, 36.3, 36.4],
								color: 'green'
							}]};
			//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
			
			_self.showLineA("canvasLineA",LineA);
			
		},
		changeDepartment1(e) {
			this.twindex = e.detail.value;
		},
		showLineA(canvasId,chartData){
			canvaLineA=new uCharts({
				$this:_self,
				canvasId: canvasId,
				type: 'line',
				fontSize:12,
				legend:{show:true},
				dataLabel:false,
				
				dataPointShape:true,
				background:'#FFFFFF',
				pixelRatio:_self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				xAxis: {
					type:'grid',
					gridColor:'#CCCCCC',
					gridType:'dash',
					dashLength:2,
					gridEval:1,
					labelCount:5
				},
				yAxis: {
					gridType:'dash',
					gridColor:'#CCCCCC',
					dashLength:8,
					splitNumber:3,
					min:35,
					max:38,
					format:(val)=>{return val.toFixed(0)+'℃'}
				},
				width: _self.cWidth*_self.pixelRatio,
				height: _self.cHeight*_self.pixelRatio,
				extra: {
					line:{
						type: 'straight'
					}
				},
				title:{
					fontSize:10
				}
			});
			
		},
		touchLineA(e) {
			canvaLineA.showToolTip(e, {
				format: function (item, category) {
					return category + ' ' + item.name + ':' + item.data 
				}
			});
		},
		submit(){
			var self = this;
			if(self.locationDetail == '获取中...'){
				alertTip('如未允许微信获取位置信息，请退出页面，重新授权！');
				return
			}
			let data = {
				method: saveMyHealthy,
				data: {
					"userId":self.userId,
					"longitude" : self.longitude,
					"latitude" : self.latitude,
					"commitTime" : self.commitTime,
					"temperature" : self.twlist[self.twindex],
					"cough" : self.cough,
					"weak" : self.weak,
					"breathe" : self.breathe,
					"epidemic" : self.epidemic,
					"overseas" : self.overseas, 
					"discomfortExplain":self.discomfortExplain,
					"location":self.location,
					"locationDetail":self.locationDetail,
				}
			};
			console.log('--'+this.userId);
			callbackRequest(data).then(res => {
				if (res.data.returnCode == 1) {
					 alertTip(res.data.returnMsg);
					 setTimeout(_ => {
					 	self.currentTabIndex = 1;
					 }, 2000)
					 
				}
			});
		},
		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;
						}
					}
					
				}
			});
		},
		getHealthyList(){
			var self = this;
			let data = {
				method: getHealthyList,
				data: { 
					"userId":this.userId
				 }
			};
			callbackRequest(data).then(res => {
				if (res.data.returnCode == 1) {
					console.log(res.data.returnData);
					self.visitTj = res.data.returnData.list; 
					self.tmpV = res.data.returnData.tmpV; 
					let LineA= res.data.returnData.categoriesmap;
					
					console.log("LineA====="+ LineA);
					
					// series: [{
					// 		name: '体温',
					// 		data: [36.5,36.3,36.2,36.4, 36.2, 36.3, 36.4],
					// 		color: 'green'
					// 	}]};
					// //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					
					_self.showLineA("canvasLineA",LineA);
				}
			});
		},
		
		coughradioChange: function(e) {
			this.cough = e.target.value;
		},
		weakradioChange: function(e) {
			this.weak = e.target.value;
		},
		breatheradioChange: function(e) {
			this.breathe = e.target.value;
		},
		epidemicradioChange: function(e) {
			this.epidemic = e.target.value;
		},
		overseasMsgDateChange: function(e) {
			this.overseas = e.target.value
		},
		
		
		
		bindMsgDateChange: function(e) {
			this.seachListStartdate = 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;
		} 
	},
	 
	
	
	
};
</script>

<style lang="scss">
@import '@/static/css/common.scss';
.bRed{
	color:#FF0000;
}
.fs30{
	font-size: 30upx;
}
.searchv{
	margin-top: 0upx;
	padding:20upx 0;
}
.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;
	 
	border: 1px solid #c2c2c2;
}
.time2{ 
	font-size: 28upx; 
	display:inline-block;
	 
 
}
.visitcon{
	 
	display:inline-block;
	text-align: center;
	font-size: 14px;
	 
}
.visitconContent{
	/* text-decoration:underline; */
	display:inline-block;
	text-align: center;
	font-size: 14px;
	 
}
.w55{
	width: 55%; 
}

.w50{
	width: 50%; 
}

.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: 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;
 					}
 					.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;
 			}
			
			
 		}
		
		/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
		.qiun-charts {
			width: 670upx;
			height: 500upx;
			background-color: #FFFFFF;
		}
		
		.charts {
			width: 670upx;
			height: 500upx;
			background-color: #FFFFFF;
		}
		
 	}
 }
</style>
