<template>
	<view class="container">
		<scroll-view scroll-y="true" :style="{height:height + 'rpx'}" @refresherrefresh="refresherrefreshFun" @refresherpulling="refresherpullingFun" :refresher-triggered="isRefresher" refresher-enabled="true">
		<view class="topScroll">
			 <scroll-view scroll-x="true" class="scroll">
				<view class="scroll-item" v-for="(item,index) in topItems" :key="index" @click="chooseClick(item,index)" :class="{'scroll-item2':isActive == index}">
				   	{{item.dictLabel}}
				   	<view class="zliebs" v-show="isActive === index">
				   	</view>
			    </view>
			</scroll-view>
		</view>
		<block v-if="isActive == 1">
			<view class="searchbox">
				<image src="../../static/meishi_icon_sousuo.png" mode=""></image>
				<input class="search_input" v-model="deviceNo" placeholder="请输入要搜索的设备编号">
				<view class="searchbutton" @click="changenr()">
					搜索
				</view>
			</view>
			<view class="liebiaos" v-if="List.length != 0">
				<scroll-view :style="{height:scorllheight + 'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
					<view class="itembox" v-for="(item,index) in List" :key="index">
						<view class="itembox_top">
							<view class="itembox_lef" v-if="item.deviceNo">
								<!-- <image src="../../static/fz.png" mode=""></image> -->
								<view class="title">
									编号：{{item.deviceNo}}
								</view>
							</view>
						</view>
						<view class="itembox_bot">
							<view class="bot_item" v-if="item.flg">
								<span class="nrbt">报警原因:</span>
								<view class="bj" v-if="item.deviceStatus == 1">
									{{item.flg}}
								</view>
								<view class="jcbj" v-if="item.deviceStatus == 0">
									{{item.flg}}
								</view>
							</view>
							<view class="bot_item" v-if="item.userDeviceNo">
								<span class="nrbt">用户设备编号:</span>
								<span class="number">{{item.userDeviceNo}}</span>
							</view>
							<view class="bot_item" v-if="item.alertTime">
								<span class="nrbt" v-if="item.deviceStatus == 1">报警时间:</span>
								<span class="nrbt" v-if="item.deviceStatus == 0">解除时间:</span>
								{{item.alertTime}}
							</view>
							<view class="bot_item" v-if="item.reveiveTime">
								<span class="nrbt">上报时间:</span>
								{{item.reveiveTime}}
							</view>
						</view>
					</view>
					<view class="load">
						<uni-load-more :status="loadStatus"></uni-load-more>
					</view>
				</scroll-view>
			</view>
			<view class="zwsj" v-else>
				<view class="inzwsj">
					<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
					<view class="zwsjtext">
						暂无数据
					</view>
				</view>
			</view>
		</block>
		<block v-else-if="isActive == 0">
			<view class="liebiaos" v-if="List.length != 0">
				<scroll-view :style="{height:scorllheights + 'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
					<view class="itembox" v-for="(item,index) in List" :key="index">
						<view class="itembox_top" v-if="item.stationName">
							<view class="itembox_lef">
								<image src="../../static/fz.png" mode=""></image>
								<view class="title">
									{{item.stationName}}
								</view>
							</view>
							<view class="itembox_right">
								{{item.alertTime}}
							</view>
						</view>
						<view class="itembox_bot">
							<block v-if="item.alertContent.length != 0">
								<view class="scrolltop">
									<view class="tabitem" v-for="(it,i) in tabList" :key="i">
										{{it}}
									</view>
								</view>
								<view class="lists_item" v-for="(Item,Index) in item.alertContent" :key="Index">
									<view class="jczbs" v-if="Item.name">
										{{Item.name}}
									</view>
									<view class="zbz" v-if="Item.val">
										{{Item.val}}
									</view>
									<view class="sbsj" v-if="Item.valHeight" style="color: #FF4242;">
										{{Item.valHeight}}
										<image class="zximg" src="../../../static/home_shuju_shang.png" mode=""></image>
									</view>
									<view class="sbsj" v-if="Item.valLow" style="color: #19D58A;">
										{{Item.valLow}}
										<image class="zximg" src="../../../static/home_shuju_xia.png" mode=""></image>
									</view>
									<view class="szqss" v-if="Item.unit">
										{{Item.unit}}
									</view>
								</view>
							</block>
						</view>
					</view>
					<view class="load">
						<uni-load-more :status="loadStatus"></uni-load-more>
					</view>
				</scroll-view>
			</view>
			<view class="zwsj" v-else>
				<view class="inzwsj">
					<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
					<view class="zwsjtext">
						暂无数据
					</view>
				</view>
			</view>
		</block>
		</scroll-view>
	</view>
