<template>
	<view class="notice-box">
		<view class="notice-top" @click="openSelect">
			{{noticeTimeObj.beginTime!==''?noticeTimeObj.beginTime+' ~ '+noticeTimeObj.endTime:'全部时间'}}<view class="iconfont icon-xiangyou1"></view>
		</view>
		<mescroll-body ref="mescrollRef" top="80" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" >
			<view class="notice-list">
				<view class="notice-item" v-for="(item,index) in dataList" :key="index">
					<view class="item-header">
						<view class="item-header-left">
							<view class="header-title">
								设备报警通知
							</view>
							<view class="header-time">
								{{$u.timeFormat(item.alarmTime, 'mm月dd日')}}
							</view>
						</view>
						<view class="item-header-right" :style="{color:index%3==2?'#10CC70':index%3==1?'#FF2B38':'#999999'}">
							{{index%3==2?'已处理':index%3==1?'未处理':'待处理'}}
						</view>
					</view>
					<view class="item-body">
						<view class="item-body-left">
							<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 class="item-body-right" v-if="index%3!==2">
							<u-button type="primary">处理</u-button>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<u-calendar v-model="timeshow" :mode="mode" :min-date="minDate" :max-date="maxDate" @change="selectTime"></u-calendar>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import {numberfilter} from "@/static/common/js/util/number-to-chinese.js"
	export default {
		mixins: [MescrollMixin],
		 filters: {
		    numberfilter
		  },
		data() {
			return {
				upOption:{
					noMoreSize: 4,
					textNoMore: '----  已经到底啦  ----',
					empty:{
						tip: '~ 搜索无数据 ~' // 提示
					}
				},
				dataList:[],
				timeshow: false,
				mode: 'range',
				minDate:'1950-01-01',
				maxDate:'2023-12-28',
				timeObj:{
					beginTime:'',
					endTime:''
				},
				
				loadStatus:'loadmore',//加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
				emptyShow:false,  //是否显示数据为空
				pageNum:1,
				pageSize:10,
				orderByColumn:'alarmTime',
				isAsc:'desc',
				noticeTimeObj:{
					beginTime:'',
					endTime:''
				}
			}
		},
		components: {
		},
		onLoad() {
			// this.getAlarmList();
		},
		onShow() {

		},
		methods: {
			openSelect(){
				this.maxDate=this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
				this.timeshow = true;
			},
			selectTime(e){
				console.log("当前选择日期",e)
				this.noticeTimeObj.beginTime = e.startDate;
				this.noticeTimeObj.endTime = e.endDate;
				// 触发查询
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				let opt = {
					url: '/iot/admin/device/list',
					method: 'POST',
				};
				let params = {
					page: page.num,
					pageSize: page.size,
					search: this.searchVal
				}
				this.$request.TokenRequest(opt, params).then(res => {
					console.log("获取设备列表",res)
					// 假数据
					res = {
  "totalCount": 12,
  "data": [
    {
      "tenantId": 10213,
      "createId": 10403,
      "createBy": "",
      "createTime": "2023-12-02 23:25:06",
      "updateBy": "",
      "updateTime": "2023-12-02 23:25:06",
      "recordId": 12738,
      "sourceId": null,
      "triggerId": 29,
      "triggerName": "xt",
      "deviceId": "322",
      "deviceKey": "3JcEibiaC4baH1ie",
      "alarmLevel": "1",
      "alarmLevelName": null,
      "currentValue": "(一号主机通道1:987)",
      "alarmContent": "设备 报警",
      "alarmTime": "2023-12-02T23:25:06",
      "processState": "UNPROCESS",
      "sendState": "SEND",
      "sendCount": 1,
      "sendWay": null,
      "typeId": 20,
      "typeCode": "4a7215I6DEBaH1aH",
      "typeName": "低报报警",
      "alarmDivide": "ALARM",
      "alarmSource": "CLOUD",
      "deviceName": "一号主机",
      "processStateName": "未处理",
      "alarmProcessList": [
        
      ],
      "sendStateName": "已发送"
    },
    {
      "tenantId": 10213,
      "createId": 10403,
      "createBy": "",
      "createTime": "2023-12-02 23:24:05",
      "updateBy": "",
      "updateTime": "2023-12-02 23:24:05",
      "recordId": 12733,
      "sourceId": null,
      "triggerId": 29,
      "triggerName": "xt",
      "deviceId": "322",
      "deviceKey": "3JcEibiaC4baH1ie",
      "alarmLevel": "1",
      "alarmLevelName": null,
      "currentValue": "(一号主机通道1:987)",
      "alarmContent": "设备 报警",
      "alarmTime": "2023-12-02T23:24:06",
      "processState": "UNPROCESS",
      "sendState": "SEND",
      "sendCount": 1,
      "sendWay": null,
      "typeId": 20,
      "typeCode": "4a7215I6DEBaH1aH",
      "typeName": "低报报警",
      "alarmDivide": "ALARM",
      "alarmSource": "CLOUD",
      "deviceName": "一号主机",
      "processStateName": "未处理",
      "alarmProcessList": [
        
      ],
      "sendStateName": "已发送"
    },
    {
      "tenantId": 10213,
      "createId": 10403,
      "createBy": "",
      "createTime": "2023-12-02 23:24:05",
      "updateBy": "",
      "updateTime": "2023-12-02 23:24:05",
      "recordId": 12734,
      "sourceId": null,
      "triggerId": 29,
      "triggerName": "xt",
      "deviceId": "322",
      "deviceKey": "3JcEibiaC4baH1ie",
      "alarmLevel": "1",
      "alarmLevelName": null,
      "currentValue": "(一号主机通道1:987)",
      "alarmContent": "设备 报警",
      "alarmTime": "2023-12-02T23:24:06",
      "processState": "UNPROCESS",
      "sendState": "SEND",
      "sendCount": 1,
      "sendWay": null,
      "typeId": 20,
      "typeCode": "4a7215I6DEBaH1aH",
      "typeName": "低报报警",
      "alarmDivide": "ALARM",
      "alarmSource": "CLOUD",
      "deviceName": "一号主机",
      "processStateName": "未处理",
      "alarmProcessList": [
        
      ],
      "sendStateName": "已发送"
    },
    {
      "tenantId": 10213,
      "createId": 10403,
      "createBy": "",
      "createTime": "2023-12-02 23:24:05",
      "updateBy": "",
      "updateTime": "2023-12-02 23:24:05",
      "recordId": 12735,
      "sourceId": null,
      "triggerId": 29,
      "triggerName": "xt",
      "deviceId": "322",
      "deviceKey": "3JcEibiaC4baH1ie",
      "alarmLevel": "1",
      "alarmLevelName": null,
      "currentValue": "(一号主机通道1:987)",
      "alarmContent": "设备 报警",
      "alarmTime": "2023-12-02T23:24:06",
      "processState": "UNPROCESS",
      "sendState": "SEND",
      "sendCount": 1,
      "sendWay": null,
      "typeId": 20,
      "typeCode": "4a7215I6DEBaH1aH",
      "typeName": "低报报警",
      "alarmDivide": "ALARM",
      "alarmSource": "CLOUD",
      "deviceName": "一号主机",
      "processStateName": "未处理",
      "alarmProcessList": [
        
      ],
      "sendStateName": "已发送"
    }
  ],
  "code": 0,
  "msg": "查询成功"
}
					if(res.code === 0){
						
						let curPageData = res.data && res.data;
						let curPageLen = curPageData && curPageData.length || 0;
						let totalSize = res.totalCount; 
						this.$nextTick(()=>{
							// 隐藏下拉刷新和上拉加载的状态;
							this.mescroll.endBySize(curPageLen, totalSize);
						})
						
						//设置列表数据
						if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
						this.dataList = curPageLen > 0 &&  this.dataList.concat(curPageData); //追加新数据
					}else{
						this.$u.toast(res.msg);
						this.mescroll.endErr();
					}
				}, error => {
				})
			},
			// 获取报警通知列表
			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.dataList.push(...res.rows);
							// 判断当前是否显示空
							if(!this.dataList.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>
	page,.notice-box{
		background: #f5f5f5;
	}
</style>

<style scoped lang="scss">
	.notice-box{
		// background: #ebeef5;
		// height: 100%;
		// display: flex;
		// flex-direction: column;
	}
	.notice-top{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
		border-bottom: 1px solid #f4f6f8;
		z-index: 999;
		.iconfont{
			transform: rotate(90deg);
			margin-left: 10rpx;
		}
	}
	.notice-list{
		padding: 24rpx 24rpx 0;
		.notice-item{
			width: 702rpx;
			min-height: 381rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 24rpx;
			.item-header{
				// height: 104rpx;
				// padding-left: 28rpx;
				// padding-top: 23rpx;
				padding: 20rpx 25rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #e8e8f2;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.item-header-left{
					.header-title{
						font-size: 28rpx;
						line-height: 28rpx;
						color: #444444;
					}
					.header-time{
						font-size: 26rpx;
						line-height: 26rpx;
						color: #999;
						margin-top: 15rpx;
					}
				}
				.item-header-right{
					
				}
			}
			.item-body{
				padding: 18rpx 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				.item-body-left{
					.body-txt{
						font-size: 26rpx;
						line-height: 42rpx;
						color: #0053A2;
						text{
							color: #444;
						}
					}
				}
				.item-body-right{
					
				}
				
			}
		}
	}
</style>
