<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="输入设备名查询" clearButton="auto"
				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="8">
					<view class="demo-uni-col">状态：{{item.flg}}</view>
				</uni-col>
				<uni-col :span="16">
					<view class="demo-uni-col" style="font-size: 16upx;text-align: right;">解除时间：{{item.jcTime}}</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,
				},
				dataList: []
			}
		},
		onShow() {
			this.loadData()
		},
		onReachBottom() {
			this.pageSize += 10
			this.loadData()
		},
		methods: {
			loadData() {
				const currProInfo = JSON.parse(uni.getStorageSync('currProInfo'))
				uni.setNavigationBarTitle({
					title: `历史报警-${currProInfo.text}`
				});
				
				this.$API.call({
					url: '/api/historyAlarm/loadHistoryAlarmByProId',
					method: "GET",
					data:{
						page: this.page,
						pageSize: this.pageSize,
						proId: currProInfo.value,
						deviceName: this.query.name||''
					},
					cb: (res) => {
						this.dataList = res.data.dataList
					}
				})
			},
		}
	}
</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;
	}
</style>
