<style lang='scss' scoped>
	.alarmDetail{
		width: 100%;
		padding: 0rpx $paddingLR;
		&-row{
			padding: 20rpx;
			border-bottom: 1px solid #eee;
			display: flex;
			justify-content: space-between;
			&:last-child{
				border-bottom: none;
			}
			&-label{
				color: #666;
			}
			&-value{
				display: flex;
				align-items: center;
			}
		}
		/* &-bottom-btn{
			position: absolute;
			bottom: 20rpx;
			left: $paddingLR;
		} */
		&-popup-content{
			padding: 30rpx $paddingLR;
		}
		.popup-alarmType-box{
			width: 100%;
			border-radius: 40rpx;
			color: #1D9AFD;
			padding: 20rpx 0;
			text-align: center;
			
		}
		.currentSelectValue{
			color: #fff;
			background-color: #1D9AFD;
			
		}
	}
</style>
<template>
	<view class="alarmDetail">
		<view class="alarmDetail-row">
			<view class="alarmDetail-row-label">场所名称</view>
			<view class="alarmDetail-row-value">德润物业</view>
		</view>
		<view class="alarmDetail-row">
			<view class="alarmDetail-row-label">设备类型</view>
			<view class="alarmDetail-row-value">烟雾探测报警器</view>
		</view>
		<view class="alarmDetail-row">
			<view class="alarmDetail-row-label">编号</view>
			<view class="alarmDetail-row-value">德润物业</view>
		</view>
		<view class="alarmDetail-row">
			<view class="alarmDetail-row-label">位置</view>
			<view class="alarmDetail-row-value">中青大厦18楼101北区</view>
		</view>
		<view class="alarmDetail-row">
			<view class="alarmDetail-row-label">警情类型</view>
			<view class="alarmDetail-row-value">
				<text class="pr10" style="color: #FC5D42;">火警</text>
				<tuiIcon name="huozai" color="#FC5D42"></tuiIcon>
			</view>
		</view>
		<view class="alarmDetail-row">
			<view class="alarmDetail-row-label">电池电压</view>
			<view class="alarmDetail-row-value">3.0V</view>
		</view>
		<view class="alarmDetail-row">
			<view class="alarmDetail-row-label">信号强度</view>
			<view class="alarmDetail-row-value">96mp</view>
		</view>
		<view class="alarmDetail-row">
			<view class="alarmDetail-row-label">CPU温度</view>
			<view class="alarmDetail-row-value">20°C</view>
		</view>
		<view class="alarmDetail-row">
			<view class="alarmDetail-row-label">发生时间</view>
			<view class="alarmDetail-row-value">2021-1-25 16:01:33</view>
		</view>
		<view class="alarmDetail-row">
			<view class="alarmDetail-row-label">详细地址</view>
			<view class="alarmDetail-row-value">福建省福州市闽侯县上街镇乌龙江</view>
		</view>
		<view class="alarmDetail-row">
			<view class="alarmDetail-row-label">负责人员</view>
			<view class="alarmDetail-row-value">林工</view>
		</view>
		<view class="alarmDetail-row">
			<view class="alarmDetail-row-label">处理时间</view>
			<view class="alarmDetail-row-value">2021年1月25日16:02:35</view>
		</view>
		<view class="alarmDetail-row">
			<view class="alarmDetail-row-label">处理结果</view>
			<view class="alarmDetail-row-value">已处理</view>
		</view>
		<u-button type="primary" @click="alarmDealwithFlag=true">立即处理</u-button>
		<u-popup v-model="alarmDealwithFlag" mode="bottom">
			<view class="alarmDetail-popup-content">
				<view class="popup-alarmType-list">
					<view class="popup-alarmType-box" :class="{currentSelectValue:currentActionAlarmType=='test'}" @click="pickActionFn('test')">火警测试</view>
					<view class="popup-alarmType-box" :class="{currentSelectValue:currentActionAlarmType=='misinformation'}" @click="pickActionFn('misinformation')">火警误报</view>
					<view class="popup-alarmType-box" :class="{currentSelectValue:currentActionAlarmType=='real'}" @click="pickActionFn('real')">真实火警</view>
				</view>
			</view>
			<view class="popup-alarmType-btn flex-between">
				<u-button class="flex1" @click="dealwithLaterFn">稍后处理</u-button>
				<u-button class="flex1" type="primary">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				alarmDealwithFlag:false,
				currentActionAlarmType:"test" // 当前
			}
		},
		onLoad() {},
		methods: {
			pickActionFn(text){
				this.currentActionAlarmType = text;
				switch (text){
					case "value":
						break;
					default:
						break;
				}
			},
			dealwithLaterFn(){
				this.alarmDealwithFlag = false;
			},
			
		}
	}
</script>
