<template>
	<view class="uni-container">
		<view style="background-color: white;">
			<uni-search-bar v-model="query.name" class="uni-mt-10 margin0" radius="5" placeholder="输入设备名查询" 		
				cancelButton="none" @confirm="loadData" />
		</view>
		<uni-card v-for="(item,index) in dataList" :title="item.deviceName" :key='index' :isFull="true"
			:sub-title="'检测项：'+item.item" :extra="'检测值：'+item.data" :thumbnail="iconList[2]">
			<uni-row class="demo-uni-row">
				<uni-col :span="16">
					<view class="demo-uni-col">状态：{{item.flg}}</view>
				</uni-col>
				<uni-col :span="8">
					<view class="demo-uni-col">
						<view class="button" @click="removeAlarm(item)"><text class="button-text">解除报警</text></view>
					</view>
				</uni-col>
			</uni-row>
		</uni-card>
		<view v-if="!dataList.length" style="text-align:center;margin-top:55upx;color:#999;font-weight:bolder;">未查询的传感器数据</view>
	</view>
</template>
<script>
	import online from '@/icon/online.png'
	import offline from '@/icon/offline.png'
	import wendu from '@/icon/wendu.png'
	
	export default {
		data() {
			return {
				iconList: [online, offline, wendu],
				query: {
					name: ''
				},
				page: 0,
				pageSize: 10,	
				devInfo: {
					onNum: 26,
					offNum: 13,
				},
				removeWarnId: '',
				dataList: []
			}
		},
		onShow() {
			this.loadData()
		},
		methods: {
			loadData() {
				const currProInfo = JSON.parse(uni.getStorageSync('currProInfo'))
				uni.setNavigationBarTitle({
					title: `实时报警-${currProInfo.text}`
				});
				
				this.$API.call({
					url: '/api/nowAlarm/loadNowAlarmByProId',
					data:{
						page: this.page,
						pageSize: this.pageSize,
						proId: currProInfo.value,
						deviceName: this.query.name||''
					},
					cb: (res) => {
						if (res.data) {
							this.dataList = res.data.dataList || []
						}
					}
				})
			},
			async dialogConfirm() {
				if(!this.removeWarnId){
					alert('请求参数不可为空')
					return
				}
				this.$API.call({
					url: '/api/nowAlarm/releaseAlarm',
					method: "PUT",
					showSuccessTip: true,
					data:{
						warnMsgId: this.removeWarnId
					},
					cb: (res) => {
						const removeIndex = this.dataList.findIndex(item=>item.warnMsgId === this.removeWarnId)
						this.dataList.splice(removeIndex, 1)
					}
				})
			},
			removeAlarm(item) {
				this.removeWarnId = item.warnMsgId
				this.$TIP.confirmModal({
					cb: (flag)=>{
						if(flag){
							this.dialogConfirm()
						}
					}
				})
			},
			onReachBottom() {
				this.pageSize += 10
				this.loadData()
			},
		}
	}
</script>

<style scoped>
	@import '../../../common/uni-nvue.css';

	.margin0 {
		margin: 0;
	}

	.scroll-view {
		width: 100vw;
		height: 45vh;
		overflow: hidden;
		white-space: nowrap;
	}
	.view {
		display: inline-block;
	}
	.button {
		height: 50upx;
		width: 100%;
		margin: 0 5px;
		padding: 0;
		border-radius: 5px;
		background-color: #007aff;
		text-align: center;
	}
	.button-text {
		color: #fff;
		font-size: 12px;
		line-height: 54upx;
	}
</style>
