<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="liebiaos" v-if="">
				<view class="searchbox">
					<view class="uni-px-8 uni-pb-8">
						<text>设备选择：</text>
						<uni-data-select v-model="value" :localdata="rangeList" @change="change"></uni-data-select>
					</view>
					<view class="example-body">
						<text>时间区间：</text>
						<uni-datetime-picker v-model="rangetime" type="daterange" @maskClick="maskClick" />
					</view>
				</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:'异常趋势图'
					}
				],
				value:0,
				rangeList: [],
				isActive:0,
				rangetime: [Date.now(), Date.now()],
				deployId:'',
				resolt:[],
			}
		},
		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		
					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		
					this.scorllheight = this.height - 174
					this.scorllheights = this.height - 90
				}
			});
		},
		watch: {
			rangetime(newval) {
				console.log('范围选:', this.rangetime);
				this.startTime = this.rangetime[0]
				this.endTime = this.rangetime[1]
				this.qushiList()
			},
		},
		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()
				if(index==1){
					this.sbeiList()
				}
			},
			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
						this.List = this.List.concat(data)
						if(res.data.data.total != 0){
							this.allNum = Number(res.data.data.total)/Number(this.pageSize)+'';
							if(this.allNum.indexOf('.') == -1) {
								this.allNum = this.allNum;
							} else {
								this.allNum = parseInt(Number(this.allNum)+1);
							}
							if(this.pageNo == this.allNum) {
								this.isLastpage = true;
								 this.loadStatus='nomore'
							} else {
								this.isLastpage = false;
								// this.isLoadMore=true
								this.loadStatus = 'more'
							}
						}else{
							this.isLastpage = true;
							this.loadStatus='nomore'
						}
					}
					uni.hideLoading();
					this.isRefresher= false
				})
			},
			lower() {
				// 最后一页了，取消下拉功能
				if (this.isLastpage) {
					return
				}
				clearInterval(this.intervalId);
				var num = 1;
				this.intervalId = setInterval(() => {
					num = num+1;
				},1000)
				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
						this.List = this.List.concat(data)
						if(res.data.data.total != 0){
							if(this.pageNo == this.allNum) {
								this.isLastpage = true;
								 this.loadStatus='nomore'
							} else {
								this.isLastpage = false;
								// this.isLoadMore=true
								this.loadStatus = 'more'
							}
						}else{
							this.isLastpage = true;
							this.loadStatus='nomore'
						}
					}
				})
			},
			changenr(){
				this.pageNo = 1
				this.getList()
			},
			// 趋势图接口
			qushiList(){
				const data = {
					  deployId:this.deployId,
					  startTime:this.startTime,
					  endTime:this.endTime,
				}
				this.$http.post('/applet/survAlertRecord/alertSummary',data).then(res => {
					console.log("趋势数据",res.data.data)
					let ovelit = res.data.data
					this.resolt = ovelit.itemList.map(item=>{
						return {
							...item,
							data:ovelit.dataMap[item.entity] || []
						}
					})
					console.log("666666666666",this.resolt)
				})
			},
			sbeiList(){
				uni.showLoading({
					title: '加载中'
				});
				this.$http.get('/applet/survDeviceDeploy/deviceList?stationCode=').then(res =>{
					let sbList = []
					this.rangeList = res.data.data.map((lit,index)=>{
						return{
							"value":index,
							"text":lit.deployDes,
							"id":lit.id,
						}
					})
					this.deployId = this.rangeList[this.value].id
					this.qushiList()
					uni.hideLoading();
				})
			},
			// 选择deployid
			change(e) {
				console.log("单选值", this.rangeList[this.value].id)
				this.deployId = this.rangeList[this.value].id
				// this.sbeiList()
			},
			// 选择日期范围
			maskClick(e){
				console.log('maskClick事件:', e);
				this.startTime = e[0]
				this.endTime = e[1]
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.container{
		height: 100%;
	}
	.searchbox{
		height: 148rpx;
		padding: 15rpx 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: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;
	}
	.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%;
	}
	.title{
		font-weight: bold;
	}
	.load{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #c6c6c6;
	}
	.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;
	}
	.topScroll{
		width: 100%;
		height: 85rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #ededed;
	}
	.scroll{
		height: 85rpx;
		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;
	}
	.scroll-item2{
		font-size: 30rpx;
		font-family: Source Han Sans SC;
		color: #0F6EFF;
	}
	.zliebs{
		width: 100rpx;
		height: 4rpx;
		background-color: #0F6EFF;
		margin: 12rpx auto 0;
		border-radius: 20rpx;
	}
	.lists_item {
		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;
	}
	
	.zbz {
		width: 27%;
		font-size: 24rpx;
		font-family: DIN Next LT Pro;
		font-weight: 400;
	}
	
	.sbsj {
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #667482;
		width: 23%;
		display: flex;
		align-items: center;
	}
	.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%;
	}
	.tabitem:nth-child(2){
		width: 27%;
	}
	.tabitem:nth-child(3){
		width: 23%;
	}
	.tabitem:nth-child(4){
		flex:1
	}
	.itembox_right{
		font-size: 26rpx;
	}
</style>
