<template>
	<view id="alarm">
		<nav-bar :is-back="true" title="报警通知"></nav-bar>
		<scroll-view  class="scroll-box"  scroll-y  @scrolltolower="reachBottom">
			<view class="alarm-list">
				<view class="alarm-item" v-for="(item,index) in alarmList" :key="index">
					<view class="item-header">
						<view class="header-title">
							设备报警通知
						</view>
						<view class="header-time">
							{{$u.timeFormat(item.alarmTime, 'mm月dd日')}}
						</view>
					</view>
					<view class="item-body">
						<view class="body-txt">设备报警</view>
						<view class="body-txt"><text>时间：</text>{{$u.timeFormat(item.alarmTime, 'yyyy年mm月dd日 hh时MM分ss秒')}}</view>
						<view class="body-txt"><text>设备：</text>{{item.deviceName}}</view>
						<view class="body-txt"><text>等级：</text>{{item.alarmLevel | numberfilter}}级</view>
						<view class="body-txt"><text>内容：</text>{{item.alarmContent}}</view>
						<view class="body-txt">当前值：{{item.currentValue}}</view>
					</view>
				</view>
				<u-empty :show="emptyShow" text="没有找到数据" :font-size="40" :icon-size="300" :margin-top="100" mode="list"></u-empty>
				<u-loadmore v-if="!emptyShow"  :status="loadStatus" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {numberfilter} from "@/static/common/js/util/number-to-chinese.js"
	import NavBar from '@/common/components/navbar/NavBar.vue'
	export default {
		 filters: {
		    numberfilter
		  },
		data() {
			return {
				alarmList:[],
				loadStatus:'loadmore',//加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
				emptyShow:false,  //是否显示数据为空
				pageNum:1,
				pageSize:10,
				orderByColumn:'alarmTime',
				isAsc:'desc',
			}
		},
		components: {
			NavBar
		},
		onLoad() {
			this.getAlarmList();
		},
		onShow() {

		},
		methods: {
			// 获取报警通知列表
			getAlarmList(){
				let opt = {
					url:  '/prod-api/iot/alarm/record/list',
					method: "GET",
				}
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					orderByColumn: this.orderByColumn,
					isAsc: this.isAsc,
				}
				this.$request.TokenRequest(opt,params).then(res => {
					console.log("getAlarmList",res);
					if(res.code==200){
						if(res.rows){
							this.alarmList.push(...res.rows);
							// 判断当前是否显示空
							if(!this.alarmList.length){
								this.emptyShow = true;
							}else{
								this.emptyShow = false;
							}
							// 判断当前是否为最后一页
							if(res.rows.length<this.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
								  this.isLoadMore=true                                             
								  this.loadStatus='nomore'
							}else{
								  this.isLoadMore=false
								  this.loadStatus='loadmore'
							}
						}else{
							this.isLoadMore=true
							this.loadStatus='nomore'
						}
						
					}else{
						this.$u.toast(res.msg);
						this.isLoadMore=false
						if(this.pageNum>1){
							this.pageNum=1
						}
					}
					
				}, error => {
					this.$u.toast('服务器开小差了呢，请您稍后再试')
					this.isLoadMore=false
					if(this.pageNum>1){
						this.pageNum=1
					}
				})
			},
			// 上拉加载更多
			reachBottom() {
				console.log("这里上拉加载更多")
				if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
					this.loadStatus = 'loading';
					this.isLoadMore=true
					this.pageNum+=1
					this.getAlarmList()
			  }
			},
		}
	}
</script>

<style scoped lang="less">
	#alarm{
		background: #ebeef5;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.scroll-box{
		height: calc(100% - var(--status-bar-height) - 44px);
		/* #ifdef APP-PLUS */
		height: calc(100% - var(--status-bar-height) - 48px);
		/* #endif */
	}
	.alarm-list{
		padding: 24rpx 24rpx 0;
		.alarm-item{
			width: 702rpx;
			min-height: 381rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 24rpx;
			.item-header{
				height: 104rpx;
				padding-left: 28rpx;
				padding-top: 23rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #e8e8f2;
				.header-title{
					font-size: 28rpx;
					line-height: 28rpx;
					color: #444444;
				}
				.header-time{
					font-size: 26rpx;
					line-height: 26rpx;
					color: #999;
					margin-top: 15rpx;
				}
			}
			.item-body{
				padding: 18rpx 26rpx;
				.body-txt{
					font-size: 26rpx;
					line-height: 42rpx;
					color: #0053A2;
					text{
						color: #444;
					}
				}
			}
		}
	}
</style>