</template>

<script>
	import api from "@/api/api"
	import configService from '@/common/service/config.service.js';
	export default {
		data() {
			return {
				List:[],
				baseUrl:configService.apiUrl,
				tabList: ['监测指标名称', '监测指标值', '高/低阈值','计量单位'],
				array:[],
				index:'',
				sampTime:'',
				deviceNo:'',
				allNum: '',
				isLastpage: '',
				intervalId: null,
				loadStatus:'more',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
				height:0,
				scorllheight:0,
				scorllheights:0,
				show:false,
				show1:false,
				top:0,
				pageNo:1,
				pageSize:4,
				deleteUrl:'/applet/survMulchRecord/delete',
				stationName:'',
				stationCode:'',
				sampTime:'',
				arrays:[],
				isRefresher: false, //下拉刷新状态
				reload:'',
				topItems:[
					{
						dictLabel:'监测站告警'
					},
					{
						dictLabel:'异常趋势图'
					}
				],
				isActive:0,
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					var pxToRpxScale  = 750 / res.windowWidth
					var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
					var navigationHeight = 44 * pxToRpxScale
					this.height = res.windowHeight  * pxToRpxScale//将px 转换rpx		
					console.log(this.height,ktxStatusHeight,navigationHeight)
					this.scorllheight = this.height - 174
					this.scorllheights = this.height - 90
				}
			});
			this.getList()
		},
		onShow() {
			uni.getSystemInfo({
				success: res => {
					var pxToRpxScale  = 750 / res.windowWidth
					var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
					var navigationHeight = 44 * pxToRpxScale
					this.height = res.windowHeight  * pxToRpxScale//将px 转换rpx		
					console.log(this.height,ktxStatusHeight,navigationHeight)
					this.scorllheight = this.height - 174
					this.scorllheights = this.height - 90
				}
			});
		},
		methods:{
			// 下拉刷新被触发
			refresherrefreshFun() {
				this.pageNo = 1
				this.deviceNo = ''
				this.getList()
			},
			// 下拉刷新触发
			refresherpullingFun() {
				this.isRefresher= true
			},
			// 切换类型
			chooseClick(item,index){
				this.isActive = index;
				this.pageNo = 1
				this.deviceNo = ''
				this.getList()
			},
			getList(){
				var params = {}
				params.pageNo = this.pageNo
				params.pageSize = this.pageSize
				uni.showLoading({
					title: '加载中'
				});
				this.List = []
				if(this.isActive == 0){
					var url = '/applet/wxclient/alertRecord'
				}else if(this.isActive == 1){
					var url= '/applet/survPestlightAlert/list'
					if(this.deviceNo){
						params.deviceNo = this.deviceNo
					}
				}
				this.$http.get(url,{params:params}).then(res =>{
					if(res.data.code == 0){
						var data = res.data.data.records
						// for(var i=0;i<data.length;i++){							
						// 	if(data[i].alertContent){
						// 		for(var j=0;j<data[i].alertContent.length;j++){
						// 			data[i].alertContent[j] = JSON.parse(data[i].alertContent[j])
						// 			console.log(data[i].alertContent[j])
						// 		}
						// 		console.log(data[i].alertContent)
						// 	}
						// }
						this.List = this.List.concat(data)
						if(res.data.data.total != 0){
							this.allNum = Number(res.data.data.total)/Number(this.pageSize)+'';
							console.log(this.allNum,'总页数')
							if(this.allNum.indexOf('.') == -1) {
								this.allNum = this.allNum;
								console.log(this.allNum,'if')
							} else {
								this.allNum = parseInt(Number(this.allNum)+1);
								console.log(this.allNum,'else')
							}
							console.log(this.pageNo,this.allNum,'156156')
							if(this.pageNo == this.allNum) {
								this.isLastpage = true;
								 this.loadStatus='nomore'
								console.log(this.isLastpage,'true','nomore')
							} else {
								this.isLastpage = false;
								// this.isLoadMore=true
								this.loadStatus = 'more'
								console.log(this.isLastpage,'false')
							}
						}else{
							this.isLastpage = true;
							this.loadStatus='nomore'
						}
					}
					uni.hideLoading();
					this.isRefresher= false
				})
			},
			lower() {
				console.log("最后一页了，取消下拉功能");
				// 最后一页了，取消下拉功能
				if (this.isLastpage) {
					return
				}
				clearInterval(this.intervalId);
				var num = 1;
				this.intervalId = setInterval(() => {
					num = num+1;
				},1000)
					console.log(this.intervalId,num)
				this.pageNo = this.pageNo + 1;
				var params = {}
				params.pageNo = this.pageNo
				params.pageSize = this.pageSize
				if(this.isActive == 0){
					var url= '/applet/survPestlightAlert/list'
					if(this.deviceNo){
						params.deviceNo = this.deviceNo
					}
				}else if(this.isActive == 1){
					var url = '/applet/wxclient/alertRecord'
				}
				this.$http.get(url,{params:params}).then(res =>{
					if(res.data.code == 0){
						var data = res.data.data.records
						// for(var i=0;i<data.length;i++){
						// 	if(data[i].alertContent){
						// 		for(var j=0;j<data[i].alertContent.length;j++){
						// 			data[i].alertContent[j] = JSON.parse(data[i].alertContent[j])
						// 			console.log(data[i].alertContent[j])
						// 		}
						// 		console.log(data[i].alertContent)
						// 	}
						// }
						this.List = this.List.concat(data)
						if(res.data.data.total != 0){
							if(this.pageNo == this.allNum) {
								this.isLastpage = true;
								 this.loadStatus='nomore'
								console.log(this.isLastpage,'true')
							} else {
								this.isLastpage = false;
								// this.isLoadMore=true
								this.loadStatus = 'more'
								console.log(this.isLastpage,'false')
							}
						}else{
							this.isLastpage = true;
							this.loadStatus='nomore'
						}
					}
				})
			},
			changenr(){
				console.log(this.deviceNo)
				this.pageNo = 1
				this.getList()
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		// background-color: #fff;
	}
	.container{
		height: 100%;
	}
	.topcheck{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #ededed;
		background-color: white;
	}
	.left{
		width: 50%;
		display: flex;
		justify-content: center;
	}
	.right{
		width: 50%;
		border-left: 4rpx solid #ededed;
		display: flex;
		justify-content: center;
	}
	.searchbox{
		height: 88rpx;
		padding: 15rpx 30rpx; 
		// padding: 30rpx;
		background-color: white;
		position: relative;
		display: flex;
		justify-content: space-between;
	}
	.search_input{
		border: none;
		height: 60rpx;
		width: 86%;
		font-size: 24rpx;
		border-radius: 30rpx;
		background-color: #F6F6F6;
		padding-left: 50rpx;
	}
	.searchbox image{
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		left: 40rpx;
		// top: 24%;
		top:35%;
		z-index: 99;
	}
	.searchbutton{
		width: 10%;
		height: 60rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 60rpx;
	}
	.itembox{
		background-color: white;
		padding: 10rpx 30rpx;
		margin-top: 20rpx;
	}
	.itembox:first-child{
		margin-top: 0;
	}
	.uni-input{
		display: flex;
		align-items: center;
	}
	.uni-input image{
		height: 12rpx;
		width: 24rpx;
		margin-left: 5rpx;
	}
	.itembox_top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #e4e4e4;
	}
	.itembox_lef image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 14rpx;
	}
	.itembox_lef{
		display: flex;
		align-items: center;
		font-weight: 500;
		width: 63%;
	}
	.caozuo{
		height: 100%;
		display: flex;
		align-items: center;
		flex:1;
		justify-content: flex-end;
	}
	.caozuo image{
		width: 7rpx;
		height: 29rpx;
		z-index: 99;
	}
	.bot_item{
		margin-top: 30rpx;	
		display: flex;
	}
	.nrbt{
		color: #898989;
		margin-right: 10rpx;
		min-width: 120rpx;
	}
	.number{
		// color: #ff6563;
	}
	.numbers{
		color:#26bf64;
	}
	.load{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #c6c6c6;
	}
	.add{
		height: 150rpx;
		width: 150rpx;
		position: fixed;
		bottom: 100rpx;
		right: 60rpx;
	}
	.popup{
		background-color: white;
		height: 100%;
		width: 100%;
	}
	.title{
		font-weight: bold;
	}
	.zwsj{
		width: 100%;
		display: flex;
		padding: 60% 170rpx 0;
	}
	.inzwsj{
		width: 100%;
	}
	.zwsjimg{
		width: 100%;
		height: 224rpx;
		margin-bottom: 37rpx;
	}
	.zwsjtext{
		width: 100%;
		font-size: 26rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #999999;
		line-height: 31rpx;
		text-align: center;
	}
	.bj{
		padding: 6rpx 12rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #FF4242;
	}
	.jcbj{
		padding: 6rpx 12rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #26bf64;
	}
	.topScroll{
		width: 100%;
		height: 85rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #ededed;
		// line-height: 80rpx;
		// padding:0 32rpx;
	}
	.scroll{
		height: 85rpx;
		// line-height: 80rpx;
		display: flex;
		white-space: nowrap;
		justify-content: space-between;
		padding-top: 12rpx;
	}
	.scroll-item{
		width: 50%;
		text-align: center;
		display: inline-block;
		font-size: 28rpx;
		font-family: Source Han Sans SC;
		// border-bottom: 2rpx solid #ededed;
		// font-weight: 500;
		// color: #545C6C;
	}
	.scroll-item:first-child{
		border-right: 4rpx solid #ededed;
		// border-bottom: 2rpx solid #ededed;
		// border-right: 2rpx solid #ededed;
	}
	.scroll-item2{
		font-size: 30rpx;
		font-family: Source Han Sans SC;
		// font-weight: bold;
		color: #0F6EFF;
	}
	.initem{
		display: flex;
		flex-direction: column;
		// border-bottom: 2rpx solid #ededed;
	}
	.zliebs{
		width: 100rpx;
		height: 4rpx;
		background-color: #0F6EFF;
		margin: 12rpx auto 0;
		border-radius: 20rpx;
	}
	.lists_item {
		// padding-top: 35rpx;
		padding: 0rpx 0rpx 16rpx 0rpx;
		box-sizing: border-box;
		display: flex;
	}
	.lists_item{
		padding-top: 16rpx;
	}
	.jczbs {
		width: 32%;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #667482;
		// text-align: center
	}
	
	.zbz {
		width: 27%;
		font-size: 24rpx;
		font-family: DIN Next LT Pro;
		font-weight: 400;
		// color: #2FCD81;
		// text-align: center
	}
	
	.zbzs {
		color: #2FCD81;
	}
	
	.szqs {
		width: 53rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.szqs image {
		width: 24rpx;
		height: 31rpx;
	}
	
	.sbsj {
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #667482;
		width: 23%;
		display: flex;
		align-items: center;
		// text-align: center
		// text-align: right;
	}
	.zximg{
		width: 30rpx;
		height: 30rpx;
		margin-left: 6rpx;
	}
	.szqss {
		flex:1;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
	}
	
	.scrolltop {
		padding: 20rpx 0rpx 16rpx 0rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #F6F8FB;
		width: 100%;
	}
	
	.tabitem {
		font-size: 26rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #2F3841;
		display: inline-block;
		padding-bottom: 8rpx;
	}
	
	.tabitem:first-child{
		width: 31%;
		// text-align: center
	}
	.tabitem:nth-child(2){
		width: 27%;
		// text-align: center
	}
	.tabitem:nth-child(3){
		width: 23%;
		// text-align: center
	}
	.tabitem:nth-child(4){
		flex:1
		// text-align: center
	}
	.topcheck{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #ededed;
		background-color: white;
	}
	.left{
		width: 50%;
		display: flex;
		justify-content: center;
	}
	.right{
		width: 50%;
		border-left: 4rpx solid #ededed;
		display: flex;
		justify-content: center;
	}
	.itembox_right{
		font-size: 26rpx;
	}
</style>