<template>
	<view class="fullHeight">
		<headers :showBack="true" class="fixedHeaderBox">
			<view class="headerName">
				数据台账
			</view>
		</headers>
		<view class="menuBox" :style="{ 'top': (statusBarHeight+52) + 'px' }">
			<view class="menuItem" @click="changeMenu(0)" :class="tabIndex==0?'active':''">
				历史数据台账
			</view>
			<view class="menuItem" @click="changeMenu(1)" :class="tabIndex==1?'active':''">
				环境统计分析
			</view>
		</view>
		<view class="" v-if="tabIndex==0">
			<view class="searchBox" :style="{ 'padding-top': (statusBarHeight+52+44) + 'px' }">
				<view class="input" @click="showFilterDialog">
					{{searchForm.startTime}} ~ {{searchForm.endTime}}
				</view>
			</view>
			<view class="listBox" :style="{ 'padding-top': (statusBarHeight+52+40+44) + 'px' }">
				<view class="listItem" v-for="(item,index) in list" :key="index" @click="goAdd(item.id)">
					<view class="title">
						{{item.receiveTime}}
					</view>
					<view class="bottom">
						温度：{{item.temperature}}°C
					</view>
					<view class="bottom">
						湿度：{{item.humidity}}%RH
					</view>
					<view class="bottom">
						设备名称：{{item.laboratoryName}}
					</view>
				</view>
				<view class="placeholderBox" v-show="list.length==0">
					<image src="/static/noData.png" class="noDataImg"></image>
					<view class="text">
						暂无数据
					</view>
				</view>
			</view>
			<view class="loadMoreBox" v-if="isLoadMore&&list.length>0">
				<uni-load-more :status="loadStatus" iconType="auto"></uni-load-more>
			</view>
		</view>
		<view class="" v-if="tabIndex==1">
			<view class="searchBox" :style="{ 'padding-top': (statusBarHeight+52+44) + 'px' }">
				<view class="input" @click="showFilterDialog">
					{{analysisStartDate}} ~ {{analysisEndDate}}
				</view>
			</view>
			<view :style="{ 'padding-top': (statusBarHeight+52+44+40) + 'px' }">
				<view class="chartTitle">
					<!-- 温度 (°C) -->
					环境分析报告
				</view>
			</view>
			<u-charts canvas-id="lineChart1" chartType="line" :opts="lineChartData1" ref="lineChart1"
			 :legends="false" />
			 	<view class="chartTitle">
			 		报警趋势
			 	</view>
			 <u-charts canvas-id="lineChart2" chartType="line" :opts="lineChartData2" ref="lineChart2"
			  :legends="false" />
		</view>
		<dialogs ref="dialogs">
			<!-- <template v-slot:title>
				{{isAdd?'添加':'编辑'}}
			 </template> -->
			 <template v-slot:content>
				 <view class="formBox2" :class="tabIndex==1?'analysisForm':''">
				 	<form @submit="initData">
				 		<view class="uni-form-item">
				 			<view class="uni-form-label">
				 				<text class="star">*</text>开始时间
				 			</view>
				 			<view class="uni-form-input">
				 				<picker class="datePickerBox" mode="date" :value="startDate" @change="bindDateChange">
									<view class="dateInput">{{startDate?startDate:'请选择日期'}}</view>
								</picker>
								<picker class="timePickerBox" mode="time" :value="startTime" @change="bindTimeChange" v-show="tabIndex==0">
									<view class="timeInput">{{startTime?startTime:'请选择时间'}}</view>
								</picker>
				 			</view>
				 		</view>
						<view class="uni-form-item">
							<view class="uni-form-label">
								<text class="star">*</text>结束时间
							</view>
							<view class="uni-form-input">
								<picker class="datePickerBox" mode="date" :value="endDate" @change="bindDateChange2">
									<view class="dateInput">{{endDate?endDate:'请选择日期'}}</view>
								</picker>
								<picker class="timePickerBox" mode="time" :value="endTime" @change="bindTimeChange2" v-show="tabIndex==0">
									<view class="timeInput">{{endTime?endTime:'请选择时间'}}</view>
								</picker>
							</view>
						</view>
				 		<button form-type="submit" type="primary" class="btn submitBtn">搜索</button>
						<view class="closeBtn" @click="closeDialogFn">
							关闭
						</view>
				 	</form>
				 </view>
			 </template>
			
		</dialogs>
	</view>
