<template>
	<view :class="$isEmpty(list)?'bg-white':'container'">
		<u-calendar v-model="dateShow" mode="date" @change="change" borderRadius="8" active-bg-color="#5064eb"></u-calendar>
		<view class="top bg-white " style="position: fixed;top: 0;z-index: 999;width: 100%;">
			<view class="flex justify-between">
				<view class="flex">
					<view class="flex justify-center align-center">
						<image v-if="fireType==0" style="width: 80rpx;height: 80rpx;"
							src="../../../static/icon/yangan.png"></image>
						<image v-if="fireType==1" style="width: 80rpx;height: 80rpx;"
							src="../../../static/icon/ranqi.png"></image>
						<image v-if="fireType==2" style="width: 80rpx;height: 80rpx;"
							src="../../../static/icon/xiaofang.png"></image>
						<image v-if="fireType==3" style="width: 80rpx;height: 80rpx;"
							src="../../../static/icon/dianbiao.png"></image>
					</view>
					<view class="padding-left-40">
						<view>
							<text class="text-bold">设备类型：</text>
							<text v-if="fireType==0">烟感报警器</text>
							<text v-if="fireType==1">燃气报警器</text>
							<text v-if="fireType==2">消防栓</text>
							<text v-if="fireType==3">电表设备</text>
						</view>
						<view class="padding-top-10">
							<text class="text-bold" v-text="fireType==3?'抄表记录：':'告警记录：'"></text>
							<text class="text-red padding-right-10 text-bold text-lg">{{total?total:0}}</text>条
						</view>
					</view>
				</view>
				<view @click="dateShow=true" class="flex base-color flex-direction justify-center align-center">
					<view class="padding-bottom-20 text-bold">
						<text class="cuIcon-filter padding-right-20"></text>
						<text class="">筛选</text>
					</view>
					<u-tag :text="filterDate" @close="tagClick" :show="!$isEmpty(filterDate)" size="mini"
						:closeable="true" mode="plain" type="error" />
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<view v-if="!$isEmpty(list)" class="history">
				<u-time-line>
					<u-time-line-item nodeTop="2" v-for="(item,index) in list" :key="index">
						<template v-slot:node>
							<view class="u-node bg-white">
								<u-icon name="clock-fill" color="#5064eb" :size="28"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view v-if="fireType==3">
								<view class="u-order-title">抄表时间：{{item.readTime}}</view>
								<view class="content" style="width: 636rpx;">
									<view class="nav-title">
										<text class="">设备厂家：</text>
										<text>{{item.deviceFactory}}</text>
									</view>
									<view class="nav-title">
										<text class="">安装位置：</text>
										<text v-text="item.installAddress"></text>
									</view>
									<view class="nav-title">
										<text class="">年用量：</text>
										<text>{{item.yearValue}} Kwh</text>
									</view>
									<view class="nav-title">
										<text class="">月用量：</text>
										<text>{{item.monthValue}} Kwh</text>
									</view>
									<view class="nav-title">
										<text class="">日用量：</text>
										<text>{{item.dayValue}} Kwh</text>
									</view>
									<view class="nav-title">
										<text class="">总用量：</text>
										<text>{{item.totalValue}} Kwh</text>
									</view>
								</view>
							</view>
							<view v-else>
								<view class="u-order-title">{{item.recordTime}}</view>
								<view class="content" style="width: 636rpx;">
									<view>
										<text>告警等级：</text>
										<text v-if="item.level==1" class="text-red">严重告警</text>
										<text v-else-if="item.level==2" class="text-orange">警告告警</text>
										<text v-else>提示告警</text>
									</view>
									<view class="nav-title">
										<text class="">告警类型：</text>
										<text v-text="item.alarmType==0?'业务报警':'设备报警'"></text>
									</view>
									<view class="nav-title">
										<text class="">设备名称：</text>
										<text>{{item.deviceName}}</text>
									</view>
									<view class="nav-title">
										<text class="">告警原因：</text>
										<text>{{item.name}}</text>
									</view>
									<view v-if="item.monitorValue" class="nav-title">
										<text class="">监测值：</text>
										<text class="text-red text-bold">{{item.monitorValue}}</text>
									</view>
								</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				//设备类型
				fireType: 0,
				deviceId: '', //设备列表的imei等于设备告警记录的deviceId

				//日期筛选
				dateShow: false,
				filterDate: '',
				filterTagShow: false,

				list: [],
				total: '',

				downOption: {
					use: false,
					auto: false
				},
				upOption: {
					page: {
						page: 0,
						size: 10
					},
					noMoreSize: 3,
					empty: {
						tip: '暂无相关数据'
					}
				},
			}
		},
		onLoad(options) {
			this.deviceId = options.imei || ''
		},
		onShow() {
			this.fireType = getApp().globalData.fireType || 0
			if (this.fireType == 0) {
				uni.setNavigationBarTitle({
					title: "烟感报警记录"
				})
			} else if (this.fireType == 1) {
				uni.setNavigationBarTitle({
					title: "气感报警记录"
				})
			} else if (this.fireType == 2) {
				uni.setNavigationBarTitle({
					title: "消防水压报警记录"
				})
			}

		},
		methods: {
			change(e) {
				this.filterDate = e.result
				this.mescroll.resetUpScroll()
			},
			tagClick() {
				this.filterDate = ''
				this.mescroll.resetUpScroll()
			},

			downCallback() {
				setTimeout(() => {
					this.list = []
					this.mescroll.resetUpScroll()
				}, 1500)
			},
			async upCallback(mescroll) {
				let params = {
					current: mescroll.num,
					size: mescroll.size,
					deviceId: this.deviceId
				}
				if (!this.$isEmpty(this.filterDate)) {
					params.recordTime = this.filterDate
				}
				try {

					let res = null
					if (this.fireType == 3) {
						//抄表记录
						res = await this.$api.fireDevice.electricmeterrecord({
							imei: this.deviceId
						})
					} else {
						//设备报警记录
						res = await this.$api.fireDevice.alarmRecord(params)
					}
					let data = res.data.records
					let length = data.length
					this.total = res.data.total
					mescroll.endBySize(length, this.total);
					if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(data); //追加新数据

				} catch (e) {
					console.log(e);
					mescroll.endErr();
				}
			},
		}
	}
</script>

<style lang="scss">
	.container {
		height: calc(100vh);
		padding: 140rpx 0rpx 0rpx;

		.fixed {
			position: fixed;
			top: 0rpx;
			left: 0;
			width: 100%;
			background-color: #FFFFFF;
			box-sizing: border-box;
			z-index: 999;
		}
	}

	.text-red {
		color: #ca0000;
	}

	.nav-title {
		font-size: 28upx;
		font-weight: 300;
		padding-top: 20rpx;
	}

	.top {
		padding: 30rpx;
		box-shadow: 0 4rpx 6rpx rgba(204, 204, 204, .2);
		// border-bottom: 1rpx solid #efefef;
	}

	.history {
		background-color: #FFFFFF;
		padding: 40rpx 20rpx 20rpx 50rpx;
	}

	.content {
		box-shadow: 0 8rpx 2rpx rgba(204, 204, 204, .2), 0 -8rpx 6rpx rgba(204, 204, 204, .1), 8rpx 0rpx 6rpx rgba(204, 204, 204, .1), -8rpx 0rpx 6rpx rgba(204, 204, 204, .1);
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
</style>
