<!-- 设备异常记录 -->
<template>
	<view class="records">
		<view class="records-list" v-if="recordList.length">
			<view class="records-list-item" v-for="(item, index) in recordList" :key="index" @click="recordClick(item)">
				<view class="records-list-item-header">
					<view :class="{'not-red': Number(item.isRed) === 0}">{{ item.roadName }}</view>
					<view>{{ item.createBy }}</view>
				</view>
				<view class="records-list-item-content">
					<view>{{ item.exceprionDes }}</view>
				</view>
				<view class="records-list-item-bottom">
					<view>{{ $u.timeFormat(item.createTime, 'mm-dd hh:MM') }}</view>
					<view>查看详情</view>
				</view>
			</view>
		</view>
		<view class="records-empty" v-else>
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" />
		</view>
		<u-loadmore v-if="recordList.length" :status="status" color="#fff" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordList: [],
				status: 'loadmore',
				page: 1
			}
		},
		onShow() {
			this.page = 1
			this.recordList = []
			this.getRecordList();
		},
		methods: {
			getRecordList() {
				uni.$u.api.deviceAbnormalApi.getDeviceAbnormalListApi({
					pageNum: this.page,
					pageSize: 15
				}).then(res => {
					if (res.code === 200) {
						this.recordList = this.recordList.concat(res.data.rows)
						setTimeout(() => {
							if (this.page >= res.data.pages) this.status = 'nomore';
							else this.status = 'loading';
						}, 1000)
					}
				})
			},
			recordClick(item) {
				uni.$u.route({
					url: 'pages/patrolManagement/deviceAbnormalRecords/recordsDetails/recordsDetails',
					params: {
						id: item.id
					}
				})
			}
		},
		onPullDownRefresh() {
			this.recordList = []
			this.page = 1;
			this.status = 'loading';
			this.getRecordList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.page >= 100) return;
			this.status = 'loading';
			this.page = ++this.page;
			this.getRecordList()
		}
	}
</script>

<style lang="scss">
	page {
		min-height: calc(100vh - 44px);
		background-color: #1767F2;
	}
</style>
<style lang="scss" scoped>
	@import './deviceAbnormalRecords.scss';
</style>