</template>

<script>
	import dialogs from "components/dialog/dialog.vue"
	import headers from "components/headers/headers.vue"
	import uniLoadMore from "components/uni-load-more/uni-load-more.vue"
	import {GetDateStr,timestampToTime} from "static/js/util.js"
	import uCharts from '@/components/u-charts/component.vue';
	export default {
		components:{dialogs,headers,uniLoadMore,uCharts},
		data() {
			return {
				searchForm:{
					startTime: "",
					endTime:"",
					devSn: "",
					pageNo: 1,
					pageSize: 10,
					projectSn: ""
				},
				projectDetail:{},
				list:[],
				statusBarHeight:0,
				loadStatus:'more',
				isLoadMore:false,
				startTime: "00:00:00",
				endTime:"23:59:59",
				startDate: "",
				endDate:"",
				tabIndex:0,
				lineChartData1:{
					categories: [],
					series: [{
						name: "温度",
						data: []
					},{
						name: "湿度",
						data: []
					}]
				},
				lineChartData2:{
					categories: [],
					series: [{
						name: "报警次数",
						data: []
					}]
				},
				analysisStartDate:'',
				analysisEndDate:'',
			};
		},
		onLoad(options) {
			this.startDate=GetDateStr(0,'-')
			this.endDate=GetDateStr(0,'-')
			this.searchForm.devSn=options.devSn
			const start = new Date();
			    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			this.analysisStartDate=timestampToTime(start.getTime(), "date")
			this.analysisEndDate=this.endDate
			this.statusBarHeight=uni.getStorageSync('systemInfo').statusBarHeight
			this.projectDetail=JSON.parse(uni.getStorageSync('projectDetail'))
			this.searchForm.projectSn=this.projectDetail.projectSn
			this.loadData()
		},
		
		onReachBottom() {
			if(this.tabIndex==0){
				if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
				this.isLoadMore=true
				this.searchForm.pageNo+=1
				this.loadData()
			}
			}
			
		},
		onPullDownRefresh() {
			if(this.tabIndex==0){
				this.searchForm.pageNo=1
			this.list=[]
			this.loadData()
			}
			
		},
		methods:{
			initData(){
				if(this.tabIndex==0){
					this.list=[]
					this.loadData()
				}else{
					this.getAnalysisReportData()
					this.getAlarmData()
				}
			},
			changeMenu(index){
				this.tabIndex=index;
				this.initData()
			},
			bindDateChange: function(e) {
				if(this.tabIndex==0){
					this.startDate = e.target.value
				}else{
					this.analysisStartDate = e.target.value
				}
				
			},
			bindTimeChange: function(e) {
				this.startTime = e.target.value+':00'
			},
			bindDateChange2: function(e) {
				if(this.tabIndex==0){
					this.endDate = e.target.value
				}else{
					this.analysisEndDate = e.target.value
				}
			},
			bindTimeChange2: function(e) {
				this.endTime = e.target.value+':59'
			},
			showFilterDialog(){
				if(this.tabIndex==0){
					this.startDate=this.searchForm.startTime.split(' ')[0];
					this.endDate=this.searchForm.endTime.split(' ')[0];
				}else{
					this.startDate=this.analysisStartDate;
					this.endDate=this.analysisEndDate
				}
				this.$refs.dialogs.showFn()
			},
			closeDialogFn(){
				this.$refs.dialogs.hideFn()
			},
			loadData(){
				var that = this
				this.searchForm.startTime=this.startDate+' '+this.startTime
				this.searchForm.endTime=this.endDate+' '+this.endTime
				this.sendRequest({
					url: 'xmgl/standardCurrentData/list',
					data: this.searchForm,
					method: "POST",
					success(res){
						that.list=that.list.concat(res.result.records)
						if(res.result.records.length<that.searchForm.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
							  that.isLoadMore=true                                             
							  that.loadStatus='nomore'
						}else{
							  that.isLoadMore=false
							  // that.loadStatus='more'
						}
						that.closeDialogFn()
						uni.stopPullDownRefresh()
						console.log('that.isLoadMore',that.isLoadMore)
					}
				})
			},
			getAnalysisReportData(){
				var that = this
				var json = {
					devSn:this.searchForm.devSn,
					endTime:this.analysisEndDate,
					projectSn:this.projectDetail.projectSn,
					startTime:this.analysisStartDate,
					type:3
				}
				this.sendRequest({
					url: 'xmgl/standardCurrentData/selectStandardAnalysisReport',
					data: json,
					method: "POST",
					success(res){
						var DATA = res.result
						var xdata = [],
							ydata1 = [],
							ydata2 = [];
						DATA.forEach(element => {
							xdata.push(element.dayTitle.substring(5))
							ydata1.push(element.avgTemperature)
							ydata2.push(element.avgHumidity)
						})
						that.lineChartData1.categories = xdata
						// that.lineChartData2.categories = xdata
						
						that.lineChartData1.series = [{
							name: "温度",
							data: ydata1
						},{
							name: "湿度",
							data: ydata2
						 }]
						// that.lineChartData2.series = [{
						// 	name: "湿度",
						// 	data: ydata2
						// }]
						
						that.$refs.lineChart1.changeData('lineChart1', that.lineChartData1)
						// that.$refs.lineChart2.changeData('lineChart2', that.lineChartData2)
						
						that.closeDialogFn()
					}
				})
			},
			getAlarmData(){
				var that = this
				var json = {
					devSn:this.searchForm.devSn,
					endTime:this.analysisEndDate,
					projectSn:this.projectDetail.projectSn,
					startTime:this.analysisStartDate
				}
				this.sendRequest({
					url: 'xmgl/standardAlarm/selectDevAlarmList',
					data: json,
					method: "POST",
					success(res){
						var DATA = res.result
						var xdata = [],
							ydata1 = [],
							ydata2 = [];
						DATA.forEach(element => {
							xdata.push(element.titleTime.substring(5))
							// ydata1.push(element.avgTemperature)
							ydata2.push(element.num)
						})
						that.lineChartData2.categories = xdata
						
						that.lineChartData2.series = [{
							name: "报警次数",
							data: ydata2
						}]
						
						that.$refs.lineChart2.changeData('lineChart2', that.lineChartData2)
						
						that.closeDialogFn()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menuBox {
		display: flex;
		align-items: center;
		height: 36px;
		font-size: 15px;
		background-color: white;
		margin-top: -1px;
		position: relative;
		z-index: 99;
		position: fixed;
		left: 0;
		width: 100%;
		border-bottom: 1px solid rgba(194, 194, 194, 0.2);
	
		.menuItem {
			flex: 1;
			text-align: center;
	
			&.active {
				color: rgba(43, 141, 243, 1);
			}
		}
	}
.searchBox{
	// background-color: #2b8df3;
	padding: 0 15px 5px;
	position: fixed;
	left: 0;
	width: calc(100% - 30px);
	top: 0;
	z-index: 1;
	.input{
		border-radius: 18px;
		height: 35px;
		text-align: center;
		background-color: #f5f5f5;
		line-height: 35px;
		font-size: 14px;
	}
}

.listBox{
	margin: 15px;
}
.listItem{
	box-shadow: 0px 4px 13px 0px rgba(212, 220, 236, 0.53);
	position: relative;
	margin-bottom: 5px;
	padding: 15px;
	border-radius: 8px;
	.title{
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.bottom{
		// color: rgba(55, 45, 102, 0.5);
		font-size: 14px;
	}
	.time{
		margin-right: 12px;
	}
}
.timePickerBox,.datePickerBox{
	display: inline-block;
	margin-top: 10px;
}
.dateInput,.timeInput{
	background-color: #F5F5F5;
	border-radius: 15px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	width: 100%;
	font-size: 14px;
}
.analysisForm{
	.datePickerBox{
		width: 100%;
		margin-right: 0;
	}
}
.datePickerBox{
	width: 55%;
	margin-right: 5%;
}
.timePickerBox{
	width: 40%;
}
.closeBtn{
	font-size: 15px;
	color: rgba(42, 43, 91, 0.5);
	padding: 10px 0;
	text-align: center;
}
.chartTitle {
		font-size: 14px;
		font-weight: 500;
		margin: 10px 0 15px;
		padding-left: 15px;
	}
</style>
