<style lang='scss' scoped>
	.alarmCenter{
		width: 100%;
		height: 100%;
		background-color: #FBF8FB;
		&-header{
			display: flex;
			padding: 20rpx;
			background-color: #fff;
			&-picker{
				width: 200rpx;
				text-align: center;
			}
			&-search{
				width: calc(100% - 200rpx);
			}
		}
		&-list{
			padding: $paddingTB $paddingLR;
			background-color: #FBF8FB;
		}
		&-box{
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: $box-shadow;
			position: relative;
			margin-bottom: 30rpx;
			&-rightTop-icon{
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				
			}
			&-top{
				padding: 20rpx;
				border-bottom: 1px solid #eee;
				&-info{
					display: flex;
					padding-top: 20rpx;
					align-items: center;
				}
			}
			&-bottom{
				padding: $paddingTB $paddingLR;
				&-row{
					padding-bottom: 10rpx;
					&-label{
						color: #999;
					}
				}
			}
		}
		.alarmCenter-content{
			padding: 70rpx $paddingLR;
			padding-bottom: 40rpx;
			&-row{
				padding-bottom: 10rpx;
			}
			&-bottom-btn{
				padding: 0 30rpx;
				padding-top: 20rpx;
			}
		}
	}
</style>
<template>
	<view class="alarmCenter">
		<view class="alarmCenter-header">
			<view class="alarmCenter-header-picker flex-center" @click="selectShow = true">
				<text>{{currentLabel}}</text>
				<u-icon name="arrow-down-fill" class="pl20" color="#aaa" size="20"></u-icon>
			</view>
			<u-search class="alarmCenter-header-search" :show-action="false"></u-search>
		</view>
		<mescroll-body top="0" ref="mescrollRef" bottom="20" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="alarmCenter-list">
				<view class="alarmCenter-box" v-for="(item,index) in 3" :key="index" @click="goAlarmDetailFn(item)">
					<view class="alarmCenter-box-top">
						<tuiIcon v-if="true" name="yichuli" @click.stop="alarmShowFlag = true" color="#82C974" size="80" class="alarmCenter-box-rightTop-icon"></tuiIcon>
						<u-tag v-else text="我知道了" size="mini" color="#1B9DFF" shape="circle" class="alarmCenter-box-rightTop-icon" ></u-tag>
						<view class="alarmCenter-box-top-name text-bold">烟雾探测报警器</view>
						<view class="alarmCenter-box-top-info">
							<tuiIcon name="zaixian" class="pr20" color="#2C9004" size="60" ></tuiIcon>
							<view class="">
								<view class="alarmCenter-box-address">
									<text>区域：</text>
									<text>中青大厦18楼101北区</text>
								</view>
								<view class="alarmCenter-box-state">
									<text>状态：</text>
									<text>正常</text>
								</view>
							</view>
						</view>
					</view>
					<view class="alarmCenter-box-bottom">
						<view class="alarmCenter-box-bottom-row">
							<text class="alarmCenter-box-bottom-row-label">编号：</text>
							<text>20210210210210101</text>
						</view>
						<view class="alarmCenter-box-bottom-row">
							<text class="alarmCenter-box-bottom-row-label">位置：</text>
							<text>中青大厦18楼101北区</text>
						</view>
						<view class="alarmCenter-box-bottom-row">
							<text class="alarmCenter-box-bottom-row-label">时间：</text>
							<text>2021-01-21 10:20:20</text>
						</view>
						<view class="alarmCenter-box-bottom-row">
							<text class="alarmCenter-box-bottom-row-label">详细地址：</text>
							<text>福建省福州市闽侯县上街镇乌龙江大道</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<u-select v-model="selectShow" :list="stateList" @confirm="onConfirmSelectFn"></u-select>
		<u-popup v-model="alarmShowFlag" mode="center" :closeable="true" width="80%">
			<view class="alarmCenter-content">
				<view class="alarmCenter-content-row">项目：上海德润谷云物联科技有限公司集团有限公司</view>
				<view class="alarmCenter-content-row">地址：福建省福州市闽侯县</view>
				<view class="alarmCenter-content-row">线路：总路</view>
				<view class="alarmCenter-content-row">报警类型：异常分闸</view>
				<view class="alarmCenter-content-row">报警时间：2020年12月8日09:30:41</view>
				<view class="alarmCenter-content-row">联系人：林工</view>
				<view class="alarmCenter-content-row">联系电话：15860886888</view>
				<view class="alarmCenter-content-bottom-btn">
					<u-button type="primary" shape="circle">立即处理</u-button>
					<view class="pt20"></view>
					<u-button type="primary" shape="circle">填写维保</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		data() {
			return {
				currentLabel:"全部",
				selectShow:false, // 选择框开关
				alarmShowFlag:false, // 警报信息开关
				stateList:[{
					label:"全部",
					value:1
				},{
					label:"已处理",
					value:2
				},{
					label:"未处理",
					value:3
				}]
			}
		},
		mixins:[MescrollMixin],
		onLoad() {},
		methods: {
			onConfirmSelectFn(e){
				console.log(e,"eeeeees");
				this.currentLabel = e[0].label;
			},
			goAlarmDetailFn(item){
				uni.navigateTo({
					url:"./alarmDetail"
				})
			}
		}
	}
</script>
