<template>
	<view class="notice-box">
		<u-dropdown class="notice-top">
			<u-dropdown-item v-model="paramsObj.status" title="状态" :options="statusOptions" @change="searchList"></u-dropdown-item>
			<u-dropdown-item v-model="paramsObj.applyStatus" title="审核状态" :options="applyStatusOptions" @change="searchList"></u-dropdown-item>
		</u-dropdown>
		<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">
								{{item.alarmName}}
							</view>
							<!-- <view class="header-time">
								{{$u.timeFormat(item.alarmTime, 'mm月dd日')}}
							</view> -->
						</view>
						<view class="item-header-right" :style="{color:item.applyState===1?'#10CC70':item.applyState===0?'#FF2B38':'#999999'}">
							{{item.applyState===1?'已处理':item.applyState===0?'未处理':'已忽略'}}
						</view>
					</view>
					<view class="item-body">
						<view class="item-body-left">
							<view class="body-txt"><text>时间：</text>{{item.createdAt}}</view>
							<view class="body-txt"><text>设备：</text>{{item.devName}}</view>
							<view class="body-txt"><text>状态：</text>{{item.status}}</view>
							<view class="body-txt"><text>等级：</text>{{item.alarmLevel | numberfilter}}级</view>
							<view class="body-txt"><text>内容：</text>{{item.alarmContent}}</view>
						</view>
						<view class="item-body-right" v-if="item.applyState!==1">
							<u-button type="primary" @click="openApply(item)">处理</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>
		<u-modal v-model="applyShow" title="告警审核" :mask-close-able="true" @confirm="applyItem" ref="applyModal" :async-close="true">
			<view class="slot-content">
				<view class="content-item">
					<view class="content-label">审核类型:</view>
					<view class="content-value">
						<uni-data-select
							v-model="applyObj.applyState"
							:localdata="applyTypeList"
							placeholder="选择审核类型"
						></uni-data-select>
					</view>
				</view>
				<view class="content-item">
					<view class="content-label">审核类型:</view>
					<view class="content-value">
						<u-input v-model="applyObj.applyRemark" type="textarea" border height="200" :auto-height="true" />
					</view>
				</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</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: '~ 暂无告警数据 ~' // 提示
					}
				},
				tabbarIndex:3,
				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:''
				},
				paramsObj:{
					status:null,
					applyStatus:null,
					devId:null,
				},
				statusOptions: [{
						label: '全部',
						value: null,
					},{
						label: '启用',
						value: 1,
					},
					{
						label: '禁用',
						value: 2,
					}
				],
				applyStatusOptions: [{
						label: '全部',
						value: null,
					},{
						label: '未处理',
						value: 0,
					},
					{
						label: '已处理',
						value: 1,
					},
					{
						label: '已忽略',
						value: 2,
					}
				],
				// 审核弹窗
				applyShow:false,
				applyId:null,
				applyObj:{
					applyState:null,
					applyRemark:null,
				},
				applyTypeList: [{
						text: '未处理',
						value: 0,
					},
					{
						text: '已处理',
						value: 1,
					},
					{
						text: '已忽略',
						value: 2,
					}
				]
			}
		},
		components: {
		},
		onLoad(option) {
			// 设备列表
			if(option.devId){
				this.paramsObj.devId = option.devId;
				uni.setNavigationBarTitle({
					title: option.devName+'告警列表'
				});
			}
			
		},
		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();
			},
			searchList(){
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				let params = {
					page: page.num,
					pageSize: page.size,
					status: this.paramsObj.status,
					"Wheres": {
							"wheres": [
									{"field": "applyState","operator": "=","value": this.paramsObj.applyStatus},
							]
					},
					// devId: this.paramsObj.devId
				}
				if(this.paramsObj.devId){
					params.devId = this.paramsObj.devId;
				}
				this.$api.iotsApi.getAlarmReacordList(params).then(res => {
					console.log("获取设备列表",res)
					if(res.code === 0){
						let curPageData = res.data && res.data.list;
						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 => {
				})
			},
			// 点击审核
			openApply(data){
				// console.log("点击审核",data)
				this.applyId = data.id;
				this.applyObj.applyState = data.applyState;
				this.applyObj.applyRemark = "";
				this.applyShow = true;
			},
			applyItem(){
				console.log("审核告警",this.applyObj)
				if(this.applyObj.applyState!==""){
					let params = {
						ids:[this.applyId],
						...this.applyObj
					}
					console.log("params", params)
					this.$api.iotsApi.applyAlarmRecord(params).then(res => {
						console.log("审核告警",res)
						if(res.code === 0){
							this.applyShow = false;
							this.$refs.uToast.show({
								title: res.message,
								type: 'success',
							})
							this.mescroll.resetUpScroll();
						}else{
							this.$refs.uToast.show({
								title: res.message,
								type: 'error',
							})
						}
					}, error => {
					})
				}else{
					this.$refs.uToast.show({
										title: '请选择审核状态',
										type: 'error',
									})
					this.$refs.applyModal.clearLoading();
				}
			}
		}
	}
</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;
		z-index: 999;
		background-color: #FFFFFF;
	}
	.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;
						font-weight: bold;
					}
					.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{
					
				}
				
			}
		}
	}
	
	.slot-content{
		padding: 20rpx;
		.content-item{
			&:first-child{
				margin-bottom: 20rpx;
			}
			.content-label{
				margin-bottom: 20rpx;
				font-size: 30rpx;
			}
		}
	}
	::v-deep .u-model__title.u-model__title{
		padding-top: 30rpx;
		font-weight: 500;
	}
</style>
